From d454b6696915af23f4dd85d99e6229a64638f74e Mon Sep 17 00:00:00 2001 From: Laurel Thorburn Date: Tue, 19 May 2026 11:08:03 -0600 Subject: [PATCH 01/12] remove v1 doc ts files --- .../checkout/reference/apis/address.doc.ts | 51 - .../checkout/reference/apis/analytics.doc.ts | 31 - .../checkout/reference/apis/attributes.doc.ts | 55 -- .../reference/apis/buyer-identity.doc.ts | 51 - .../reference/apis/buyer-journey.doc.ts | 84 -- .../reference/apis/cart-instructions.doc.ts | 45 - .../checkout/reference/apis/cart-lines.doc.ts | 63 -- .../reference/apis/checkout-token.doc.ts | 30 - .../checkout/reference/apis/cost.doc.ts | 49 - .../reference/apis/customer-privacy.doc.ts | 38 - .../checkout/reference/apis/delivery.doc.ts | 119 --- .../checkout/reference/apis/discounts.doc.ts | 47 - .../reference/apis/extension-meta.doc.ts | 52 - .../checkout/reference/apis/gift-cards.doc.ts | 41 - .../reference/apis/localization.doc.ts | 72 -- .../reference/apis/localized-fields.doc.ts | 41 - .../checkout/reference/apis/metafields.doc.ts | 47 - .../checkout/reference/apis/note.doc.ts | 42 - .../checkout/reference/apis/order.doc.ts | 42 - .../reference/apis/payment-options.doc.ts | 41 - .../checkout/reference/apis/query.doc.ts | 31 - .../reference/apis/session-token.doc.ts | 36 - .../checkout/reference/apis/settings.doc.ts | 37 - .../checkout/reference/apis/shop.doc.ts | 30 - .../checkout/reference/apis/storage.doc.ts | 33 - .../checkout/reference/hooks/api.doc.ts | 24 - .../reference/hooks/extension-api.doc.ts | 24 - .../reference/hooks/subscription.doc.ts | 24 - ...ress-autocomplete.format-suggestion.doc.ts | 35 - ...rchase.address-autocomplete.suggest.doc.ts | 33 - ...hase.checkout.actions.render-before.doc.ts | 15 - .../purchase.checkout.block.render.doc.ts | 16 - ...heckout.cart-line-item.render-after.doc.ts | 21 - ...heckout.cart-line-list.render-after.doc.ts | 15 - ...chase.checkout.contact.render-after.doc.ts | 15 - ...ckout.delivery-address.render-after.doc.ts | 15 - ...kout.delivery-address.render-before.doc.ts | 15 - ...rchase.checkout.footer.render-after.doc.ts | 19 - ...rchase.checkout.header.render-after.doc.ts | 19 - ...ut.payment-method-list.render-after.doc.ts | 15 - ...t.payment-method-list.render-before.doc.ts | 15 - ...t.pickup-location-list.render-after.doc.ts | 18 - ....pickup-location-list.render-before.doc.ts | 18 - ...p-location-option-item.render-after.doc.ts | 21 - ...kout.pickup-point-list.render-after.doc.ts | 14 - ...out.pickup-point-list.render-before.doc.ts | 14 - ...se.checkout.reductions.render-after.doc.ts | 15 - ...e.checkout.reductions.render-before.doc.ts | 15 - ...shipping-option-item.details.render.doc.ts | 26 - ...t.shipping-option-item.render-after.doc.ts | 25 - ...t.shipping-option-list.render-after.doc.ts | 21 - ....shipping-option-list.render-before.doc.ts | 21 - ...chase.thank-you.announcement.render.doc.ts | 17 - .../purchase.thank-you.block.render.doc.ts | 16 - ...ank-you.cart-line-item.render-after.doc.ts | 21 - ...ank-you.cart-line-list.render-after.doc.ts | 15 - ...u.customer-information.render-after.doc.ts | 15 - ...chase.thank-you.footer.render-after.doc.ts | 19 - ...chase.thank-you.header.render-after.doc.ts | 19 - .../checkout/staticPages/configuration.doc.ts | 512 ---------- .../staticPages/error-handling.doc.ts | 55 -- .../staticPages/extension-overview.doc.ts | 202 ---- .../checkout/staticPages/overview.doc.ts | 297 ------ .../staticPages/upgrading-to-2025-10.doc.ts | 390 -------- .../using-polaris-web-components.doc.ts | 582 ----------- .../reference/apis/analytics.doc.ts | 52 - .../apis/authenticated-account.doc.ts | 85 -- .../apis/customer-account-api.doc.ts | 76 -- .../reference/apis/customer-privacy.doc.ts | 88 -- .../reference/apis/extension.doc.ts | 22 - .../reference/apis/intents.doc.ts | 95 -- .../reference/apis/localization.doc.ts | 82 -- .../reference/apis/navigation.doc.ts | 35 - .../apis/order-status-api/address.doc.ts | 87 -- .../apis/order-status-api/attributes.doc.ts | 85 -- .../authentication-state.doc.ts | 85 -- .../order-status-api/buyer-identity.doc.ts | 80 -- .../apis/order-status-api/cart-lines.doc.ts | 85 -- .../order-status-api/checkout-settings.doc.ts | 85 -- .../apis/order-status-api/cost.doc.ts | 85 -- .../apis/order-status-api/discounts.doc.ts | 85 -- .../apis/order-status-api/gift-cards.doc.ts | 85 -- .../apis/order-status-api/metafields.doc.ts | 87 -- .../apis/order-status-api/note.doc.ts | 78 -- .../apis/order-status-api/order.doc.ts | 85 -- .../orderstatus-localization.doc.ts | 85 -- .../order-status-api/require-login.doc.ts | 85 -- .../apis/order-status-api/shop.doc.ts | 85 -- .../reference/apis/query.doc.ts | 56 -- .../reference/apis/session-token.doc.ts | 52 - .../reference/apis/settings.doc.ts | 52 - .../reference/apis/storage.doc.ts | 29 - .../reference/apis/toast.doc.ts | 22 - .../reference/apis/version.doc.ts | 22 - ...ustomer-account.footer.render-after.doc.ts | 34 - ...unt.order-index.announcement.render.doc.ts | 31 - ...er-account.order-index.block.render.doc.ts | 35 - ...nt.order-status.announcement.render.doc.ts | 31 - ...r-account.order-status.block.render.doc.ts | 39 - ...-status.cart-line-item.render-after.doc.ts | 32 - ...-status.cart-line-list.render-after.doc.ts | 29 - ...s.customer-information.render-after.doc.ts | 29 - ...us.fulfillment-details.render-after.doc.ts | 27 - ...status.payment-details.render-after.doc.ts | 27 - ...-status.return-details.render-after.doc.ts | 27 - ...atus.unfulfilled-items.render-after.doc.ts | 27 - ...count.order.action.menu-item.render.doc.ts | 66 -- ...ustomer-account.order.action.render.doc.ts | 42 - .../customer-account.order.page.render.doc.ts | 31 - .../customer-account.page.render.doc.ts | 25 - ...ount.profile.addresses.render-after.doc.ts | 28 - ...account.profile.announcement.render.doc.ts | 33 - ...stomer-account.profile.block.render.doc.ts | 36 - ...rofile.company-details.render-after.doc.ts | 28 - ...any-location-addresses.render-after.doc.ts | 31 - ...mpany-location-payment.render-after.doc.ts | 31 - ...company-location-staff.render-after.doc.ts | 31 - .../staticPages/configuration.doc.ts | 355 ------- .../staticPages/error-handling.doc.ts | 55 -- .../extension-targets-overview.doc.ts | 289 ------ .../staticPages/overview.doc.ts | 385 -------- .../staticPages/upgrading-to-2025-10.doc.ts | 310 ------ .../staticPages/using-web-components.doc.ts | 376 ------- .../reference/apis/action-api.doc.ts | 68 -- .../reference/apis/camera-api.doc.ts | 71 -- .../reference/apis/cart-api.doc.ts | 270 ----- .../reference/apis/cart-line-item-api.doc.ts | 66 -- .../reference/apis/cash-drawer-api.doc.ts | 66 -- .../reference/apis/connectivity-api.doc.ts | 62 -- .../reference/apis/customer-api.doc.ts | 61 -- .../reference/apis/device-api.doc.ts | 68 -- .../reference/apis/draft-order-api.doc.ts | 70 -- .../reference/apis/locale-api.doc.ts | 52 - .../reference/apis/navigation-api.doc.ts | 85 -- .../reference/apis/order-api.doc.ts | 68 -- .../reference/apis/pinpad-api.doc.ts | 60 -- .../reference/apis/print-api.doc.ts | 81 -- .../reference/apis/product-api.doc.ts | 68 -- .../reference/apis/product-search-api.doc.ts | 103 -- .../reference/apis/scanner-api.doc.ts | 71 -- .../reference/apis/session-api.doc.ts | 77 -- .../reference/apis/storage-api.doc.ts | 97 -- .../reference/apis/toast-api.doc.ts | 61 -- ...tem-details-action-menu-item-render.doc.ts | 26 - ...art-line-item-details-action-render.doc.ts | 26 - ...mer-details.action.menu-item.render.doc.ts | 26 - .../pos.customer-details.action.render.doc.ts | 26 - .../pos.customer-details.block.render.doc.ts | 26 - ...der-details.action.menu-item.render.doc.ts | 26 - ...s.draft-order-details.action.render.doc.ts | 26 - ...os.draft-order-details.block.render.doc.ts | 26 - ...change.post.action.menu-item.render.doc.ts | 26 - .../pos.exchange.post.action.render.doc.ts | 26 - .../pos.exchange.post.block.render.doc.ts | 26 - .../targets/pos.home.modal.render.doc.ts | 25 - .../targets/pos.home.tile.render.doc.ts | 25 - ...der-details.action.menu-item.render.doc.ts | 26 - .../pos.order-details.action.render.doc.ts | 26 - .../pos.order-details.block.render.doc.ts | 26 - ...uct-details.action.menu-item.render.doc.ts | 26 - .../pos.product-details.action.render.doc.ts | 26 - .../pos.product-details.block.render.doc.ts | 26 - ...rchase.post.action.menu-item.render.doc.ts | 26 - .../pos.purchase.post.action.render.doc.ts | 26 - .../pos.purchase.post.block.render.doc.ts | 26 - .../pos.receipt-footer.block.render.doc.ts | 28 - .../pos.receipt-header.block.render.doc.ts | 28 - ...ter-details.action.menu-item.render.doc.ts | 25 - .../pos.register-details.action.render.doc.ts | 25 - .../pos.register-details.block.render.doc.ts | 25 - ...return.post.action.menu-item.render.doc.ts | 26 - .../pos.return.post.action.render.doc.ts | 26 - .../pos.return.post.block.render.doc.ts | 26 - .../staticPages/pos-overview.doc.ts | 140 --- .../staticPages/targets-overview.doc.ts | 228 ----- .../surfaces/admin/api/action/action.doc.ts | 92 -- .../src/surfaces/admin/api/block/block.doc.ts | 90 -- .../checkout-rules/validation-settings.doc.ts | 96 -- .../customer-segment-template.doc.ts | 90 -- .../discount-function-settings.doc.ts | 102 -- .../surfaces/admin/api/intents/intents.doc.ts | 920 ------------------ .../order-routing-rule.doc.ts | 91 -- .../surfaces/admin/api/picker/picker.doc.ts | 135 --- .../api/print-action/print-action.doc.ts | 91 -- .../product-details-configuration.doc.ts | 91 -- ...oduct-variant-details-configuration.doc.ts | 91 -- .../api/purchase-options-card-action.doc.ts | 90 -- .../resource-picker/resource-picker.doc.ts | 185 ---- .../api/should-render/should-render.doc.ts | 88 -- .../admin/api/standard/standard.doc.ts | 91 -- .../AdminAction/AdminAction.ext.doc.ts | 126 --- .../AdminBlock/AdminBlock.ext.doc.ts | 129 --- .../AdminPrintAction.ext.doc.ts | 99 -- .../admin/components/Avatar/Avatar.doc.ts | 157 --- .../admin/components/Badge/Badge.doc.ts | 111 --- .../admin/components/Banner/Banner.doc.ts | 118 --- .../surfaces/admin/components/Box/Box.doc.ts | 118 --- .../admin/components/Button/Button.doc.ts | 216 ---- .../components/ButtonGroup/ButtonGroup.doc.ts | 118 --- .../admin/components/Checkbox/Checkbox.doc.ts | 130 --- .../admin/components/Chip/Chip.doc.ts | 110 --- .../components/ChoiceList/ChoiceList.doc.ts | 139 --- .../components/Clickable/Clickable.doc.ts | 136 --- .../ClickableChip/ClickableChip.doc.ts | 123 --- .../components/ColorField/ColorField.doc.ts | 173 ---- .../components/ColorPicker/ColorPicker.doc.ts | 80 -- .../components/DateField/DateField.doc.ts | 187 ---- .../components/DatePicker/DatePicker.doc.ts | 119 --- .../admin/components/Divider/Divider.doc.ts | 98 -- .../admin/components/DropZone/DropZone.doc.ts | 187 ---- .../components/EmailField/EmailField.doc.ts | 124 --- .../admin/components/Form/Form.ext.doc.ts | 118 --- .../FunctionSettings.ext.doc.ts | 113 --- .../admin/components/Grid/Grid.doc.ts | 119 --- .../admin/components/Heading/Heading.doc.ts | 110 --- .../admin/components/Icon/Icon.doc.ts | 159 --- .../admin/components/Image/Image.doc.ts | 137 --- .../admin/components/Link/Link.doc.ts | 169 ---- .../admin/components/Menu/Menu.doc.ts | 140 --- .../admin/components/Modal/Modal.ab.doc.ts | 211 ---- .../components/MoneyField/MoneyField.doc.ts | 112 --- .../components/NumberField/NumberField.doc.ts | 109 --- .../components/OrderedList/OrderedList.doc.ts | 87 -- .../admin/components/Page/Page.ab.doc.ts | 177 ---- .../components/Paragraph/Paragraph.doc.ts | 153 --- .../PasswordField/PasswordField.doc.ts | 137 --- .../components/Popover/Popover.ab.doc.ts | 160 --- .../QueryContainer/QueryContainer.doc.ts | 84 -- .../components/SearchField/SearchField.doc.ts | 104 -- .../admin/components/Section/Section.doc.ts | 125 --- .../admin/components/Select/Select.doc.ts | 184 ---- .../admin/components/Spinner/Spinner.doc.ts | 105 -- .../admin/components/Stack/Stack.doc.ts | 122 --- .../admin/components/Switch/Switch.doc.ts | 144 --- .../admin/components/Table/Table.doc.ts | 206 ---- .../admin/components/Text/Text.doc.ts | 168 ---- .../admin/components/TextArea/TextArea.doc.ts | 123 --- .../components/TextField/TextField.doc.ts | 144 --- .../components/Thumbnail/Thumbnail.doc.ts | 112 --- .../admin/components/Tooltip/Tooltip.doc.ts | 120 --- .../admin/components/URLField/URLField.doc.ts | 112 --- .../UnorderedList/UnorderedList.doc.ts | 87 -- .../patterns/accountConnection.ab.doc.ts | 54 - .../components/patterns/appCard.ab.doc.ts | 53 - .../components/patterns/calloutCard.ab.doc.ts | 49 - .../components/patterns/details.ab.doc.ts | 96 -- .../components/patterns/emptyState.ab.doc.ts | 48 - .../components/patterns/footerHelp.ab.doc.ts | 53 - .../components/patterns/homepage.ab.doc.ts | 85 -- .../admin/components/patterns/index.ab.doc.ts | 80 -- .../components/patterns/indexTable.ab.doc.ts | 57 -- .../patterns/interstitialNav.ab.doc.ts | 51 - .../components/patterns/mediaCard.ab.doc.ts | 52 - .../components/patterns/metricsCard.ab.doc.ts | 50 - .../patterns/resourceList.ab.doc.ts | 56 -- .../components/patterns/settings.ab.doc.ts | 80 -- .../components/patterns/setupGuide.ab.doc.ts | 47 - .../Abbreviation/Abbreviation.doc.ts | 13 - .../Announcement/Announcement.doc.ts | 17 - .../checkout/components/Badge/Badge.doc.ts | 13 - .../checkout/components/Banner/Banner.doc.ts | 16 - .../checkout/components/Box/Box.doc.ts | 19 - .../checkout/components/Button/Button.doc.ts | 16 - .../components/Checkbox/Checkbox.doc.ts | 11 - .../checkout/components/Chip/Chip.doc.ts | 11 - .../components/ChoiceList/ChoiceList.doc.ts | 97 -- .../components/Clickable/Clickable.doc.ts | 11 - .../ClickableChip/ClickableChip.doc.ts | 11 - .../ClipboardItem/ClipboardItem.doc.ts | 12 - .../ConsentCheckbox/ConsentCheckbox.doc.ts | 13 - .../ConsentPhoneField.doc.ts | 13 - .../components/DateField/DateField.doc.ts | 11 - .../components/DatePicker/DatePicker.doc.ts | 11 - .../components/Details/Details.doc.ts | 16 - .../components/Divider/Divider.doc.ts | 11 - .../components/DropZone/DropZone.doc.ts | 29 - .../components/EmailField/EmailField.doc.ts | 11 - .../checkout/components/Form/Form.doc.ts | 14 - .../checkout/components/Grid/Grid.doc.ts | 16 - .../components/Heading/Heading.doc.ts | 21 - .../checkout/components/Icon/Icon.doc.ts | 11 - .../checkout/components/Image/Image.doc.ts | 15 - .../checkout/components/Link/Link.doc.ts | 16 - .../checkout/components/Map/Map.doc.ts | 46 - .../checkout/components/Modal/Modal.doc.ts | 16 - .../components/MoneyField/MoneyField.doc.ts | 11 - .../components/NumberField/NumberField.doc.ts | 11 - .../components/OrderedList/OrderedList.doc.ts | 22 - .../components/Paragraph/Paragraph.doc.ts | 13 - .../PasswordField/PasswordField.doc.ts | 11 - .../components/PaymentIcon/PaymentIcon.doc.ts | 11 - .../components/PhoneField/PhoneField.doc.ts | 11 - .../components/Popover/Popover.doc.ts | 11 - .../components/PressButton/PressButton.doc.ts | 11 - .../ProductThumbnail/ProductThumbnail.doc.ts | 11 - .../components/Progress/Progress.doc.ts | 38 - .../checkout/components/QRCode/QRCode.doc.ts | 18 - .../QueryContainer/QueryContainer.doc.ts | 19 - .../components/ScrollBox/ScrollBox.doc.ts | 11 - .../components/Section/Section.doc.ts | 14 - .../checkout/components/Select/Select.doc.ts | 16 - .../checkout/components/Sheet/Sheet.doc.ts | 147 --- .../SkeletonParagraph.doc.ts | 11 - .../components/Spinner/Spinner.doc.ts | 11 - .../checkout/components/Stack/Stack.doc.ts | 20 - .../checkout/components/Switch/Switch.doc.ts | 11 - .../checkout/components/Text/Text.doc.ts | 19 - .../components/TextArea/TextArea.doc.ts | 11 - .../components/TextField/TextField.doc.ts | 15 - .../checkout/components/Time/Time.doc.ts | 13 - .../components/Tooltip/Tooltip.doc.ts | 11 - .../UnorderedList/UnorderedList.doc.ts | 22 - .../components/UrlField/UrlField.doc.ts | 11 - .../Abbreviation/Abbreviation.doc.ts | 11 - .../Announcement/Announcement.doc.ts | 14 - .../components/Avatar/Avatar.doc.ts | 74 -- .../components/Badge/Badge.doc.ts | 11 - .../components/Banner/Banner.doc.ts | 18 - .../components/Box/Box.doc.ts | 16 - .../components/Button/Button.doc.ts | 31 - .../components/ButtonGroup/ButtonGroup.doc.ts | 74 -- .../components/Checkbox/Checkbox.doc.ts | 11 - .../components/Chip/Chip.doc.ts | 11 - .../components/ChoiceList/ChoiceList.doc.ts | 16 - .../components/Clickable/Clickable.doc.ts | 11 - .../ClickableChip/ClickableChip.doc.ts | 11 - .../ClipboardItem/ClipboardItem.doc.ts | 12 - .../ConsentCheckbox/ConsentCheckbox.doc.ts | 13 - .../ConsentPhoneField.doc.ts | 13 - .../CustomerAccountAction.doc.ts | 78 -- .../components/DateField/DateField.doc.ts | 11 - .../components/DatePicker/DatePicker.doc.ts | 11 - .../components/Details/Details.doc.ts | 16 - .../components/Divider/Divider.doc.ts | 11 - .../components/DropZone/DropZone.doc.ts | 14 - .../components/EmailField/EmailField.doc.ts | 11 - .../components/Form/Form.doc.ts | 13 - .../components/Grid/Grid.doc.ts | 16 - .../components/Heading/Heading.doc.ts | 20 - .../components/Icon/Icon.doc.ts | 11 - .../components/Image/Image.doc.ts | 14 - .../components/ImageGroup/ImageGroup.doc.ts | 59 -- .../components/Link/Link.doc.ts | 13 - .../components/Map/Map.doc.ts | 16 - .../components/Menu/Menu.doc.ts | 80 -- .../components/Modal/Modal.doc.ts | 11 - .../components/MoneyField/MoneyField.doc.ts | 11 - .../components/NumberField/NumberField.doc.ts | 11 - .../components/OrderedList/OrderedList.doc.ts | 21 - .../components/Page/Page.doc.ts | 82 -- .../components/Paragraph/Paragraph.doc.ts | 12 - .../PasswordField/PasswordField.doc.ts | 11 - .../components/PaymentIcon/PaymentIcon.doc.ts | 11 - .../components/PhoneField/PhoneField.doc.ts | 11 - .../components/Popover/Popover.doc.ts | 11 - .../components/PressButton/PressButton.doc.ts | 11 - .../ProductThumbnail/ProductThumbnail.doc.ts | 11 - .../components/Progress/Progress.doc.ts | 15 - .../components/QRCode/QRCode.doc.ts | 17 - .../QueryContainer/QueryContainer.doc.ts | 19 - .../components/ScrollBox/ScrollBox.doc.ts | 11 - .../components/Section/Section.doc.ts | 80 -- .../components/Select/Select.doc.ts | 16 - .../components/Sheet/Sheet.doc.ts | 13 - .../SkeletonParagraph.doc.ts | 11 - .../components/Spinner/Spinner.doc.ts | 11 - .../components/Stack/Stack.doc.ts | 17 - .../components/Switch/Switch.doc.ts | 11 - .../components/Text/Text.doc.ts | 17 - .../components/TextArea/TextArea.doc.ts | 11 - .../components/TextField/TextField.doc.ts | 14 - .../components/Time/Time.doc.ts | 16 - .../components/Tooltip/Tooltip.doc.ts | 11 - .../components/URLField/URLField.doc.ts | 11 - .../UnorderedList/UnorderedList.doc.ts | 21 - .../components/Badge/Badge.doc.ts | 57 -- .../components/Banner/Banner.doc.ts | 59 -- .../point-of-sale/components/Box/Box.doc.ts | 50 - .../components/Button/Button.doc.ts | 58 -- .../components/ChoiceList/ChoiceList.doc.ts | 113 --- .../components/Clickable/Clickable.doc.ts | 64 -- .../components/DateField/DateField.doc.ts | 75 -- .../components/DatePicker/DatePicker.doc.ts | 87 -- .../components/DateSpinner/DateSpinner.doc.ts | 88 -- .../components/Divider/Divider.doc.ts | 48 - .../components/EmailField/EmailField.doc.ts | 74 -- .../components/Embed/Embed.doc.ts | 47 - .../components/EmptyState/EmptyState.doc.ts | 44 - .../components/Heading/Heading.doc.ts | 50 - .../point-of-sale/components/Icon/Icon.doc.ts | 51 - .../components/Image/Image.doc.ts | 57 -- .../point-of-sale/components/Link/Link.doc.ts | 58 -- .../components/Modal/Modal.doc.ts | 72 -- .../components/NumberField/NumberField.doc.ts | 94 -- .../point-of-sale/components/Page/Page.doc.ts | 63 -- .../components/PosBlock/PosBlock.doc.ts | 62 -- .../components/ScrollBox/ScrollBox.doc.ts | 49 - .../components/SearchField/SearchField.doc.ts | 75 -- .../components/Section/Section.doc.ts | 56 -- .../components/Spinner/Spinner.doc.ts | 51 - .../components/Stack/Stack.doc.ts | 51 - .../components/Switch/Switch.doc.ts | 73 -- .../point-of-sale/components/Tabs/Tabs.doc.ts | 91 -- .../point-of-sale/components/Text/Text.doc.ts | 61 -- .../components/TextArea/TextArea.doc.ts | 87 -- .../components/TextField/TextField.doc.ts | 115 --- .../point-of-sale/components/Tile/Tile.doc.ts | 65 -- .../components/TimeField/TimeField.doc.ts | 74 -- .../components/TimePicker/TimePicker.doc.ts | 88 -- 409 files changed, 26068 deletions(-) delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/address.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/analytics.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/attributes.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-identity.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-journey.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/cart-instructions.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/cart-lines.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/checkout-token.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/cost.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/customer-privacy.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/delivery.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/discounts.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/extension-meta.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/gift-cards.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/localization.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/localized-fields.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/metafields.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/note.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/order.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/payment-options.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/query.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/session-token.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/settings.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/shop.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/apis/storage.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/hooks/api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/hooks/extension-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/hooks/subscription.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.address-autocomplete.format-suggestion.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.address-autocomplete.suggest.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.actions.render-before.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.cart-line-item.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.cart-line-list.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.contact.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.delivery-address.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.delivery-address.render-before.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.footer.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.header.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.payment-method-list.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.payment-method-list.render-before.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-list.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-list.render-before.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-option-item.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-point-list.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-point-list.render-before.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.reductions.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.reductions.render-before.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-item.details.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-item.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-list.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-list.render-before.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.announcement.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-item.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-list.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.customer-information.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.footer.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.header.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/staticPages/configuration.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/staticPages/error-handling.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/staticPages/extension-overview.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/staticPages/overview.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/staticPages/upgrading-to-2025-10.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/staticPages/using-polaris-web-components.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/analytics.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/authenticated-account.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/customer-account-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/customer-privacy.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/extension.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/intents.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/localization.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/navigation.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/address.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/attributes.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/authentication-state.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/buyer-identity.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/cart-lines.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/checkout-settings.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/cost.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/discounts.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/gift-cards.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/metafields.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/note.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/order.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/orderstatus-localization.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/require-login.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/order-status-api/shop.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/query.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/session-token.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/settings.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/storage.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/toast.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/apis/version.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.footer.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-index.announcement.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-index.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-status.announcement.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-status.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-status.cart-line-item.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-status.cart-line-list.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-status.customer-information.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-status.fulfillment-details.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-status.payment-details.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-status.return-details.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order-status.unfulfilled-items.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order.action.menu-item.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order.action.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.order.page.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.page.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.profile.addresses.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.profile.announcement.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.profile.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.profile.company-details.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.profile.company-location-addresses.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.profile.company-location-payment.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/reference/targets/customer-account.profile.company-location-staff.render-after.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/staticPages/configuration.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/staticPages/error-handling.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/staticPages/extension-targets-overview.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/staticPages/overview.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/staticPages/upgrading-to-2025-10.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/staticPages/using-web-components.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/action-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/camera-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/cart-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/cart-line-item-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/cash-drawer-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/connectivity-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/customer-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/device-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/draft-order-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/locale-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/navigation-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/order-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/pinpad-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/print-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/product-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/product-search-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/scanner-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/session-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/storage-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/apis/toast-api.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.cart-line-item-details-action-menu-item-render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.cart-line-item-details-action-render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.customer-details.action.menu-item.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.customer-details.action.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.customer-details.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.draft-order-details.action.menu-item.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.draft-order-details.action.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.draft-order-details.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.exchange.post.action.menu-item.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.exchange.post.action.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.exchange.post.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.home.modal.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.home.tile.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.order-details.action.menu-item.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.order-details.action.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.order-details.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.product-details.action.menu-item.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.product-details.action.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.product-details.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.purchase.post.action.menu-item.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.purchase.post.action.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.purchase.post.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.receipt-footer.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.receipt-header.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.register-details.action.menu-item.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.register-details.action.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.register-details.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.return.post.action.menu-item.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.return.post.action.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/reference/targets/pos.return.post.block.render.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/pos-overview.doc.ts delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/staticPages/targets-overview.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/action/action.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/block/block.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/checkout-rules/validation-settings.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/customer-segment-template/customer-segment-template.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/discount-function-settings/discount-function-settings.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/intents/intents.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/order-routing-rule/order-routing-rule.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/picker/picker.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/print-action/print-action.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/product-configuration/product-details-configuration.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/product-configuration/product-variant-details-configuration.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/purchase-options-card-action.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/resource-picker/resource-picker.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/should-render/should-render.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/api/standard/standard.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminAction/AdminAction.ext.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminBlock/AdminBlock.ext.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/AdminPrintAction/AdminPrintAction.ext.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Avatar/Avatar.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Badge/Badge.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Banner/Banner.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Box/Box.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Button/Button.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ButtonGroup/ButtonGroup.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Checkbox/Checkbox.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Chip/Chip.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ChoiceList/ChoiceList.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Clickable/Clickable.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ClickableChip/ClickableChip.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ColorField/ColorField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/ColorPicker/ColorPicker.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DateField/DateField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DatePicker/DatePicker.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Divider/Divider.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/DropZone/DropZone.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/EmailField/EmailField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Form/Form.ext.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/FunctionSettings/FunctionSettings.ext.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Grid/Grid.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Heading/Heading.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Icon/Icon.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Image/Image.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Link/Link.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Menu/Menu.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Modal/Modal.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/MoneyField/MoneyField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/NumberField/NumberField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/OrderedList/OrderedList.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Page/Page.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Paragraph/Paragraph.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/PasswordField/PasswordField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Popover/Popover.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/QueryContainer/QueryContainer.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/SearchField/SearchField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Section/Section.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Select/Select.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Spinner/Spinner.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Stack/Stack.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Switch/Switch.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Table/Table.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Text/Text.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/TextArea/TextArea.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/TextField/TextField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Thumbnail/Thumbnail.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/Tooltip/Tooltip.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/URLField/URLField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/UnorderedList/UnorderedList.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/accountConnection.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/appCard.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/calloutCard.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/details.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/emptyState.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/footerHelp.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/homepage.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/index.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/indexTable.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/interstitialNav.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/mediaCard.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/metricsCard.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/resourceList.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/settings.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/components/patterns/setupGuide.ab.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Abbreviation/Abbreviation.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Announcement/Announcement.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Badge/Badge.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Banner/Banner.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Box/Box.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Button/Button.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Checkbox/Checkbox.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Chip/Chip.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/ChoiceList/ChoiceList.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Clickable/Clickable.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/ClickableChip/ClickableChip.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/ClipboardItem/ClipboardItem.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/ConsentCheckbox/ConsentCheckbox.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/ConsentPhoneField/ConsentPhoneField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/DateField/DateField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/DatePicker/DatePicker.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Details/Details.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Divider/Divider.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/DropZone/DropZone.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/EmailField/EmailField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Form/Form.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Grid/Grid.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Heading/Heading.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Icon/Icon.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Image/Image.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Link/Link.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Map/Map.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Modal/Modal.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/MoneyField/MoneyField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/NumberField/NumberField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/OrderedList/OrderedList.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Paragraph/Paragraph.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/PasswordField/PasswordField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/PaymentIcon/PaymentIcon.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/PhoneField/PhoneField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Popover/Popover.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/PressButton/PressButton.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/ProductThumbnail/ProductThumbnail.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Progress/Progress.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/QRCode/QRCode.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/QueryContainer/QueryContainer.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/ScrollBox/ScrollBox.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Section/Section.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Select/Select.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Sheet/Sheet.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/SkeletonParagraph/SkeletonParagraph.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Spinner/Spinner.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Stack/Stack.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Switch/Switch.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Text/Text.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/TextArea/TextArea.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/TextField/TextField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Time/Time.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/Tooltip/Tooltip.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/UnorderedList/UnorderedList.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/components/UrlField/UrlField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Abbreviation/Abbreviation.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Announcement/Announcement.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Avatar/Avatar.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Badge/Badge.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Banner/Banner.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Box/Box.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Button/Button.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ButtonGroup/ButtonGroup.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Checkbox/Checkbox.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Chip/Chip.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ChoiceList/ChoiceList.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Clickable/Clickable.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ClickableChip/ClickableChip.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ClipboardItem/ClipboardItem.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ConsentCheckbox/ConsentCheckbox.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ConsentPhoneField/ConsentPhoneField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/CustomerAccountAction/CustomerAccountAction.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/DateField/DateField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/DatePicker/DatePicker.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Details/Details.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Divider/Divider.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/DropZone/DropZone.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/EmailField/EmailField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Form/Form.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Grid/Grid.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Heading/Heading.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Icon/Icon.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Image/Image.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ImageGroup/ImageGroup.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Link/Link.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Map/Map.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Menu/Menu.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Modal/Modal.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/MoneyField/MoneyField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/NumberField/NumberField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/OrderedList/OrderedList.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Page/Page.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Paragraph/Paragraph.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PasswordField/PasswordField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PaymentIcon/PaymentIcon.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PhoneField/PhoneField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Popover/Popover.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/PressButton/PressButton.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ProductThumbnail/ProductThumbnail.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Progress/Progress.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/QRCode/QRCode.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/QueryContainer/QueryContainer.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/ScrollBox/ScrollBox.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Section/Section.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Select/Select.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Sheet/Sheet.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/SkeletonParagraph/SkeletonParagraph.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Spinner/Spinner.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Stack/Stack.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Switch/Switch.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Text/Text.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/TextArea/TextArea.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/TextField/TextField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Time/Time.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/Tooltip/Tooltip.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/URLField/URLField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/customer-account/components/UnorderedList/UnorderedList.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Badge/Badge.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Banner/Banner.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Box/Box.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Button/Button.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/ChoiceList/ChoiceList.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Clickable/Clickable.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/DateField/DateField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/DatePicker/DatePicker.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/DateSpinner/DateSpinner.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Divider/Divider.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/EmailField/EmailField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Embed/Embed.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/EmptyState/EmptyState.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Heading/Heading.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Icon/Icon.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Image/Image.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Link/Link.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Modal/Modal.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/NumberField/NumberField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Page/Page.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/PosBlock/PosBlock.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/ScrollBox/ScrollBox.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/SearchField/SearchField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Section/Section.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Spinner/Spinner.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Stack/Stack.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Switch/Switch.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Tabs/Tabs.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Text/Text.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/TextArea/TextArea.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/TextField/TextField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/Tile/Tile.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/TimeField/TimeField.doc.ts delete mode 100644 packages/ui-extensions/src/surfaces/point-of-sale/components/TimePicker/TimePicker.doc.ts diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/address.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/address.doc.ts deleted file mode 100644 index 213a5b3674..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/address.doc.ts +++ /dev/null @@ -1,51 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, - CHECKOUT_API_PROPERTIES_DESCRIPTION, - REQUIRES_PROTECTED_CUSTOMER_DATA_LEVEL_2, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Addresses API', - description: 'The API for interacting with addresses.', - isVisualComponent: false, - requires: REQUIRES_PROTECTED_CUSTOMER_DATA_LEVEL_2, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_AddressApi', - }, - { - title: 'CheckoutApi', - description: CHECKOUT_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Checkout_AddressApi', - }, - { - title: 'useBillingAddress', - description: - 'Returns the proposed `billingAddress` applied to the checkout.', - type: 'UseBillingAddressGeneratedType', - }, - { - title: 'useShippingAddress', - description: - 'Returns the proposed `shippingAddress` applied to the checkout.', - type: 'UseShippingAddressGeneratedType', - }, - { - title: 'useApplyShippingAddressChange', - description: - 'Returns a function to mutate the `shippingAddress` property of checkout.', - type: 'UseApplyShippingAddressChangeGeneratedType', - }, - ], - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/analytics.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/analytics.doc.ts deleted file mode 100644 index b09edcd99f..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/analytics.doc.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Analytics API', - description: 'The API for interacting with web pixels.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Platform APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_AnalyticsApi', - }, - ], - defaultExample: getExample('analytics-publish', ['jsx']), - examples: { - description: '', - examples: [getExample('analytics-visitor', ['jsx'])], - }, - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/attributes.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/attributes.doc.ts deleted file mode 100644 index c782713338..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/attributes.doc.ts +++ /dev/null @@ -1,55 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - STANDARD_API_PROPERTIES_DESCRIPTION, - CHECKOUT_API_PROPERTIES_DESCRIPTION, - getLinksByTag, - getHookExample, - getExample, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Attributes API', - description: 'The API for interacting with cart and checkout attributes.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_AttributesApi', - }, - { - title: 'CheckoutApi', - description: CHECKOUT_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Checkout_AttributesApi', - }, - { - title: 'useApplyAttributeChange', - description: - 'Returns a function to mutate the `attributes` property of the checkout.', - type: 'UseApplyAttributeChangeGeneratedType', - }, - { - title: 'useAttributes', - description: 'Returns the proposed `attributes` applied to the checkout.', - type: 'UseAttributesGeneratedType', - }, - { - title: 'useAttributeValues', - description: - 'Returns the values for the specified `attributes` applied to the checkout.', - type: 'UseAttributeValuesGeneratedType', - }, - ], - defaultExample: getExample('attribute-values', ['jsx']), - examples: { - description: '', - examples: [getExample('attributes/attribute-change', ['jsx'])], - }, - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-identity.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-identity.doc.ts deleted file mode 100644 index 6bf23cc51b..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-identity.doc.ts +++ /dev/null @@ -1,51 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - STANDARD_API_PROPERTIES_DESCRIPTION, - REQUIRES_PROTECTED_CUSTOMER_DATA_LEVEL_2, - getLinksByTag, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Buyer Identity API', - description: 'The API for interacting with the buyer identity.', - requires: REQUIRES_PROTECTED_CUSTOMER_DATA_LEVEL_2, - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_BuyerIdentityApi', - }, - { - title: 'useCustomer', - description: - "Returns the current `Customer`. The value is `undefined` if the buyer isn't a known customer for this shop or if they haven't logged in yet.", - type: 'UseCustomerGeneratedType', - }, - { - title: 'useEmail', - description: - 'Returns the email address of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data.', - type: 'UseEmailGeneratedType', - }, - { - title: 'usePhone', - description: - 'Returns the phone number of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data.', - type: 'UsePhoneGeneratedType', - }, - { - title: 'usePurchasingCompany', - description: - "Provides information about the company and its location that the business customer is purchasing on behalf of during a B2B checkout. It includes details that can be utilized to identify both the company and its corresponding location to which the business customer belongs. \n \n The value is `undefined` if a business customer isn't logged in. This function throws an error if the app doesn't have access to customer data.", - type: 'UsePurchasingCompanyGeneratedType', - }, - ], - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-journey.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-journey.doc.ts deleted file mode 100644 index 50e1524a35..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/buyer-journey.doc.ts +++ /dev/null @@ -1,84 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - STANDARD_API_PROPERTIES_DESCRIPTION, - getExample, - getLinksByTag, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Buyer Journey API', - description: 'The API for interacting with the buyer journey.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_BuyerJourneyApi', - }, - { - title: 'useBuyerJourney', - description: - 'Returns the buyerJourney details on buyer progression in checkout.', - type: 'UseBuyerJourneyGeneratedType', - }, - { - title: 'useBuyerJourneyCompleted', - description: ` - Returns \`true\` if the buyer completed submitting their order. - For example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order. - `, - type: 'UseBuyerJourneyCompletedGeneratedType', - }, - { - title: 'useBuyerJourneyIntercept', - description: ` - Installs a function for intercepting and preventing progress on checkout. - To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#block-progress) capability in your extension's configuration. - If you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension. - \`useBuyerJourneyIntercept()\` should be called at the top level of the extension, not within an embedded or child component, to avoid errors should the child component get destroyed. - It is good practice to show a warning in the checkout editor when the merchant has not given permission for your extension to block checkout progress. - `, - type: 'UseBuyerJourneyInterceptGeneratedType', - }, - { - title: 'useBuyerJourneySteps', - description: ` - Returns all possible steps a buyer can take to complete the checkout. These steps may vary depending on the type of checkout or the shop's configuration. - `, - type: 'UseBuyerJourneyStepsGeneratedType', - }, - { - title: 'useBuyerJourneyActiveStep', - description: ` - Returns the buyer journey step that the buyer is currently on. - `, - type: 'UseBuyerJourneyActiveStepGeneratedType', - }, - ], - defaultExample: getExample('buyer-journey-intercept/target-native-field', [ - 'jsx', - ]), - examples: { - description: - 'In addition to targeting checkout UI fields, you can also pass errors to the page level or render the error in your extension.', - examples: [ - getExample('buyer-journey-intercept/page-level-error', ['jsx']), - getExample('buyer-journey-intercept/extension-banner', ['jsx']), - ], - }, - related: [ - { - subtitle: 'Tutorial', - name: 'Validating fields at checkout', - url: '/docs/apps/checkout/validation/fields', - type: 'tutorial', - }, - ...getLinksByTag('apis'), - ], -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/cart-instructions.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/cart-instructions.doc.ts deleted file mode 100644 index 2e8f67f1c2..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/cart-instructions.doc.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - STANDARD_API_PROPERTIES_DESCRIPTION, - getLinksByTag, - getExample, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Cart Instructions API', - description: 'Instructions used to create the checkout.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_CartInstructionsApi', - }, - { - title: 'useInstructions', - description: - 'Returns the cart instructions used to create the checkout and possibly limit extension capabilities.', - type: 'UseInstructionsGeneratedType', - }, - ], - defaultExample: getExample('cart-instructions/discounts', ['jsx']), - examples: { - description: - 'Use the cart instructions API to determine if the affected APIs are available in checkout.', - examples: [ - getExample('cart-instructions/attributes', ['jsx']), - getExample('cart-instructions/delivery', ['jsx']), - getExample('cart-instructions/discounts', ['jsx']), - getExample('cart-instructions/cart-lines-add', ['jsx']), - getExample('cart-instructions/metafields', ['jsx']), - getExample('cart-instructions/notes', ['jsx']), - ], - }, - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/cart-lines.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/cart-lines.doc.ts deleted file mode 100644 index 8c4186036d..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/cart-lines.doc.ts +++ /dev/null @@ -1,63 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - STANDARD_API_PROPERTIES_DESCRIPTION, - CHECKOUT_API_PROPERTIES_DESCRIPTION, - getLinksByTag, - getExample, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Cart Lines API', - description: 'The API for interacting with the cart lines.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_CartLinesApi', - }, - { - title: 'useCartLines', - description: - 'Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated.', - type: 'UseCartLinesGeneratedType', - }, - { - title: 'CheckoutApi', - description: CHECKOUT_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Checkout_CartLinesApi', - }, - { - title: 'useApplyCartLinesChange', - description: - 'Returns a function to mutate the `lines` property of checkout.', - type: 'UseApplyCartLinesChangeGeneratedType', - }, - { - title: 'CartLineItemApi', - description: - 'The API object provided to `cart-line-item` extension targets.', - type: 'Docs_CartLineItem_CartLinesApi', - }, - { - title: 'useTarget', - description: - 'Returns the cart line the extension is attached to. This hook can only be used by `cart-line-item` extension targets. Until version `2023-04`, this hook returned a `PresentmentCartLine object`.', - type: 'UseTargetGeneratedType', - }, - { - title: 'useCartLineTarget', - description: - 'Returns the cart line the extension is attached to. This hook can only be used by `cart-line-item` extension targets', - type: 'UseCartLineTargetGeneratedType', - }, - ], - defaultExample: getExample('cart-line-item/default', ['jsx']), - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/checkout-token.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/checkout-token.doc.ts deleted file mode 100644 index b5d7d260b7..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/checkout-token.doc.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Checkout Token API', - description: 'The API for interacting with the token of a checkout.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_CheckoutTokenApi', - }, - { - title: 'useCheckoutToken', - description: 'Returns a stable id that represents the current checkout.', - type: 'UseCheckoutTokenGeneratedType', - }, - ], - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/cost.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/cost.doc.ts deleted file mode 100644 index 19ec36bd62..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/cost.doc.ts +++ /dev/null @@ -1,49 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Cost API', - description: 'The API for interacting with the cost of a checkout.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_CostApi', - }, - { - title: 'useSubtotalAmount', - description: - 'A `Money` value representing the subtotal value of the items in the cart at the current step of checkout.', - type: 'UseSubtotalAmountGeneratedType', - }, - { - title: 'useTotoalShippingAmount', - description: - 'Returns a `Money` value representing the total shipping a buyer can expect to pay at the current step of checkout. This value includes shipping discounts. Returns undefined if shipping has not been negotiated yet, such as on the information step.', - type: 'UseTotalShippingAmountGeneratedType', - }, - { - title: 'useTotalTaxAmount', - description: - 'Returns a `Money` value representing the total tax a buyer can expect to pay at the current step of checkout or the total tax included in product and shipping prices. Returns undefined if taxes are unavailable.', - type: 'UseTotalTaxAmountGeneratedType', - }, - { - title: 'useTotalAmount', - description: - 'Returns a `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated. Applied gift cards and store credit are excluded.', - type: 'UseTotalAmountGeneratedType', - }, - ], - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/customer-privacy.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/customer-privacy.doc.ts deleted file mode 100644 index 265a9db438..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/customer-privacy.doc.ts +++ /dev/null @@ -1,38 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, - REQUIRES_PROTECTED_CUSTOMER_DATA, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Customer Privacy API', - description: - "The API for interacting with a customer's privacy consent. It is similar to the [Customer Privacy API in storefront](/docs/api/customer-privacy).", - isVisualComponent: false, - requires: REQUIRES_PROTECTED_CUSTOMER_DATA, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - // replace with STANDARD_API_PROPERTIES_DESCRIPTION after Customer Privacy API has been added to customer accounts - description: - 'The base API object provided to `purchase` extension targets.', - type: 'Docs_Standard_CustomerPrivacyApi', - }, - { - title: 'useCustomerPrivacy', - description: - 'Returns the current customer privacy settings and metadata and re-renders your component if the customer privacy settings change.', - type: 'UseCustomerPrivacyGeneratedType', - }, - ], - defaultExample: getExample('customer-privacy/default', ['jsx']), - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/delivery.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/delivery.doc.ts deleted file mode 100644 index 69d60717a1..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/delivery.doc.ts +++ /dev/null @@ -1,119 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getLinksByTag, - getHookExample, - getExample, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Delivery API', - description: ` - The APIs for interacting with delivery and shipping options. - - > Tip: Not all extension targets implement all APIs. Check the documentation for the extension target you are using to see which APIs are available. - `, - overviewPreviewDescription: - 'The APIs for interacting with delivery and shipping options.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_DeliveryApi', - }, - { - title: 'useDeliveryGroup', - description: - 'Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes.', - type: 'UseDeliveryGroupGeneratedType', - }, - { - title: 'useDeliveryGroups', - description: - 'Returns the current delivery groups for the checkout, and automatically re-renders your component when delivery address or delivery option selection changes.', - type: 'UseDeliveryGroupsGeneratedType', - }, - { - title: 'Shipping Option', - description: - 'This API object is provided to extensions registered for the `purchase.checkout.shipping-option-item.render-after` and `purchase.checkout.shipping-option-item.details.render` extension targets.', - type: 'ShippingOptionItemApi', - }, - { - title: 'useShippingOptionTarget', - description: - 'Returns the shipping option for the `purchase.checkout.shipping-option-item.render-after` and `purchase.checkout.shipping-option-item.details.render` attached extensions.', - type: 'UseShippingOptionTargetGeneratedType', - }, - { - title: 'ShippingOptionListApi', - description: - 'This API object is provided to extensions registered for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` extension targets.', - type: 'ShippingOptionListApi', - }, - { - title: 'useDeliveryGroupTarget', - description: - 'Returns the delivery group for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` attached extensions. This is deprecated, use `useDeliveryGroupListTarget()` instead.', - type: 'UseDeliveryGroupTargetGeneratedType', - }, - { - title: 'useDeliveryGroupListTarget', - description: - 'Returns the delivery group list for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` attached extensions.', - type: 'UseDeliveryGroupListTargetGeneratedType', - }, - { - title: 'useDeliverySelectionGroups', - description: - 'Returns the delivery selection groups for the `purchase.checkout.shipping-option-list.render-before` and `purchase.checkout.shipping-option-list.render-after` attached extensions.', - type: 'UseDeliverySelectionGroupsGeneratedType', - }, - { - title: 'PickupPointListApi', - description: - 'This API object is provided to extensions registered for the `purchase.checkout.pickup-point-list.render-after` and `purchase.checkout.pickup-point-list.render-after` extension target.', - type: 'PickupPointListApi', - }, - { - title: 'PickupLocationListApi', - description: - 'This API object is provided to extensions registered for the `purchase.checkout.pickup-location-list.render-after` and `purchase.checkout.pickup-location-list.render-after` extension target.', - type: 'PickupLocationListApi', - }, - { - title: 'PickupLocationItemApi', - description: - 'The API object provided to the `purchase.checkout.pickup-location-option-item.render-after` extension target.', - type: 'PickupLocationItemApi', - }, - { - title: 'usePickupLocationOptionTarget', - description: - 'Returns the pickup location option for `purchase.checkout.pickup-location-option-item.render-after` attached extensions.', - type: 'UsePickupLocationOptionTargetGeneratedType', - }, - ], - defaultExample: getHookExample('delivery-group'), - examples: { - description: - 'Learn how to use the API with JavaScript (JS) and React. See [React Hooks](../react-hooks) for all available hooks.', - examples: [ - getExample('shipping-option-item/default', ['jsx']), - getExample( - 'purchase.checkout.pickup-location-option-item.render-after/default', - ['jsx'], - ), - getExample('pickup-point-list/default', ['jsx']), - getHookExample('delivery-groups'), - ], - }, - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/discounts.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/discounts.doc.ts deleted file mode 100644 index aead1ea837..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/discounts.doc.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - CHECKOUT_API_PROPERTIES_DESCRIPTION, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Discounts API', - description: 'The API for interacting with discounts.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_DiscountsApi', - }, - { - title: 'CheckoutApi', - description: CHECKOUT_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Checkout_DiscountsApi', - }, - { - title: 'useApplyDiscountCodeChange', - description: 'Returns a function to add or remove discount codes.', - type: 'UseApplyDiscountCodeChangeGeneratedType', - }, - { - title: 'useDiscountAllocations', - description: - 'Returns the current discount allocations applied to the cart.', - type: 'UseDiscountAllocationsGeneratedType', - }, - { - title: 'useDiscountCodes', - description: 'Returns the current discount codes applied to the cart.', - type: 'UseDiscountCodesGeneratedType', - }, - ], - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/extension-meta.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/extension-meta.doc.ts deleted file mode 100644 index 00187fff95..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/extension-meta.doc.ts +++ /dev/null @@ -1,52 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Extension API', - description: 'The API for interacting with the metadata of an extension.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Platform APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_ExtensionMetaApi', - }, - { - title: 'useExtension', - description: 'Returns the metadata about the extension.', - type: 'UseExtensionGeneratedType', - }, - { - title: 'useExtensionData', - description: `Returns the metadata about the extension. This is deprecated, use \`useExtension()\` instead.`, - type: 'UseExtensionDataGeneratedType', - }, - { - title: 'useExtensionCapabilities', - description: "Returns a list of an extension's granted capabilities.", - type: 'UseExtensionCapabilitiesGeneratedType', - }, - { - title: 'useExtensionCapability', - description: - 'Returns whether or not a given capability of an extension is granted.', - type: 'UseExtensionCapabilityGeneratedType', - }, - { - title: 'useExtensionEditor', - description: - 'Returns information about the editor where the extension is being rendered.', - type: 'UseExtensionEditorGeneratedType', - }, - ], - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/gift-cards.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/gift-cards.doc.ts deleted file mode 100644 index 778671d4e6..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/gift-cards.doc.ts +++ /dev/null @@ -1,41 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - CHECKOUT_API_PROPERTIES_DESCRIPTION, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Gift Cards API', - description: 'The API for interacting with gift cards.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_GiftCardsApi', - }, - { - title: 'CheckoutApi', - description: CHECKOUT_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Checkout_GiftCardsApi', - }, - { - title: 'useAppliedGiftCards', - description: 'Returns the current gift cards applied to the cart.', - type: 'UseAppliedGiftCardsGeneratedType', - }, - { - title: 'useApplyGiftCardChange', - description: 'Returns a function to add or remove gift cards.', - type: 'UseApplyGiftCardChangeGeneratedType', - }, - ], - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/localization.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/localization.doc.ts deleted file mode 100644 index ad9b689254..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/localization.doc.ts +++ /dev/null @@ -1,72 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Localization API', - description: 'The APIs for localizing your extension.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Platform APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_LocalizationApi', - }, - { - title: 'useCurrency', - description: 'Returns the currency of the checkout.', - type: 'UseCurrencyGeneratedType', - }, - { - title: 'useExtensionLanguage', - description: - "Returns the buyer's language, as supported by the extension.", - type: 'UseExtensionLanguageGeneratedType', - }, - { - title: 'useLanguage', - description: - 'Returns the current language of the checkout, and automatically re-renders your component if the language changes.', - type: 'UseLanguageGeneratedType', - }, - { - title: 'useLocalizationCountry', - description: - 'Returns the country of the checkout, and automatically re-renders your component if the country changes.', - type: 'UseLocalizationCountryGeneratedType', - }, - { - title: 'useLocalizationMarket', - description: - 'Returns the market of the checkout, and automatically re-renders your component if it changes.', - type: 'UseLocalizationMarketGeneratedType', - }, - { - title: 'useTimezone', - description: - 'Returns the time zone of the checkout, and automatically re-renders your component if the time zone changes.', - type: 'UseTimezoneGeneratedType', - }, - { - title: 'useTranslate', - description: - 'Returns the `I18nTranslate` interface used to translate strings.', - type: 'UseTranslateGeneratedType', - }, - ], - defaultExample: getExample('translate', ['jsx']), - examples: { - description: '', - examples: [getExample('translate-pluralization', ['jsx'])], - }, - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/localized-fields.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/localized-fields.doc.ts deleted file mode 100644 index fb512922d0..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/localized-fields.doc.ts +++ /dev/null @@ -1,41 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, - REQUIRES_PROTECTED_CUSTOMER_DATA, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Localized Fields API', - description: 'The API for interacting with localized fields.', - isVisualComponent: false, - requires: REQUIRES_PROTECTED_CUSTOMER_DATA, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_LocalizedFieldsApi', - }, - { - title: 'useLocalizedFields', - description: - 'Returns the current localized fields and re-renders your component if the values change.', - type: 'UseLocalizedFieldsGeneratedType', - }, - { - title: 'useLocalizedField', - description: - 'Returns the requested localized field and re-renders your component if the value changes.', - type: 'UseLocalizedFieldGeneratedType', - }, - ], - defaultExample: getExample('localized-fields/default', ['jsx']), - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/metafields.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/metafields.doc.ts deleted file mode 100644 index 77ec896bcb..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/metafields.doc.ts +++ /dev/null @@ -1,47 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getLinksByTag, - REQUIRES_PROTECTED_CUSTOMER_DATA, - STANDARD_API_PROPERTIES_DESCRIPTION, - CHECKOUT_API_PROPERTIES_DESCRIPTION, - getExample, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Metafields API', - description: 'The API for interacting with metafields.', - isVisualComponent: false, - requires: REQUIRES_PROTECTED_CUSTOMER_DATA, - category: 'Target APIs', - subCategory: 'Platform APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_MetafieldsApi', - }, - { - title: 'useAppMetafields', - description: - 'Returns the metafields configured with `shopify.extension.toml`.', - type: 'UseAppMetafieldsGeneratedType', - }, - { - title: 'CheckoutApi', - description: CHECKOUT_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Checkout_MetafieldsApi', - }, - { - title: 'useApplyMetafieldsChange', - description: - 'Returns a function to mutate the `metafields` property of the checkout.', - type: 'UseApplyMetafieldsChangeGeneratedType', - }, - ], - defaultExample: getExample('metafields/default', ['jsx', 'toml']), - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/note.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/note.doc.ts deleted file mode 100644 index 1f2af6f39f..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/note.doc.ts +++ /dev/null @@ -1,42 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - CHECKOUT_API_PROPERTIES_DESCRIPTION, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Note API', - description: 'The API for interacting with the note applied to checkout.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_NoteApi', - }, - { - title: 'useNote', - description: 'Returns the proposed `note` applied to the checkout.', - type: 'UseNoteGeneratedType', - }, - { - title: 'CheckoutApi', - description: CHECKOUT_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Checkout_NoteApi', - }, - { - title: 'useApplyNoteChange', - description: - 'Returns a function to mutate the `note` property of the checkout.', - type: 'UseApplyNoteChangeGeneratedType', - }, - ], - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/order.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/order.doc.ts deleted file mode 100644 index 03d95ba829..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/order.doc.ts +++ /dev/null @@ -1,42 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getLinksByTag, - ORDER_CONFIRMATION_API_PROPERTIES_DESCRIPTION, - getExample, - ORDER_STATUS_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -// added temporarily to keep a note that the order status api docs have been moved to customer accounts -// can be removed from 2025-01 on -// An empty interface means any no-nullish value including values like strings. -// That seems incorrect, but the lint rule was added after this interface and -// I don't want to touch this public API. - -interface OrderStatusApiEmpty {} - -const data: ReferenceEntityTemplateSchema = { - name: 'Order API', - description: - 'The API for interacting with the order confirmation, available on the **Thank You** page.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - defaultExample: getExample('order-confirmation/default', ['jsx']), - definitions: [ - { - title: 'OrderConfirmationApi', - description: ORDER_CONFIRMATION_API_PROPERTIES_DESCRIPTION, - type: 'OrderConfirmationApi', - }, - { - title: 'OrderStatusApi', - description: ORDER_STATUS_API_PROPERTIES_DESCRIPTION, - type: 'OrderStatusApiEmpty', - }, - ], - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/payment-options.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/payment-options.doc.ts deleted file mode 100644 index 76ea061338..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/payment-options.doc.ts +++ /dev/null @@ -1,41 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getHookExample, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Payments API', - description: 'The API for interacting with the payment options.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Checkout APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_PaymentOptionsApi', - }, - { - title: 'useAvailablePaymentOptions', - description: 'Returns all available payment options.', - type: 'UseAvailablePaymentOptionsGeneratedType', - }, - { - title: 'useSelectedPaymentOptions', - description: 'Returns payment options selected by the buyer.', - type: 'UseSelectedPaymentOptionsGeneratedType', - }, - ], - related: getLinksByTag('apis'), - defaultExample: getHookExample('payments/use-available-payment-options'), - examples: { - description: '', - examples: [getHookExample('payments/use-selected-payment-options')], - }, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/query.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/query.doc.ts deleted file mode 100644 index a873ed768f..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/query.doc.ts +++ /dev/null @@ -1,31 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Storefront API', - description: 'Querying the Storefront API.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Platform APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_QueryApi', - }, - ], - defaultExample: getExample('storefront-query-api', ['jsx']), - examples: { - description: '', - examples: [getExample('storefront-query-with-fetch', ['jsx'])], - }, - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/session-token.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/session-token.doc.ts deleted file mode 100644 index 68cdfed1d1..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/session-token.doc.ts +++ /dev/null @@ -1,36 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Session Token API', - description: 'The API for interacting with session tokens.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Platform APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_SessionTokenApi', - }, - { - title: 'useSessionToken', - description: 'Returns a the session token API object.', - type: 'UseSessionTokenGeneratedType', - }, - ], - defaultExample: getExample('session-token', ['jsx']), - examples: { - description: '', - examples: [getExample('session-token-jwt', ['jsx'])], - }, - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/settings.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/settings.doc.ts deleted file mode 100644 index bd4fc6ec5d..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/settings.doc.ts +++ /dev/null @@ -1,37 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Settings API', - description: 'The API for interacting with merchant settings.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Platform APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_SettingsApi', - }, - { - title: 'useSettings', - description: - 'Returns the setting values defined by the merchant for the extension.', - type: 'UseSettingsGeneratedType', - }, - ], - defaultExample: getExample('settings-access', ['jsx']), - examples: { - description: '', - examples: [getExample('settings', ['jsx'])], - }, - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/shop.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/shop.doc.ts deleted file mode 100644 index 987c926d69..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/shop.doc.ts +++ /dev/null @@ -1,30 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Shop API', - description: 'The API for interacting with shop.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Platform APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_ShopApi', - }, - { - title: 'useShop', - description: 'Returns the `shop` where the checkout is taking place.', - type: 'UseShopGeneratedType', - }, - ], - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/storage.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/apis/storage.doc.ts deleted file mode 100644 index 6197e0f716..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/apis/storage.doc.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - STANDARD_API_PROPERTIES_DESCRIPTION, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'Storage API', - description: 'The API for interacting with local storage.', - isVisualComponent: false, - category: 'Target APIs', - subCategory: 'Platform APIs', - type: 'API', - definitions: [ - { - title: 'StandardApi', - description: STANDARD_API_PROPERTIES_DESCRIPTION, - type: 'Docs_Standard_StorageApi', - }, - { - title: 'useStorage', - description: - 'Returns the key-value `Storage` interface for the extension target.', - type: 'UseStorageGeneratedType', - }, - ], - defaultExample: getExample('storage', ['jsx']), - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/hooks/api.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/hooks/api.doc.ts deleted file mode 100644 index e009db28d4..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/hooks/api.doc.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getHookExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'useApi()', - description: '', - descriptionType: 'UseApiGeneratedType', - isVisualComponent: false, - type: 'React Hook', - category: 'APIs', - // subCategory: 'Utilities', - definitions: [ - { - title: '', - description: '', - type: 'UseApiGeneratedType', - }, - ], - defaultExample: getHookExample('api'), - related: getLinksByTag('apis', 'UseApiGeneratedType'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/hooks/extension-api.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/hooks/extension-api.doc.ts deleted file mode 100644 index 5316e0198c..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/hooks/extension-api.doc.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getHookExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'useExtensionApi()', - description: '', - descriptionType: 'UseExtensionApiGeneratedType', - isVisualComponent: false, - type: 'React Hook', - category: 'APIs', - // subCategory: 'Utilities', - definitions: [ - { - title: '', - description: '', - type: 'UseExtensionApiGeneratedType', - }, - ], - defaultExample: getHookExample('extension-api'), - related: getLinksByTag('apis', 'UseExtensionApiGeneratedType'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/hooks/subscription.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/hooks/subscription.doc.ts deleted file mode 100644 index cddd97a923..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/hooks/subscription.doc.ts +++ /dev/null @@ -1,24 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getHookExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'useSubscription()', - description: '', - descriptionType: 'UseSubscriptionGeneratedType', - isVisualComponent: false, - type: 'React Hook', - category: 'APIs', - // subCategory: 'Utilities', - definitions: [ - { - title: '', - description: '', - type: 'UseSubscriptionGeneratedType', - }, - ], - defaultExample: getHookExample('subscription'), - related: getLinksByTag('apis'), -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.address-autocomplete.format-suggestion.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.address-autocomplete.format-suggestion.doc.ts deleted file mode 100644 index 58a64d9aff..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.address-autocomplete.format-suggestion.doc.ts +++ /dev/null @@ -1,35 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - ADDRESS_AUTOCOMPLETE_FORMAT_SUGGESTION_API, - getExample, - getLinksByTag, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.address-autocomplete.format-suggestion', - description: ` - An extension target that formats the selected address suggestion provided by a [\`purchase.address-autocomplete.suggest\`](/docs/api/checkout-ui-extensions/latest/targets/address/purchase-address-autocomplete-suggest) target. This formatted address is used to auto-populate the fields of the address form. - - It must return a [\`formattedAddress\`](/docs/api/checkout-ui-extensions/latest/targets/address/purchase-address-autocomplete-format-suggestion#addressautocompleteformatsuggestionoutput-propertydetail-formattedaddress). - - > Caution: - > This extension target is only necessary if the corresponding [\`purchase.address-autocomplete.suggest\`](/docs/api/checkout-ui-extensions/latest/targets/address/purchase-address-autocomplete-suggest) target does not provide a \`formattedAddress\` for the suggestions. If a formatted address is provided with each suggestion, then this target will not be called. - > - > If the [\`purchase.address-autocomplete.suggest\`](/docs/api/checkout-ui-extensions/latest/targets/address/purchase-address-autocomplete-suggest) target is not implemented, then this target will not work. - - > Note: - > - This target does not support rendering UI components. - > - This extension can only be developed as a JavaScript extension using the \`ui-extensions\` library. - > - The [app extension configuration](/docs/apps/app-extensions/configuration) \`shopify.extension.toml\` file is shared between this extension target and [\`purchase.address-autocomplete.suggest\`](/docs/api/checkout-ui-extensions/latest/targets/address/purchase-address-autocomplete-suggest). This includes extension settings specified in the configuration file. - `, - subCategory: 'Address', - defaultExample: getExample( - 'purchase.address-autocomplete.format-suggestion/default', - ['js'], - ), - related: getLinksByTag('targets', 'Tutorials'), - ...ADDRESS_AUTOCOMPLETE_FORMAT_SUGGESTION_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.address-autocomplete.suggest.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.address-autocomplete.suggest.doc.ts deleted file mode 100644 index 0e9a23ac38..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.address-autocomplete.suggest.doc.ts +++ /dev/null @@ -1,33 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - ADDRESS_AUTOCOMPLETE_SUGGEST_API, - getExample, - getLinksByTag, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.address-autocomplete.suggest', - description: ` - An extension target that provides address autocomplete suggestions for address forms at checkout. Suggestions are presented to customers for delivery, billing, and pickup point addresses. - - The extension target must return a list of address [\`suggestions\`](/docs/api/checkout-ui-extensions/latest/targets/address/purchase-address-autocomplete-suggest#addressautocompletesuggestoutput-propertydetail-suggestions). - - If a formatted address is provided with each suggestion, then it will be used to auto-populate the fields in the address form when the customer selects a suggested address. - - Optionally, you can implement the [\`purchase.address-autocomplete.format-suggestion\`](/docs/api/checkout-ui-extensions/latest/targets/address/purchase-address-autocomplete-format-suggestion) extension target to format an address based on the address suggestion selected by the customer. - - > Note: - > - This target does not support rendering UI components. - > - This extension can only be developed as a JavaScript extension using the \`ui-extensions\` library. - > - The [app extension configuration](/docs/apps/app-extensions/configuration) \`shopify.extension.toml\` file is shared between this extension target and [\`purchase.address-autocomplete.format-suggestion\`](/docs/api/checkout-ui-extensions/latest/targets/address/purchase-address-autocomplete-format-suggestion). This includes extension settings specified in the configuration file. - `, - subCategory: 'Address', - defaultExample: getExample('purchase.address-autocomplete.suggest/default', [ - 'js', - ]), - related: getLinksByTag('targets', 'Tutorials'), - ...ADDRESS_AUTOCOMPLETE_SUGGEST_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.actions.render-before.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.actions.render-before.doc.ts deleted file mode 100644 index 8a6a3c6866..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.actions.render-before.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.actions.render-before', - description: - 'A static extension target that is rendered immediately before any actions within each step.', - subCategory: 'Navigation', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.block.render.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.block.render.doc.ts deleted file mode 100644 index ff20a429b3..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.block.render.doc.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.block.render', - description: `A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). - - The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).`, - subCategory: 'Block', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.cart-line-item.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.cart-line-item.render-after.doc.ts deleted file mode 100644 index 0200f70ee5..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.cart-line-item.render-after.doc.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - CHECKOUT_CART_LINE_ITEM_API, - getExample, - getLinksByTag, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.cart-line-item.render-after', - description: `A static extension target that renders on every line item, inside the details under the line item properties element. - - > Caution: - > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice. - `, - defaultExample: getExample('cart-line-item/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_CART_LINE_ITEM_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.cart-line-list.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.cart-line-list.render-after.doc.ts deleted file mode 100644 index de326eba67..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.cart-line-list.render-after.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.cart-line-list.render-after', - description: - 'A static extension target that is rendered after all line items.', - subCategory: 'Order Summary', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.contact.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.contact.render-after.doc.ts deleted file mode 100644 index db02e714c5..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.contact.render-after.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.contact.render-after', - description: - 'A static extension target that is rendered immediately after the contact form element.', - subCategory: 'Information', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.delivery-address.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.delivery-address.render-after.doc.ts deleted file mode 100644 index 78a77a4150..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.delivery-address.render-after.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.delivery-address.render-after', - description: - 'A static extension target that is rendered after the shipping address form elements.', - subCategory: 'Shipping', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.delivery-address.render-before.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.delivery-address.render-before.doc.ts deleted file mode 100644 index 1ccb032e90..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.delivery-address.render-before.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.delivery-address.render-before', - description: - 'A static extension target that is rendered between the shipping address header and shipping address form elements.', - subCategory: 'Shipping', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.footer.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.footer.render-after.doc.ts deleted file mode 100644 index b5447646ee..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.footer.render-after.doc.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.footer.render-after', - description: `A static extension target that is rendered below the footer. - - > Tip: - > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. - > See: [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/components/structure/blockspacer). - `, - defaultExample: getExample('generic', ['jsx']), - subCategory: 'Footer', - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.header.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.header.render-after.doc.ts deleted file mode 100644 index 07fe4b4e2c..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.header.render-after.doc.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.header.render-after', - description: `A static extension target that is rendered below the header. - - > Tip: - > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. - > See: [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/components/structure/blockspacer). - `, - defaultExample: getExample('generic', ['jsx']), - subCategory: 'Header', - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.payment-method-list.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.payment-method-list.render-after.doc.ts deleted file mode 100644 index 6b10153b41..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.payment-method-list.render-after.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.payment-method-list.render-after', - description: - 'A static extension target that renders below the list of payment methods.', - subCategory: 'Payments', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.payment-method-list.render-before.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.payment-method-list.render-before.doc.ts deleted file mode 100644 index 1604467b4a..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.payment-method-list.render-before.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {CHECKOUT_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.payment-method-list.render-before', - description: - 'A static extension target that renders between the payment heading and payment method list.', - subCategory: 'Payments', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-list.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-list.render-after.doc.ts deleted file mode 100644 index 1e83cfeee0..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-list.render-after.doc.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - PICKUP_LOCATION_LIST_API, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.pickup-location-list.render-after', - description: - 'A static extension target that is rendered after pickup location options.', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...PICKUP_LOCATION_LIST_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-list.render-before.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-list.render-before.doc.ts deleted file mode 100644 index 46acdc34ea..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-list.render-before.doc.ts +++ /dev/null @@ -1,18 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - PICKUP_LOCATION_LIST_API, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.pickup-location-list.render-before', - description: - 'A static extension target that is rendered before pickup location options.', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...PICKUP_LOCATION_LIST_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-option-item.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-option-item.render-after.doc.ts deleted file mode 100644 index e735e35280..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-location-option-item.render-after.doc.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - PICKUP_LOCATION_ITEM_API, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.pickup-location-option-item.render-after', - description: - 'A static extension target that is rendered after the pickup location details within the local pickup option list, for each option.', - defaultExample: getExample( - 'purchase.checkout.pickup-location-option-item.render-after/default', - ['jsx'], - ), - related: getLinksByTag('targets'), - ...PICKUP_LOCATION_ITEM_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-point-list.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-point-list.render-after.doc.ts deleted file mode 100644 index d03aa0e703..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-point-list.render-after.doc.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getExample, getLinksByTag, PICKUP_POINT_LIST_API} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.pickup-point-list.render-after', - description: - 'A static extension target that is rendered immediately after the pickup points.', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...PICKUP_POINT_LIST_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-point-list.render-before.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-point-list.render-before.doc.ts deleted file mode 100644 index b4889b9527..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.pickup-point-list.render-before.doc.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getExample, getLinksByTag, PICKUP_POINT_LIST_API} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.pickup-point-list.render-before', - description: - 'A static extension target that is rendered immediately before the pickup points.', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...PICKUP_POINT_LIST_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.reductions.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.reductions.render-after.doc.ts deleted file mode 100644 index 1d6bbf4232..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.reductions.render-after.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getExample, getLinksByTag, CHECKOUT_API} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.reductions.render-after', - description: - 'A static extension target that is rendered in the order summary, after the discount form and discount tag elements.', - subCategory: 'Order Summary', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.reductions.render-before.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.reductions.render-before.doc.ts deleted file mode 100644 index 2f353d1fbe..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.reductions.render-before.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getExample, getLinksByTag, CHECKOUT_API} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.reductions.render-before', - description: - 'A static extension target that is rendered in the order summary, before the discount form element.', - subCategory: 'Order Summary', - defaultExample: getExample('checkout/default', ['jsx']), - related: getLinksByTag('targets'), - ...CHECKOUT_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-item.details.render.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-item.details.render.doc.ts deleted file mode 100644 index 945006d534..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-item.details.render.doc.ts +++ /dev/null @@ -1,26 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - SHIPPING_OPTION_ITEM_API, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.shipping-option-item.details.render', - description: ` -A static extension target that is rendered under the shipping method within the shipping method option list, for each option. - -> Note: -> - In split shipping scenarios, this target is duplicated for each delivery group (shipment), and its value is the selected shipping option for the delivery group. -> - If you are collecting information in this target, you should consider that it needs to be scoped to a specific delivery group in split shipping scenarios. Alternatively, you can move your extension to \`purchase.checkout.shipping-option-list.render-before\` or \`purchase.checkout.shipping-option-list.render-after\`, which are not duplicated for each delivery group. -`, - defaultExample: getExample( - 'purchase.checkout.shipping-option-item.details.render/default', - ['jsx'], - ), - related: getLinksByTag('targets'), - ...SHIPPING_OPTION_ITEM_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-item.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-item.render-after.doc.ts deleted file mode 100644 index 71bc81eaaf..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-item.render-after.doc.ts +++ /dev/null @@ -1,25 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - SHIPPING_OPTION_ITEM_API, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.shipping-option-item.render-after', - description: ` -A static extension target that is rendered after the shipping method details within the shipping method option list, for each option. - -> Note: -> In split shipping scenarios, this target will render within a Modal when \`renderMode.overlay\` is true. In this case, it is recommended to avoid using components that render an overlay such as Modals. -`, - defaultExample: getExample( - 'purchase.checkout.shipping-option-item.render-after/default', - ['jsx'], - ), - related: getLinksByTag('targets'), - ...SHIPPING_OPTION_ITEM_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-list.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-list.render-after.doc.ts deleted file mode 100644 index c27184c910..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-list.render-after.doc.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - SHIPPING_OPTION_LIST_API, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.shipping-option-list.render-after', - description: - 'A static extension target that is rendered after the shipping method options.', - defaultExample: getExample( - 'purchase.checkout.shipping-option-list.render-after/default', - ['jsx'], - ), - related: getLinksByTag('targets'), - ...SHIPPING_OPTION_LIST_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-list.render-before.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-list.render-before.doc.ts deleted file mode 100644 index 670094c9e7..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.checkout.shipping-option-list.render-before.doc.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - SHIPPING_OPTION_LIST_API, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.checkout.shipping-option-list.render-before', - description: - 'A static extension target that is rendered between the shipping method header and shipping method options.', - defaultExample: getExample( - 'purchase.checkout.shipping-option-list.render-before/default', - ['jsx'], - ), - related: getLinksByTag('targets'), - ...SHIPPING_OPTION_LIST_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.announcement.render.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.announcement.render.doc.ts deleted file mode 100644 index 4b073f6dcc..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.announcement.render.doc.ts +++ /dev/null @@ -1,17 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getExample, getLinksByTag, THANK_YOU_API} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.thank-you.announcement.render', - description: - 'A static extension target that is rendered on top of the **Thank you page** as a dismissable announcement.', - defaultExample: getExample('purchase.thank-you.announcement.render/default', [ - 'jsx', - ]), - subCategory: 'Announcement', - related: getLinksByTag('targets'), - ...THANK_YOU_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.block.render.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.block.render.doc.ts deleted file mode 100644 index 0d6e7b8d7d..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.block.render.doc.ts +++ /dev/null @@ -1,16 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getExample, getLinksByTag, THANK_YOU_API} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.thank-you.block.render', - description: `A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/docs/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). - - The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).`, - subCategory: 'Block', - defaultExample: getExample('generic', ['jsx']), - related: getLinksByTag('targets'), - ...THANK_YOU_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-item.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-item.render-after.doc.ts deleted file mode 100644 index 9d17218c87..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-item.render-after.doc.ts +++ /dev/null @@ -1,21 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import { - getExample, - getLinksByTag, - THANK_YOU_CART_LINE_ITEM_API, -} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.thank-you.cart-line-item.render-after', - description: `A static extension target that renders on every line item, inside the details under the line item properties element. - - > Caution: - > This extension target will not be rendered if the line item is a custom line item belonging to a draft order invoice. - `, - defaultExample: getExample('cart-line-item/default', ['jsx']), - related: getLinksByTag('targets'), - ...THANK_YOU_CART_LINE_ITEM_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-list.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-list.render-after.doc.ts deleted file mode 100644 index 1dfbc0ac7b..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.cart-line-list.render-after.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getExample, getLinksByTag, THANK_YOU_API} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.thank-you.cart-line-list.render-after', - description: - 'A static extension target that is rendered after all line items on the **Thank you** page.', - subCategory: 'Order Summary', - defaultExample: getExample('generic', ['jsx']), - related: getLinksByTag('targets'), - ...THANK_YOU_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.customer-information.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.customer-information.render-after.doc.ts deleted file mode 100644 index 92cd9f2851..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.customer-information.render-after.doc.ts +++ /dev/null @@ -1,15 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {getExample, getLinksByTag, THANK_YOU_API} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.thank-you.customer-information.render-after', - description: - 'A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.', - subCategory: 'Information', - defaultExample: getExample('generic', ['jsx']), - related: getLinksByTag('targets'), - ...THANK_YOU_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.footer.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.footer.render-after.doc.ts deleted file mode 100644 index 44737c8786..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.footer.render-after.doc.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {THANK_YOU_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.thank-you.footer.render-after', - description: `A static extension target that is rendered below the footer on the **Thank you** page. - - > Tip: - > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. - > See: [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/components/structure/blockspacer). - `, - defaultExample: getExample('generic', ['jsx']), - subCategory: 'Footer', - related: getLinksByTag('targets'), - ...THANK_YOU_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.header.render-after.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.header.render-after.doc.ts deleted file mode 100644 index 066d6b91bd..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/targets/purchase.thank-you.header.render-after.doc.ts +++ /dev/null @@ -1,19 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -import {THANK_YOU_API, getExample, getLinksByTag} from '../helper.docs'; - -const data: ReferenceEntityTemplateSchema = { - name: 'purchase.thank-you.header.render-after', - description: `A static extension target that is rendered below the header on the **Thank you** page. - - > Tip: - > To prevent layout shifting, avoid dynamic data fetching & rendering in this target. If you need to render dynamic content, consider reserving space for your content while it is loading. - > See: [Spinner](https://shopify.dev/docs/api/checkout-ui-extensions/components/feedback/spinner), [SkeletonText](https://shopify.dev/docs/api/checkout-ui-extensions/components/feedback/skeletontext), or [BlockSpacer](https://shopify.dev/docs/api/checkout-ui-extensions/components/structure/blockspacer). - `, - defaultExample: getExample('generic', ['jsx']), - subCategory: 'Header', - related: getLinksByTag('targets'), - ...THANK_YOU_API, -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/staticPages/configuration.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/staticPages/configuration.doc.ts deleted file mode 100644 index 96bddd2ace..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/staticPages/configuration.doc.ts +++ /dev/null @@ -1,512 +0,0 @@ -import type {LandingTemplateSchema} from '@shopify/generate-docs'; - -// Order of data shape mimics visual structure of page -// Anything in an array can have multiple objects - -const data: LandingTemplateSchema = { - title: 'Configuration', - description: ` -When you create a [checkout UI extension](/api/checkout-ui-extensions/), an [app extension configuration](/docs/apps/app-extensions/configuration) \`shopify.extension.toml\` file is automatically generated in your extension's directory. - -This guide describes [extension targeting](#targets), [capabilities](#capabilities), [metafields](#metafields), and the [settings](#settings-definition) you can configure in the app extension configuration. -`, - // The id for the page that is used for routing. If this documentation is for a primary landing page, confirm the id matches the reference name. - id: 'configuration', - sections: [ - { - type: 'Generic', - anchorLink: 'how-it-works', - title: 'How it works', - sectionContent: ` -You define properties for your checkout UI extension in the extension configuration file. The \`shopify.extension.toml\` file contains the extension's configuration, which includes the extension name, targets, metafields, capabilities, and settings. - -When an extension is published to Shopify, the contents of the settings file are pushed alongside the extension. -`, - codeblock: { - title: 'shopify.extension.toml', - tabs: [ - { - title: 'shopify.extension.toml', - code: './examples/configuration/extended.example.toml', - language: 'toml', - }, - ], - }, - sectionNotice: [ - { - title: 'Tip', - sectionContent: ` -You can configure more than one type of extension within a configuration file. -`, - type: 'info', - }, - ], - sectionCard: [ - { - name: 'App extension configuration', - subtitle: 'Learn more', - url: '/docs/apps/app-extensions/configuration', - type: 'gear', - }, - ], - }, - { - type: 'GenericAccordion', - anchorLink: 'targets', - title: 'Targets', - sectionContent: ` -[Targets](/docs/api/checkout-ui-extensions/extension-targets-overview) represent where your checkout UI extension will be injected. You may have one or many targets defined in your app extension configuration using the \`targeting\` field. - -Along with the \`target\`, Shopify needs to know which code to execute for it. You specify the path to your code file by using the \`module\` property. - - - `, - accordionContent: [ - { - title: 'Supporting a single extension target', - description: ` - Your code should have a default export if it only supports a single extension target. - `, - codeblock: { - title: 'Single extension target', - tabs: [ - { - title: 'shopify.extension.toml', - code: './examples/configuration/single-target.example.toml', - language: 'toml', - }, - ], - }, - }, - { - title: 'Supporting multiple extension targets', - description: ` - You can support multiple extension targets within a single configuration file. However, you must provide a separate file per extension target using the \`export default\` declaration. - `, - codeblock: { - title: 'Multiple extension targets', - tabs: [ - { - title: 'shopify.extension.toml', - code: './examples/configuration/multiple-targets.example.toml', - language: 'toml', - }, - ], - }, - }, - ], - }, - { - type: 'Generic', - anchorLink: 'capabilities', - title: 'Capabilities', - sectionContent: ` -Defines the [capabilities](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-extension) associated with your extension. -| Property | Description | -|---|---| -| [\`api_access\`](#api-access) | Allows your extension to query the Storefront API. -| [\`network_access\`](#network-access) | Allows your extension make external network calls. -| [\`block_progress\`](#block-progress) | States that your extension might block the buyer's progress. -| [\`collect_buyer_consent\`](#collect-buyer-consent) | Allows your extension to collect buyer consent for specific policies such as SMS marketing. -`, - codeblock: { - title: 'Capabilities', - tabs: [ - { - title: 'shopify.extension.toml', - code: './examples/configuration/capabilities.example.toml', - language: 'toml', - }, - ], - }, - }, - { - type: 'Generic', - anchorLink: 'api-access', - title: 'Storefront API access', - sectionContent: - 'The following section describes the use cases of the `api_access` capability and the [Storefront API](/api/storefront) access scopes.', - codeblock: { - title: 'Enable Storefront API access', - tabs: [ - { - title: 'shopify.extension.toml', - code: './examples/configuration/api-access.example.toml', - language: 'toml', - }, - ], - }, - sectionCard: [ - { - name: 'API access examples', - subtitle: 'See', - url: '/docs/api/checkout-ui-extensions/apis/storefront-api#examples', - type: 'blocks', - }, - ], - sectionSubContent: [ - { - title: 'When to use Storefront API access', - sectionContent: `API access is used when your extension needs to retrieve data from the [Storefront API](/api/storefront). For example, you may need to [fetch product data](/apps/checkout/product-offers/add-product-offer), check the product tags on an item in the cart, or convert a product's price to another currency. - -> Tip: -> Shopify handles the authentication for all API calls from an extension. -`, - }, - { - title: 'Methods for accessing the Storefront API', - sectionContent: `Enabling the \`api_access\` capability allows you to use the Standard API [\`query\`](/docs/api/checkout-ui-extensions/apis/storefront-api) method and the global \`fetch\` to retrieve data from the [Storefront API](/api/storefront) without manually managing token aquisition and refresh. - -\`query\` lets you request a single GraphQL response from the Storefront API. - -If you prefer to construct GraphQL requests yourself or you would like to use a full-featured GraphQL client such as Apollo or urql, our custom \`fetch\` global automatically appends the required access tokens. - -The GraphQL client of your choice shouldn’t use any DOM APIs, as they aren’t available in a checkout UI extension's Web Worker. - -> Note: Both \`query\` and \`fetch\` will work for calling the Storefront API with the \`api_access\` capability enabled. If you are using \`fetch\` to get data external to Shopify, refer to the [\`network_access\`](/api/checkout-ui-extensions/configuration#network-access) capability.`, - }, - { - title: 'Storefront API access scopes', - sectionContent: ` -Your extensions will have the following unauthenticated access scopes to the Storefront API: - -- unauthenticated_read_product_publications -- unauthenticated_read_collection_publications -- unauthenticated_read_product_listings -- unauthenticated_read_product_tags -- unauthenticated_read_selling_plans -- unauthenticated_read_collection_listings -- unauthenticated_read_metaobjects -`, - }, - { - title: 'Protocol Links', - sectionContent: ` -Protocol links are an easy way for Shopify to infer the type of request you are trying to make. If you would like to make a request to the [Storefront GraphQL API](/docs/api/storefront), you can use our [Storefront Protocol](/docs/api/checkout-ui-extensions/latest/apis/storefront-api#examples) to infer your Storefront URL and API version. - `, - }, - ], - }, - { - type: 'Generic', - anchorLink: 'network-access', - title: 'Network access', - sectionContent: ` -The following section describes use cases for requesting network access, alternatives to requesting network access, and steps for completing a request for network access. -> Caution: -> If your extension specifies the \`network_access\` capability, you must request access in order to publish your extension. -`, - codeblock: { - title: 'Enable network access', - tabs: [ - { - title: 'shopify.extension.toml', - code: './examples/configuration/network-access.example.toml', - language: 'toml', - }, - ], - }, - sectionSubContent: [ - { - title: 'When to request network access', - sectionContent: - "If you need to get data into checkout that you can't currently get from Shopify, then you should request network access. For example, you might need to fetch additional data to render loyalty points.", - }, - { - title: 'Alternatives to network access', - sectionContent: ` -Instead of fetching data with an external network call, consider retrieving the data from a metafield. Your app may be able to use the [Admin API](/docs/api/admin) to write [metafields](/api/admin-graphql/latest/objects/metafield) on the shop, product, or customer ahead of checkout. - -Retrieving data from [metafields](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-appmetafields) during checkout is faster since it won't introduce an external network call. This allows you to rely on Shopify for the uptime, scaling, and durability of the data storage. -`, - }, - { - title: 'Complete a request for network access', - sectionContent: ` -1. Go to your [Partner Dashboard](https://partners.shopify.com/current/apps). -2. Click the name of the app that you want to change. -3. Click **API access**. -4. Under **Allow network access in checkout UI extensions**, click **Allow network access** - - Your request is automatically approved and your app is immediately granted the approval scope that's required for your checkout UI extension to make external network calls. - -5. Add network_access = true to the [extensions.capabilities] section of your extension's configuration file.`, - }, - { - title: 'Required CORS headers', - sectionContent: ` -UI extensions run in a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API) but the exact origin they run on may change without notice. When receiving network requests from extensions, your server must support [cross-origin resource sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) for any origin by always returning this response header: - -Access-Control-Allow-Origin: * -`, - }, - { - title: 'Security considerations', - sectionContent: ` -When processing HTTP requests on your API server, you cannot guarantee that your own extension will have made every request. When responding with sensitive data, keep in mind that requests could originate from anywhere on the Internet. - -Your extension can pass a [session token](/docs/api/checkout-ui-extensions/latest/apis/session-token) to your API server but this only guarantees the integrity of its claims. It does not guarantee the request itself originated from Shopify. For example, your API server could trust the session token's \`sub\` claim (the customer ID) but it could not trust a \`?customer_id=\` query parameter. - -Consider a scenario where your extension retrieves a discount code from your API server and [applies it to the checkout](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-applydiscountcodechange). It would not be safe to expose an API endpoint named \`/get-discount-code\` if any buyer could make a direct HTTP request and obtain a discount code. -`, - }, - { - title: 'App Proxy', - sectionContent: ` -UI extensions can make fetch requests to [App Proxy](/docs/apps/online-store/app-proxies) URLs, but there are some differences and limitations related to the security context within which UI extensions run. - -UI extension requests made to the App Proxy will execute as CORS requests. See _Required CORS headers_ above for information about requirements related to CORS. - -UI extension requests made to the App Proxy will not assign the logged_in_customer_id query parameter. Instead use a [session token](/docs/api/checkout-ui-extensions/latest/apis/session-token) which provides the sub claim for the logged in customer. - -UI extension requests made to the App Proxy of password protected shops is not supported. Extension requests come from a web worker which does not share the same session as the parent window. - -The App Proxy doesn't handle all [HTTP request methods](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). Specifically, CONNECT and TRACE are unsupported. -`, - }, - ], - }, - { - type: 'Generic', - anchorLink: 'block-progress', - title: 'Block progress', - sectionContent: - "The following section describes blocking the buyer's progress through checkout, and how you can detect whether the merchant has allowed it.", - sectionCard: [ - { - name: 'Blocking examples', - subtitle: 'See', - url: '/docs/api/checkout-ui-extensions/apis/buyer-journey#examples', - type: 'blocks', - }, - ], - codeblock: { - title: 'Enable progress blocking', - tabs: [ - { - title: 'shopify.extension.toml', - code: './examples/configuration/block-progress.example.toml', - language: 'toml', - }, - ], - }, - sectionSubContent: [ - { - title: 'When to request blocking progress', - sectionContent: ` -If your extension relies on specific input then you might need to block the buyer's progress until they've provided all required information. You can do this with a [buyer journey](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-buyerjourney) intercept, by returning \`behavior: 'block'\`. - -For example, for some purchases you need to collect and verify a customer's age. For the order to be valid, you need to verify that an age is set and that it's greater than or equal to a minimum value. - -In order to block checkout progress, your extension must have the \`block_progress\` capability. -`, - }, - { - title: 'Granting the capability to block progress', - sectionContent: ` -Setting \`block_progress\` in the \`shopify.extension.toml\` file informs merchants that your extension blocks the buyer's progress for invalid orders. Merchants can allow or disallow this capability in the checkout editor. - -> Note: -> When running a local extension with the \`block_progress\` capability, it will be automatically granted. This simulates a scenario where the merchant has allowed the capability. -`, - }, - { - title: 'Detecting the ability to block progress', - sectionContent: ` -In your extension, look for \`block_progress\` in [extension.capabilities](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-extension) to see if the merchant has granted the blocking capability. - -If the merchant declined the permission for your app to block progress, the \`behavior: 'block'\` option in the [buyer journey](/docs/api/checkout-ui-extensions/apis/standardapi#properties-propertydetail-buyerjourney) intercept will be treated as \`behavior: 'allow'\`, and checkout will proceed as normal. - -When developing a local extension, you can remove the \`block_progress\` capability from your \`shopify.extension.toml\` file to simulate a merchant disallowing the capability. - -> Tip: -> We recommend having some UI to cover cases where you can't block checkout progress. For example, you might want to show a warning rather than block checkout progress when an order doesn't pass validation.`, - }, - ], - }, - { - type: 'Generic', - anchorLink: 'collect-buyer-consent', - title: 'Collect buyer consent', - sectionContent: - 'If your extension utilizes the [ConsentCheckbox](/docs/api/checkout-ui-extensions/components/forms/consentcheckbox) or [ConsentPhoneField](/docs/api/checkout-ui-extensions/components/forms/consentphonefield) components to render a customized UI for collecting buyer consent, you must first declare that capability in your configuration file.', - sectionSubContent: [ - { - title: 'SMS Marketing', - sectionContent: - "In order to collect buyer consent for SMS marketing, you'll need to specifically declare this intent using `sms_marketing = true` in your toml configuration. This corresponds to the `policy` prop for the `Consent` components.", - }, - { - title: 'Customer Privacy', - sectionContent: - "In order to collect customer privacy consent, you'll need to add `customer_privacy = true` in your toml configuration. This will let you use our [Customer Privacy API](/docs/api/checkout-ui-extensions/latest/apis/customer-privacy).", - }, - ], - codeblock: { - title: 'Collect buyer consent', - tabs: [ - { - title: 'shopify.extension.toml', - code: './examples/configuration/collect-buyer-consent.example.toml', - language: 'toml', - }, - ], - }, - }, - { - type: 'Generic', - anchorLink: 'metafields', - title: 'Metafields', - sectionContent: ` -Defines the [metafields](/docs/apps/custom-data/metafields) that are available to your extension. You retrieve these metafields in your extension by reading [\`appMetafields\`](/docs/api/checkout-ui-extensions/latest/apis/metafields#standardapi-propertydetail-appmetafields). - -Define the metafields your extension needs using \`[[extensions.metafields]]\` and \`[[extensions.targeting.metafields]]\`. - -You can use \`[[extensions.metafields]]\` for metafields that your extension always needs, while you can use \`[[extensions.targeting.metafields]]\` if you only want to fetch metafields when your extension is placed in a specific extension target. - -> Tip: -> You may write to \`cart\` metafields by using [\`applyMetafieldsChange\`](/docs/api/checkout-ui-extensions/apis/checkoutapi#properties-propertydetail-applymetafieldchange) with \`type: "updateCartMetafield"\`. - `, - sectionSubContent: [ - { - title: 'App owned metafields', - sectionContent: ` -[App owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) are supported. You can use app owned metafields when your app needs to control the data and visibility of the metafield. - -Your extension can access app owned metafields that are requested in its toml using the \`$app\` format. Your extension can only access app owned metafields that belong to its parent app. - -> Caution: -> When accessing app owned metafields, you must use the \`$app\` format. The fully qualified reserved namespace format such as \`app--{your-app-id}[--{optional-namespace}]\` is not supported. - `, - sectionCard: [ - { - name: 'App owned metafields', - subtitle: 'Learn more', - url: '/docs/apps/build/custom-data/ownership#reserved-prefixes', - type: 'tutorial', - }, - ], - }, - { - title: 'Supported resource metafield types', - sectionContent: ` -Supported resource metafield types include: - -| Resource | Description | -|---| --- | -| \`cart\` | The cart associated with the current checkout. | -| \`company\` | The company for B2B checkouts. | -| \`companyLocation\` | The company's location for B2B checkouts. | -| \`customer\` | The customer account that is interacting with the current checkout. | -| \`product\` | The products that the customer intends to purchase. | -| \`shop\` | The shop that is associated with the current checkout. | -| \`shopUser\` | The Shop App user that is associated with the current checkout if there is one. | -| \`variant\` | The product variants that the customer intends to purchase. | - -Other resource metafield types outside of the above list are not supported. - `, - }, - ], - codeblock: { - title: 'Metafields', - tabs: [ - { - title: 'Metafields', - code: './examples/configuration/metafields.example.toml', - language: 'toml', - }, - ], - }, - sectionCard: [ - { - name: 'useAppMetafields', - subtitle: 'Hook', - url: '/docs/api/checkout-ui-extensions/react-hooks/metafields/useappmetafields', - type: 'blocks', - }, - { - name: 'useApplyMetafieldsChange', - subtitle: 'Hook', - url: '/docs/api/checkout-ui-extensions/react-hooks/metafields/useapplymetafieldschange', - type: 'blocks', - }, - ], - }, - { - type: 'Markdown', - anchorLink: 'settings-definition', - title: 'Settings definition', - sectionContent: - "The settings for a checkout UI extension define a set of fields that the merchant can set a value for from the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). You can use validation options to apply additional constraints to the data that the setting can store, such as a minimum or maximum value. \n\n Each settings definition can include up to 20 settings. \n\n > Note: \n > All setting inputs are optional. You should code the extension so that it still works if the merchant hasn't set a value for the setting.", - sectionSubContent: [ - { - title: 'Properties', - sectionContent: - 'The following table describes the properties that you can use to define a setting:\n\n | Property | Required? | Description | Example |\n|---|---|---|---|\n| `key` | Yes | The key of the setting. When a merchant configures a value for this setting, the value will be exposed under this `key` when running your extension |
"banner_title"
|\n| `type` | Yes | The [type](#supported-setting-types) of setting. |
"single_line_text_field"
|\n| `name` | Yes | The name of the setting. `name` is displayed to the merchant in the checkout editor. |
"Banner title"
|\n| `description` | No | The description of the setting. `description` is displayed to the merchant in the checkout editor. |
"Enter a title for the banner."
|\n| `validations` | No | Constraints on the setting input that Shopify validates. |
validations: 
name = "max",
value = "25"
|', - }, - { - title: 'Supported setting types', - sectionContent: - 'The setting type determines the type of information that the setting can store. The setting types have built-in validation on the setting input. \n\n Settings can have the following types: \n\n| Type | Description | Example value |\n|---|---|---|\n| `boolean` | A true or false value. |
true
|\n| `date` | A date in ISO 8601 format without a presumed time zone. |
2022-02-02
|\n| `date_time` | A date and time in ISO 8601 format without a presumed time zone. |
2022-01-01T12:30:00
|\n| `single_line_text_field` | A single line string. |
Canada
|\n| `multi_line_text_field` | A multi-line string. |
Canada
United States
Brazil
Australia
|\n| `number_integer` | A whole number in the range of +/-9,007,199,254,740,991. |
10
|\n| `number_decimal` | A number with decimal places in the range of +/-9,999,999,999,999.999999999. |
10.4
|\n| `variant_reference` | A globally-unique identifier (GID) for a product variant. |
gid://shopify/ProductVariant/1
 |',
-        },
-        {
-          title: 'Validation options',
-          sectionContent:
-            'Each setting can include validation options. Validation options enable you to apply additional constraints to the data that a setting can store, such as a minimum or maximum value, or a regular expression. The setting\'s `type` determines the available validation options. \n\n You can include a validation option for a setting using the validation `name` and a corresponding `value`. The appropriate value depends on the setting type to which the validation applies.\n\n The following table outlines the available validation options with supported types for applying constraints to a setting:\n\n | Validation option | Description | Supported types | Example |\n|---|---|---|---|\n| Minimum length | The minimum length of a text value. | 
  • single_line_text_field
  • multi_line_text_field
|
[[extensions.settings.fields.validations]]
name = "min"
value = "8"
|\n| Maximum length | The maximum length of a text value. |
  • single_line_text_field
  • multi_line_text_field
|
[[extensions.settings.fields.validations]]
name = "max"
value = "25"
|\n| Regular expression | A regular expression. Shopify supports [RE2](https://github.com/google/re2/wiki/Syntax). |
  • single_line_text_field
  • multi_line_text_field
|
[[extensions.settings.fields.validations]]
name = "regex"
value = "(@)(.+)$"
|\n| Choices | A list of up to 128 predefined options that limits the values allowed for the metafield. | `single_line_text_field` |
[[extensions.settings.fields.validations]]
name = "choices"
value = "[\\\\"red\\\\", \\\\"green\\\\", \\\\"blue\\\\"]"
|\n| Minimum date | The minimum date in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format. | `date` |
[[extensions.settings.fields.validations]]
name = "min"
value = "2022-01-01"
|\n| Maximum date | The maximum date in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format. | `date` |
[[extensions.settings.fields.validations]]
name = "max"
value = "2022-03-03"
|\n| Minimum datetime | The minimum date and time in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format. | `date_time` |
[[extensions.settings.fields.validations]]
name = "min"
value = "2022-03-03T16:30:00"
|\n| Maximum datetime | The maximum date and time in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format. | `date_time` |
[[extensions.settings.fields.validations]]
name = "max"
value = "2022-03-03T17:30:00"
|\n| Minimum integer | The minimum integer number. | `number_integer` |
[[extensions.settings.fields.validations]]
name = "min"
value = "9"
|\n| Maximum integer | The maximum integer number. | `number_integer` |
[[extensions.settings.fields.validations]]
name = "max"
value = "15"
|\n| Minimum decimal | The minimum decimal number. | `number_decimal` |
[[extensions.settings.fields.validations]]
name = "min"
value = "0.5"
|\n| Maximum decimal | The maximum decimal number. | `number_decimal` |
[[extensions.settings.fields.validations]]
name = "max"
value = "1.99"
|\n| Maximum precision | The maximum number of decimal places to store for a decimal number. | `number_decimal` |
[[extensions.settings.fields.validations]]
name = "max_precision"
value = "2"
|', - }, - ], - }, - { - type: 'Generic', - anchorLink: 'example-settings-definition', - title: 'Example settings definition', - sectionContent: - 'The following example shows a settings definition that defines a setting named `banner_title` of type `single_line_text_field`. When the merchant sets a value for this setting from the checkout editor, Shopify validates that the provided value is between 5 and 20 characters in length \n\n Learn more about the settings api by completing our [custom banners example](/apps/checkout/custom-banners/add-custom-banner).', - sectionCard: [ - { - name: 'Settings example code', - subtitle: 'See', - url: '/docs/api/checkout-ui-extensions/apis/standardapi#example-settings', - type: 'blocks', - }, - ], - codeblock: { - title: 'Example settings', - tabs: [ - { - title: 'shopify.extension.toml', - code: './examples/configuration/settings.example.toml', - language: 'toml', - }, - ], - }, - }, - { - type: 'Generic', - anchorLink: 'preloads-definition', - title: 'Preloads definition', - sectionContent: ` -For specific targets, you must provide the URL of assets or pages loaded by UI components within its extension. This allows Shopify to preload them as early as possible and ensure a performant experience for buyers. Currently, the only supported property is \`chat\` for the [\`Chat\` component](/docs/api/checkout-ui-extensions/latest/components/overlays/chat). - -The \`chat\` property specifies the URL for the iframe used in this extension target. The URL can be absolute or relative. Relative URLs are resolved against the app URL defined in the app configuration. - -For example, - -* if the app URL is \`https://example.com\` and \`chat = "/my-chat-application"\`, the resolved URL will be \`https://example.com/my-chat-application\`. -* if \`chat = "https://my-chat-application.com"\`, the resolved URL will be \`https://my-chat-application.com\`. - `, - codeblock: { - title: 'Extension target preloads', - tabs: [ - { - title: 'shopify.extension.toml', - code: './examples/configuration/preloads.example.toml', - language: 'toml', - }, - ], - }, - }, - ], -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/staticPages/error-handling.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/staticPages/error-handling.doc.ts deleted file mode 100644 index efa4cb558b..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/staticPages/error-handling.doc.ts +++ /dev/null @@ -1,55 +0,0 @@ -import type {LandingTemplateSchema} from '@shopify/generate-docs'; - -const data: LandingTemplateSchema = { - title: 'Error handling', - description: - 'You can use standard web techniques to handle errors in [checkout UI extensions](/api/checkout-ui-extensions/) but you may need to account for how they run inside of a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API).', - id: 'error-handling', - sections: [ - { - type: 'Generic', - anchorLink: 'handling-any-error', - title: 'Handling any error', - sectionContent: - 'Add an `unhandledrejection` listener for promise rejections or an `error` listener for other exceptions like Javascript runtime errors or failures to load a resource.', - codeblock: { - title: 'Handling any error', - tabs: [ - { - code: './examples/error-handling/handling-any-error.example.ts', - language: 'ts', - }, - ], - }, - }, - { - type: 'Generic', - anchorLink: 'third-party-libraries', - title: 'Third party libraries', - sectionContent: ` -You can use error reporting libraries like [Sentry](https://sentry.io/). However, they might require extra configuration because UI extensions run inside of a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API). You should also consider using [source maps](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions#troubleshooting-with-source-maps) to help debug errors. - -> Tip: -> You must request [network access](/api/checkout-ui-extensions/configuration#network-access) to transmit errors to a third party service. -`, - }, - { - type: 'Generic', - anchorLink: 'sentry', - title: 'Sentry', - sectionContent: ` - Install and initialize Sentry following their [Browser JavaScript guide](https://docs.sentry.io/platforms/javascript/). We recommend disabling the default integrations to be sure it will run within a Web Worker. You'll need to add event listeners manually.`, - codeblock: { - title: 'Sentry', - tabs: [ - { - code: './examples/error-handling/sentry.example.tsx', - language: 'ts', - }, - ], - }, - }, - ], -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/staticPages/extension-overview.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/staticPages/extension-overview.doc.ts deleted file mode 100644 index 4f1fa2a6a8..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/staticPages/extension-overview.doc.ts +++ /dev/null @@ -1,202 +0,0 @@ -import type {LandingTemplateSchema} from '@shopify/generate-docs'; - -// Order of data shape mimics visual structure of page -// Anything in an array can have multiple objects - -const data: LandingTemplateSchema = { - // The title of the page. - title: 'Targets Overview', - // A short description of the page. Appears in the hero section below the title. - description: ` -A [target](/docs/apps/app-extensions/configuration#targets) represents where your checkout UI extension will appear. - -You register for targets in your [configuration file](/docs/api/checkout-ui-extensions/configuration), and you include a JavaScript function that will run at that location in checkout. - `, - // The id for the page that is used for routing. If this documentation is for a primary landing page, confirm id matches the reference name. - id: 'extension-targets-overview', - // Basic content for the page and Hero section. - sections: [ - { - type: 'GenericAccordion', - title: 'Checkout locations', - anchorLink: 'supported-locations', - sectionContent: - 'Checkout is where buyers go to purchase goods. Checkout consists of the information, shipping, and payment steps in addition to the order summary and Shop Pay. Learn more about building [custom functionality for checkout](/docs/api/checkout-ui-extensions).', - accordionContent: [ - { - title: 'Information', - description: ` -This is the first step in the checkout process where the buyer enters contact information and a delivery address. - -Review [all extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-information.png', - }, - { - title: 'Shipping', - description: ` -Point in checkout where the buyer selects a shipping method. - -Review [all extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-shipping.png', - }, - { - title: 'Payment', - description: ` -Point in checkout where the buyer enters their payment information. - -Review [all extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-payment.png', - }, - { - title: 'Order summary', - description: ` -Summary of the cart contents, discounts, and order totals. - -Review [all extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-order-summary.png', - }, - { - title: 'Shop Pay', - description: ` -Accelerated checkout where Shopify pre-fills buyer information using their Shop Pay account. - -Review [all extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-shop-pay.png', - }, - { - title: 'Split shipping', - description: ` -When multiple shipments are expected, a checkout will render split shipping options. - -Review [all extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-split-shipping.png', - }, - { - title: 'Local Pickup', - description: ` -Point in checkout where the buyer can select a store location to pick up their purchase. - -Review [all extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-local-pickup.png', - }, - { - title: 'Pickup Points', - description: ` -Point in checkout where the buyer can select a pickup point to have their purchase delivered to. - -Review [all extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-pickup-points.png', - }, - { - title: 'Overlays', - description: ` -Static extension targets that floats above the checkout. - -Review [all extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-chat.png', - }, - { - title: 'One-page checkout', - description: ` -All checkout pages (information, shipping, and payment) are combined into a single page with the order summary. - -Get started testing extensions on [one-page checkout](/docs/apps/checkout/best-practices/testing-ui-extensions#one-page-checkout). -`, - image: 'supported-locations-one-page-checkout.png', - }, - ], - }, - { - type: 'GenericAccordion', - title: 'Thank you locations', - anchorLink: 'supported-typ-locations', - sectionContent: - 'The **Thank you** page is shown to buyers immediately after a checkout is successfully submitted. Learn more about building for [the **Thank you** page](/docs/apps/checkout/thank-you-order-status).', - accordionContent: [ - { - title: 'Order details', - description: ` -Displays all order information to buyers. - -Review [all **Thank you** page extension targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-thank-you.png', - }, - { - title: 'Order summary', - description: ` -Summary of the cart contents, discounts, and order totals. - -Review [all **Thank you** page extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-order-summary-thank-you.png', - }, - { - title: 'Overlays', - description: ` -Static extension targets that floats above the Thank you page. - -Review [all **Thank you** page extensions targets](/docs/api/checkout-ui-extensions/targets). -`, - image: 'supported-locations-chat-thank-you.png', - }, - ], - }, - { - type: 'Generic', - // Anchor link for the section. - anchorLink: 'static-extension-targets', - // The title of the section. - title: 'Static extension targets', - // Content for the section. - image: 'static-extension-targets.png', - sectionContent: `Static extension targets render immediately before or after most core checkout features such as contact information, shipping methods, and order summary line items. Merchants use the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor) to activate and place the extension in the checkout experience. - \n\nWhen a core checkout feature isn't rendered, neither are the static extension targets tied to it. For example, shipping methods aren't shown when customers select the option for store pickup and the UI extensions that load before or after the shipping method aren't rendered. - \n\nChoose static extension targets when your content and functionality is closely related to a core checkout feature. An example is a shipping delay notice. - `, - sectionCard: [ - { - name: 'Extension targets', - subtitle: 'API reference', - url: '/docs/api/checkout-ui-extensions/targets', - type: 'blocks', - }, - ], - }, - { - type: 'Generic', - anchorLink: 'block-extension-targets', - title: 'Block extension targets', - sectionContent: `Block extension targets render between core checkout features. Merchants can use the [checkout and accounts editor](/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor) to place the extension in the [**checkout**](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations), [**Thank you**](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-typ-locations) pages. - \n\nBlock extensions are always rendered, regardless of what other checkout elements are present. For example, an extension placed above the shipping address will still render even for digital products which don't require a shipping address.\n\nChoose block extension targets when your content and functionality works independently of a core checkout feature. This is useful for custom content, like a field to capture order notes from the customer. - \n\nBlock extension targets always support multiple placements. Each placement has an associated placement reference that represents its location on the page. For example, the block extension target \`purchase.checkout.block.render\` supports fourteen placements. The placement references include \`INFORMATION1\`, \`DELIVERY1\`, \`PAYMENT1\`, and more. - \n\nYou can use placement references as URL parameters to [test block extensions](/docs/apps/build/checkout/test-checkout-ui-extensions#block-targets) in all supported placements on a page. You can also use placement references to [define the default placement](/docs/apps/build/app-extensions/configure-app-extensions#checkout-ui-extensions) of an extension for merchants.`, - image: 'block-extension-targets.png', - sectionCard: [ - { - name: 'Extension targets', - subtitle: 'API reference', - url: '/docs/api/checkout-ui-extensions/targets', - type: 'blocks', - }, - { - name: 'Placement references', - subtitle: 'Learn more', - url: '/docs/apps/build/checkout/test-checkout-ui-extensions#placement-references', - type: 'resource', - }, - ], - }, - ], -}; - -export default data; diff --git a/packages/ui-extensions/docs/surfaces/checkout/staticPages/overview.doc.ts b/packages/ui-extensions/docs/surfaces/checkout/staticPages/overview.doc.ts deleted file mode 100644 index 587f3587cf..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/staticPages/overview.doc.ts +++ /dev/null @@ -1,297 +0,0 @@ -import type {LandingTemplateSchema} from '@shopify/generate-docs'; - -const data: LandingTemplateSchema = { - title: 'Checkout UI extensions', - description: `Checkout UI extensions let app developers build custom functionality that merchants can install - at defined points in the checkout flow, including product information, shipping, payment, - order summary, and Shop Pay. - \n\n > Shopify Plus: \n>Checkout UI extensions for the information, shipping and payment step are available only to stores on a [Shopify Plus](https://www.shopify.com/plus) plan.`, - id: 'checkout-ui-extensions', - image: - '/assets/landing-pages/templated-apis/checkout-ui-extensions/checkout-ui.png', - darkImage: - '/assets/landing-pages/templated-apis/checkout-ui-extensions/checkout-ui-dark.png', - mobileImage: - '/assets/landing-pages/templated-apis/checkout-ui-extensions/checkout-ui-mobile.png', - mobileDarkImage: - '/assets/landing-pages/templated-apis/checkout-ui-extensions/checkout-ui-mobile-dark.png', - sections: [ - { - type: 'Generic', - anchorLink: 'scaffolding-extension', - title: 'Scaffolding an extension', - sectionContent: `Use the Shopify CLI to [generate a new extension](/docs/api/shopify-cli/app/app-generate-extension) in the directory of your app. - -Make sure you’re using Shopify CLI \`v3.85.3\` or higher. You can check your version by running \`shopify version\`. - `, - codeblock: { - title: 'Shopify CLI', - tabs: [ - { - code: './examples/scaffolding.example.bash', - language: 'bash', - }, - ], - }, - initialLanguage: 'bash', - }, - { - type: 'Generic', - anchorLink: 'eslint-configuration', - title: 'Optional ESLint configuration', - sectionContent: ` -If your app is using ESLint, update your configuration to include the new global \`shopify\` object. - `, - codeblock: { - title: '.eslintrc.cjs', - tabs: [ - { - code: './examples/eslint-configuration.example.ts', - language: 'js', - }, - ], - }, - initialLanguage: 'js', - }, - { - type: 'Generic', - anchorLink: 'configuration-file', - title: 'Configuration file', - sectionContent: `When you create a UI extension, the \`shopify.extension.toml\` file is generated in your extension directory. Use this file to configure your extension name, extension targets, metafields, capabilities, and settings definition. - -Extension targets provide locations where merchants can insert custom content. Static extension targets are tied to core checkout features like contact information, shipping methods, and order summary line items. Block targets can display at any point in the checkout process and will always render regardless of which checkout features are available. An example is a field to capture order notes from the customer.`, - sectionCard: [ - { - name: 'Configuration guide', - subtitle: 'Learn more', - url: '/docs/api/checkout-ui-extensions/configuration', - type: 'gear', - }, - { - name: 'Extension targets', - subtitle: 'Overview', - url: '/docs/api/checkout-ui-extensions/extension-targets-overview', - type: 'blocks', - }, - ], - codeblock: { - title: 'shopify.extension.toml', - tabs: [ - { - code: './examples/configuration/default.example.toml', - language: 'toml', - }, - ], - }, - initialLanguage: 'yaml', - }, - { - type: 'Generic', - anchorLink: 'extension-functions', - title: 'Extension functions', - sectionContent: `Checkout will execute the module’s default export so it can render a user interface. - -Extension UIs are powered by [Remote DOM](https://github.com/Shopify/remote-dom/), a fast and secure environment for custom [(non-DOM)](#security) UIs.`, - sectionCard: [], - codeblock: { - title: 'Extension.jsx', - tabs: [ - { - code: './examples/extension-functions.example.tsx', - language: 'tsx', - }, - ], - }, - initialLanguage: 'tsx', - }, - { - type: 'Generic', - title: 'Preact by default', - sectionContent: `UI Extensions are scaffolded with [Preact](https://preactjs.com/) by default. This means you can use Preact patterns and principles within your extension. - -Since Preact is included as a standard dependency, you have access to all of its features including [hooks](https://preactjs.com/guide/v10/hooks/) like \`useState\` and \`useEffect\` for managing component state and side effects. - -You can also use [Preact Signals](https://preactjs.com/guide/v10/signals/) for reactive state management, and take advantage of standard web APIs just like you would in a regular Preact application. - `, - anchorLink: 'preact-by-default', - codeblock: { - title: 'Extension.jsx', - tabs: [ - { - code: './examples/preact-by-default.jsx', - language: 'jsx', - }, - ], - }, - }, - { - type: 'Generic', - anchorLink: 'extension-apis', - title: 'Extension APIs', - sectionContent: `The platform defines a global \`shopify\` object that contains all properties and methods available to UI extensions. - -These APIs enable UI extensions to get information about the checkout or related objects and to perform actions. For example, you can retrieve what’s in customer carts and offer related products. - -APIs with a \`value\` property are [Preact Signals](https://preactjs.com/guide/v10/signals/). Preact will automatically re-render your extension as values change. -`, - sectionCard: [ - { - name: 'Checkout extensions API', - subtitle: 'API reference', - url: '/docs/api/checkout-ui-extensions/apis', - type: 'blocks', - }, - ], - codeblock: { - title: 'Extension.jsx', - tabs: [ - { - code: './examples/extension-apis.example.tsx', - language: 'tsx', - }, - ], - }, - initialLanguage: 'tsx', - }, - { - type: 'Generic', - anchorLink: 'ui-components', - title: 'UI components', - sectionContent: `Checkout UI extensions declare their interface using [Polaris web components](/docs/api/checkout-ui-extensions/using-polaris-components). Shopify renders the UI natively, so it’s performant, accessible, and works in all of checkout’s supported browsers. - -Checkout components are designed to be flexible, enabling you to layer and mix them to create highly-customized app extensions that feel seamless within the checkout experience. All components inherit a merchant’s brand settings and the CSS cannot be altered or overridden.`, - sectionCard: [ - { - name: 'Component library', - subtitle: 'API reference', - url: '/docs/api/checkout-ui-extensions/latest/web-components', - type: 'blocks', - }, - { - name: 'Figma UI kit', - subtitle: 'UI Reference', - url: 'https://www.figma.com/community/file/1554582792754361051', - type: 'setting', - }, - ], - codeblock: { - title: 'Extension.jsx', - tabs: [ - { - code: './examples/ui-components.example.tsx', - language: 'tsx', - }, - ], - }, - initialLanguage: 'tsx', - }, - { - type: 'Generic', - anchorLink: 'security', - title: 'Security', - sectionContent: ` -Checkout UI extensions are a safe and secure way to customize the appearance and functionality of the checkout page without compromising the security of checkout or customer data. -- They run in an isolated sandbox, separate from the checkout page and other UI extensions. -- They don't have access to sensitive payment information or the checkout page itself (HTML or other assets). -- They are limited to specific UI components and APIs that are exposed by the platform. -- They have limited access to [global web APIs](https://github.com/Shopify/ui-extensions/blob/2025-10/documentation/runtime-environment.md). -- Apps that wish to access [protected customer data](/docs/apps/store/data-protection/protected-customer-data), must submit an application and are subject to strict security guidelines and review proccesses by Shopify. -`, - sectionNotice: [ - { - title: 'Constraints', - sectionContent: ` -You can’t override the CSS for UI components. The checkout UI will always render the merchant’s own branding. - -Checkout UI extensions don’t have access to the real checkout DOM and can’t render arbitrary HTML such as \`
\` elements or \`${decodeHTML( - htmlString, - )}`; -}; - -/* -Using JSX Builder to self-host Preact and Sucrase. -https://github.com/shopify-playground/jsx-builder -*/ -const jsxWrapper = ( - jsxString, - bodyContent, - layoutStyles = '', - customStyles = '', -) => { - const baseStyles = 'box-sizing: border-box; margin: 0; padding: 0.5rem;'; - const composedStyles = composeStyles(baseStyles, layoutStyles, customStyles); - - // Auto-wrap JSX if it doesn't already contain a return statement - // This allows both simple JSX expressions and complete function bodies with hooks - let jsxStringProcessed = jsxString; - // Check if 'return' appears as a statement - // If "return" has words before AND after it (like "for return request"), it's in text - // Otherwise, check if there's a return statement - const hasReturnInText = /\w+\s+return\s+\w+/.test(jsxString); - const hasReturnStatement = !hasReturnInText && /\breturn\b/.test(jsxString); - - if (!hasReturnStatement) { - jsxStringProcessed = `return (${jsxString})`; - } - - return ` - ${ - bodyContent || '' - } - - -`; -}; - -const createTemplate = ({ - layoutStyles, - wrapperElement = null, - wrapperAttributes = '', -}) => { - return (htmlString, customStyles, jsx = false) => { - if (jsx) { - const bodyContent = wrapperElement - ? `<${wrapperElement}${ - wrapperAttributes ? ` ${wrapperAttributes}` : '' - } id="wrapper-element">` - : ''; - - const customStylesString = stylesToString(customStyles); - - return jsxWrapper( - htmlString, - bodyContent, - layoutStyles, - customStylesString, - ); - } else { - const wrappedHtml = wrapperElement - ? `<${wrapperElement}${ - wrapperAttributes ? ` ${wrapperAttributes}` : '' - } id="wrapper-element">${htmlString}` - : `
${htmlString}
`; - - const customStylesString = stylesToString(customStyles); - - return htmlWrapper(wrappedHtml, layoutStyles, customStylesString); - } - }; -}; - -const templates = { - default: createTemplate({ - layoutStyles: 'display: grid; place-items: center; gap: 0.5rem;', - }), - alignStart: createTemplate({ - layoutStyles: 'display: grid; place-items: start center; gap: 0.5rem;', - wrapperElement: 'div', - }), - wrapped: createTemplate({ - layoutStyles: 'display: grid; place-items: center; gap: 0.5rem;', - wrapperElement: 'div', - wrapperAttributes: 'style="width: 100%;"', - }), - inline: createTemplate({ - layoutStyles: - 'display: flex; justify-content: center; align-items: center; gap: 0.5rem;', - }), - section: createTemplate({ - layoutStyles: 'display: grid; place-items: center; background: #F1F1F1', - wrapperElement: 's-section', - wrapperAttributes: 'padding="none"', - }), - page: createTemplate({ - layoutStyles: 'display: grid; place-items: center; background: #F1F1F1;', - }), - none: createTemplate({ - layoutStyles: 'padding: 0;', - }), - padding: createTemplate({ - layoutStyles: 'padding: 0;', - wrapperElement: 's-box', - wrapperAttributes: 'padding="base"', - }), - fullWidth: createTemplate({ - layoutStyles: 'display: grid; place-items: center;', - wrapperElement: 's-box', - wrapperAttributes: 'padding="base", inlineSize="100%"', - }), - example: createTemplate({ - layoutStyles: 'display: grid; place-items: center; gap: 0.5rem;', - wrapperElement: 's-box', - wrapperAttributes: 'padding="base"', - }), - formWrapper: createTemplate({ - layoutStyles: - 'display: grid; place-items: center; gap: 0.5rem; background: #F1F1F1; padding: 1rem;', - wrapperElement: 's-box', - wrapperAttributes: 'padding="base", inlineSize="300px"', - }), -}; - -const transformJson = async (filePath, isExtensions) => { - let jsonData = JSON.parse((await fs.readFile(filePath, 'utf8')).toString()); - - // V2 format is an object keyed by symbol name; transforms only apply to legacy array format - if (!Array.isArray(jsonData)) { - await fs.writeFile(filePath, JSON.stringify(jsonData, null, 2)); - return; - } - - const iconEntry = jsonData.find( - (entry) => entry.name === 'Icon' && entry.subSections, - ); - if (iconEntry) { - const iconDataPath = path.join(srcPath, 'components/Icon/icon-data.json'); - const iconData = JSON.parse(await fs.readFile(iconDataPath, 'utf-8')); - const iconPreviewData = iconData.iconPreviewData; - - iconPreviewData.icons = await extractIconList(); - - const subSection = iconEntry.subSections.find((section) => - section.sectionContent?.includes('{{ICON_PREVIEW_IFRAME}}'), - ); - if (subSection) { - const html = await renderIconPreviewJsxTemplate(iconPreviewData); - // Converting to base64 to avoid having to escape the HTML in the JSX template. - const base64Html = Buffer.from(html, 'utf-8').toString('base64'); - const darkModeListener = await fs.readFile( - path.join(docsPath, 'templates/icon-renderer/dark-mode-listener.jsx'), - 'utf-8', - ); - const base64DarkModeListener = Buffer.from( - darkModeListener, - 'utf-8', - ).toString('base64'); - subSection.sectionContent = subSection.sectionContent.replace( - /\{\{ICON_PREVIEW_IFRAME\}\}/g, - ` - - `, - ); - } - } - - jsonData.forEach((entry) => { - // Temporary to ensure that isOptional is added to all members - if (entry.definitions && entry.isVisualComponent) { - entry.definitions.forEach((definition) => { - if (definition.typeDefinitions) { - Object.values(definition.typeDefinitions).forEach((typeDef) => { - if (typeDef.members && Array.isArray(typeDef.members)) { - typeDef.members - .sort((first, second) => first.name.localeCompare(second.name)) - .forEach((member) => { - // eslint-disable-next-line no-prototype-builtins - if (member.hasOwnProperty('isOptional')) return; - member.isOptional = true; - }); - } - }); - } - }); - } - - if (entry.defaultExample?.codeblock?.tabs) { - const newTabs = []; - entry.defaultExample.codeblock.tabs.forEach((tab) => { - if (tab.language !== 'preview' && tab.language !== 'preview-jsx') { - newTabs.push({...tab, title: tab.language}); - return; - } - - if (tab.layout && !(tab.layout in templates)) { - console.warn( - `${entry.name} has a layout of ${tab.layout} which is not a valid template.`, - ); - } - - const previewHTML = - tab.layout && tab.layout in templates - ? templates[tab.layout]( - tab.code, - tab.customStyles, - tab.language === 'preview-jsx', - ) - : templates.default( - tab.code, - tab.customStyles, - tab.language === 'preview-jsx', - ); - - newTabs.push( - { - title: tab.language === 'preview-jsx' ? 'jsx' : 'html', - code: tab.code, - language: tab.language === 'preview-jsx' ? 'jsx' : 'html', - editable: - tab.language === 'preview-jsx' ? tab.editable || false : false, - }, - {code: previewHTML, language: 'preview'}, - ); - }); - - entry.defaultExample.codeblock.tabs = newTabs.sort((first, second) => { - if (first.language === 'jsx') return -1; - if (second.language === 'jsx') return 1; - return 0; - }); - } - - if (entry.examples && entry.examples.exampleGroups) { - entry.examples.exampleGroups.forEach((exampleGroup) => { - exampleGroup.examples.forEach((example) => { - if (!example.codeblock?.tabs) { - return; - } - const newTabs = []; - - example.codeblock.tabs.forEach((tab) => { - if (tab.language === 'preview' || tab.language === 'preview-jsx') { - const previewHTML = - tab.layout && tab.layout in templates - ? templates[tab.layout]( - tab.code, - tab.customStyles, - tab.language === 'preview-jsx', - ) - : templates.example( - tab.code, - tab.customStyles, - tab.language === 'preview-jsx', - ); - - newTabs.push( - { - title: tab.language === 'preview-jsx' ? 'jsx' : 'html', - code: tab.code, - language: tab.language === 'preview-jsx' ? 'jsx' : 'html', - }, - { - code: previewHTML, - language: 'preview', - }, - ); - } else { - newTabs.push({ - title: tab.language, - code: tab.code, - language: tab.language, - editable: - tab.language === 'preview-jsx' - ? tab.editable || false - : false, - }); - } - }); - - example.codeblock.tabs = newTabs.sort((first, second) => { - if (first.language === 'jsx') return -1; - if (second.language === 'jsx') return 1; - return 0; - }); - }); - }); - } - }); - - // Merge the App Bridge docs with the Shopify Dev docs (if that file exists) - if (!isExtensions && shopifyDevExists) { - const shopifyDevDocs = path.join( - shopifyDevDBPath, - 'app_home/generated_docs_data.json', - ); - if (existsSync(shopifyDevDocs)) { - const shopifyDevDocsContent = await fs.readFile(shopifyDevDocs, 'utf8'); - const shopifyDevDocsDocsParsed = JSON.parse( - shopifyDevDocsContent.toString(), - ); - - const filteredDocs = shopifyDevDocsDocsParsed.filter( - (entry) => - entry.category !== 'Web components' && - entry.category !== 'Polaris web components' && - entry.category !== 'Patterns', - ); - - // Combine arrays with shopify dev docs first, followed by new data - jsonData = [...filteredDocs, ...jsonData]; - } - } - - await fs.writeFile(filePath, JSON.stringify(jsonData, null, 2)); -}; - const generateExtensionsDocs = async () => { console.log( `Building Admin UI Extensions docs for ${EXTENSIONS_API_VERSION} version`, @@ -478,23 +70,20 @@ const generateExtensionsDocs = async () => { const outputDir = `${docsGeneratedRelativePath}/admin_extensions/${EXTENSIONS_API_VERSION}`; const scripts = [ - `yarn tsc --project ${docsRelativePath}/${tsconfigExtensions} --moduleResolution node --target esNext --module CommonJS --skipLibCheck`, - `yarn generate-docs --input ./${srcRelativePath} --typesInput ./${srcRelativePath} --output ./${outputDir}`, + `yarn generate-docs --input ./${srcRelativePath} --output ./${outputDir}`, ]; await generateFiles({ scripts, outputDir, rootPath, - generatedDocsDataFile, generatedDocsDataV2File, - transformJson: (filePath) => transformJson(filePath, true), }); // Replace 'unstable' with the exact API version in relative doc links const generatedDocsPathForVersion = path.join(rootPath, outputDir); await replaceFileContent({ - filePaths: path.join(generatedDocsPathForVersion, generatedDocsDataFile), + filePaths: path.join(generatedDocsPathForVersion, generatedDocsDataV2File), searchValue: '/docs/api/admin-extensions/unstable/', replaceValue: `/docs/api/admin-extensions/${EXTENSIONS_API_VERSION}`, }); @@ -512,17 +101,14 @@ const generateAppBridgeDocs = async () => { const outputDir = `${docsGeneratedRelativePath}/app_home`; const scripts = [ - `yarn tsc --project ${docsRelativePath}/${tsconfigAppBridge} --moduleResolution node --target esNext --module CommonJS --skipLibCheck`, - `yarn generate-docs --input ./${srcRelativePath} --typesInput ./${srcRelativePath} --output ./${outputDir}`, + `yarn generate-docs --input ./${srcRelativePath} --output ./${outputDir}`, ]; await generateFiles({ scripts, outputDir, rootPath, - generatedDocsDataFile, generatedDocsDataV2File, - transformJson: (filePath) => transformJson(filePath, false), }); }; diff --git a/packages/ui-extensions/docs/surfaces/build-doc-shared.mjs b/packages/ui-extensions/docs/surfaces/build-doc-shared.mjs index 69273e1ef8..497a48945e 100644 --- a/packages/ui-extensions/docs/surfaces/build-doc-shared.mjs +++ b/packages/ui-extensions/docs/surfaces/build-doc-shared.mjs @@ -88,56 +88,29 @@ export const generateFiles = async ({ scripts, outputDir, rootPath, - generatedDocsDataFile, generatedDocsDataV2File, - generatedStaticPagesFile, - transformJson, }) => { scripts.forEach((script) => childProcess.execSync(script, {stdio: 'inherit', cwd: rootPath}), ); - const srcFiles = await fs.readdir(rootPath, {recursive: true}); - const builtFiles = srcFiles.filter((file) => file.endsWith('.ts')); - await Promise.all( - builtFiles.map((file) => { - const jsFilePath = path.join(rootPath, file.replace('.ts', '.js')); - return existsSync(jsFilePath) ? fs.rm(jsFilePath) : Promise.resolve(); - }), - ); - const outputPath = path.join(rootPath, outputDir); - const generatedDocsPath = path.join(outputPath, generatedDocsDataFile); - if (!existsSync(generatedDocsPath) && generatedDocsDataV2File) { - const v2Path = path.join(outputPath, generatedDocsDataV2File); - if (existsSync(v2Path)) { - await fs.copyFile(v2Path, generatedDocsPath); - } - } - if (!existsSync(generatedDocsPath)) { + const generatedDocsV2Path = path.join(outputPath, generatedDocsDataV2File); + + if (!existsSync(generatedDocsV2Path)) { throw new Error( - `Generated docs file not found at ${generatedDocsPath}. ` + - 'The first tsc step may have failed (check output above). ' + - 'Ensure the admin docs build uses --skipLibCheck for tsc to avoid @types/node errors.', + `Generated docs file not found at ${generatedDocsV2Path}. ` + + 'The generate-docs step may have failed (check output above).', ); } - const generatedFiles = [generatedDocsPath]; - if (generatedStaticPagesFile) { - generatedFiles.push(path.join(outputPath, generatedStaticPagesFile)); - } - // Make sure https://shopify.dev URLs are relative so they work in Spin. // See https://github.com/Shopify/generate-docs/issues/181 await replaceFileContent({ - filePaths: generatedFiles, + filePaths: generatedDocsV2Path, searchValue: 'https://shopify.dev', replaceValue: '', }); - - if (transformJson) { - await transformJson(path.join(outputPath, generatedDocsDataFile)); - } }; export const copyGeneratedToShopifyDev = async ({ diff --git a/packages/ui-extensions/docs/surfaces/checkout/build-docs-fast.sh b/packages/ui-extensions/docs/surfaces/checkout/build-docs-fast.sh deleted file mode 100755 index 3928b8b66b..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/build-docs-fast.sh +++ /dev/null @@ -1,64 +0,0 @@ -API_VERSION=$1 -DOCS_PATH=docs/surfaces/checkout - -if [ -z $API_VERSION ] -then - echo "You must specify a calver version YYYY-MM or YYYY-MM-rc (for a release candidate)." - exit 1; -else - echo "Building docs for '$API_VERSION' checkout UI extensions API (fast mode - only changed files)." -fi - -# Get list of changed .doc.ts files -CHANGED_DOCS=$(git diff --name-only HEAD | grep "\.doc\.ts$" | grep "$DOCS_PATH/staticPages") - -if [ -z "$CHANGED_DOCS" ]; then - echo "No .doc.ts files changed in static pages. Nothing to rebuild." - exit 0 -fi - -echo "Changed files:" -echo "$CHANGED_DOCS" - -# Convert full paths to relative paths from package root -RELATIVE_DOCS=$(echo "$CHANGED_DOCS" | sed 's|packages/ui-extensions/||g') - -echo "Compiling: $RELATIVE_DOCS" - -# Only compile changed static pages -COMPILE_STATIC_PAGES="yarn tsc $RELATIVE_DOCS --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated" - -eval $COMPILE_STATIC_PAGES -build_exit=$? - -# Clean up generated JS files -find ./ -name '*.doc*.js' -exec rm -r {} \; - -if [ $build_exit -ne 0 ]; then - echo "** Failed to generate docs" - exit $build_exit -fi - -# Copy generated docs to shopify-dev -copy_generated_docs_to_shopify_dev() { - if [ -d $SHOPIFY_DEV_PATH ]; then - mkdir -p $SHOPIFY_DEV_PATH/areas/platforms/shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION - cp ./$DOCS_PATH/generated/* $SHOPIFY_DEV_PATH/areas/platforms/shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION - echo "✓ Copied docs to shopify-dev: $SHOPIFY_DEV_PATH/areas/platforms/shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION" - else - echo "Not copying docs to shopify-dev because it was not found at $SHOPIFY_DEV_PATH." - fi -} - -# Try relative path first (for CI/Github Actions) -SHOPIFY_DEV_PATH="../../../shopify-dev" - -if [ -d $SHOPIFY_DEV_PATH ]; then - copy_generated_docs_to_shopify_dev -else - # Try local dev environment path - SHOPIFY_DEV_PATH="$HOME/src/github.com/Shopify/shopify-dev" - copy_generated_docs_to_shopify_dev -fi - -echo "✓ Fast docs build complete" diff --git a/packages/ui-extensions/docs/surfaces/checkout/build-docs-watch.sh b/packages/ui-extensions/docs/surfaces/checkout/build-docs-watch.sh deleted file mode 100755 index c4aa46d530..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/build-docs-watch.sh +++ /dev/null @@ -1,83 +0,0 @@ -API_VERSION=$1 -DOCS_PATH=docs/surfaces/checkout - -if [ -z $API_VERSION ] -then - echo "You must specify a calver version YYYY-MM or YYYY-MM-rc (for a release candidate)." - exit 1; -else - echo "Watching docs for '$API_VERSION' checkout UI extensions API..." -fi - -# Function to build docs -build_docs() { - echo "Building docs..." - - # Get list of changed .doc.ts files - CHANGED_DOCS=$(git diff --name-only HEAD | grep "\.doc\.ts$" | grep "$DOCS_PATH/staticPages") - - if [ -z "$CHANGED_DOCS" ]; then - echo "No .doc.ts files changed, building all static pages..." - COMPILE_STATIC_PAGES="yarn tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated" - else - echo "Changed files:" - echo "$CHANGED_DOCS" - - # Convert full paths to relative paths from package root - RELATIVE_DOCS=$(echo "$CHANGED_DOCS" | sed 's|packages/ui-extensions/||g') - - COMPILE_STATIC_PAGES="yarn tsc $RELATIVE_DOCS --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated" - fi - - eval $COMPILE_STATIC_PAGES - build_exit=$? - - # Clean up generated JS files - find ./ -name '*.doc*.js' -exec rm -r {} \; - - if [ $build_exit -ne 0 ]; then - echo "** Failed to generate docs" - return $build_exit - fi - - # Copy generated docs to shopify-dev - copy_generated_docs_to_shopify_dev() { - if [ -d $SHOPIFY_DEV_PATH ]; then - mkdir -p $SHOPIFY_DEV_PATH/areas/platforms/shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION - cp ./$DOCS_PATH/generated/* $SHOPIFY_DEV_PATH/areas/platforms/shopify-dev/db/data/docs/templated_apis/checkout_extensions/$API_VERSION - echo "✓ Copied docs to shopify-dev" - fi - } - - # Try relative path first (for CI/Github Actions) - SHOPIFY_DEV_PATH="../../../shopify-dev" - - if [ -d $SHOPIFY_DEV_PATH ]; then - copy_generated_docs_to_shopify_dev - else - # Try local dev environment path - SHOPIFY_DEV_PATH="$HOME/src/github.com/Shopify/shopify-dev" - copy_generated_docs_to_shopify_dev - fi - - echo "✓ Build complete at $(date +%H:%M:%S)" -} - -# Check for fswatch before building -if ! command -v fswatch &> /dev/null; then - echo "Error: fswatch is required for watch mode" - echo "Install it with: brew install fswatch" - exit 1 -fi - -# Initial build -build_docs - -echo "" -echo "Watching for changes in $DOCS_PATH/staticPages/*.doc.ts..." -echo "Press Ctrl+C to stop" -echo "" - -fswatch -o $DOCS_PATH/staticPages/*.doc.ts | while read f; do - build_docs -done diff --git a/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh b/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh index d7c0532764..8d66f27019 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh +++ b/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh @@ -2,8 +2,6 @@ API_VERSION=$1 DOCS_PATH=docs/surfaces/checkout SRC_PATH=src/surfaces/checkout COMPONENTS_DIR=src/surfaces/checkout/components -COMPONENTS_DEFINITIONS=src/surfaces/checkout/components/components.d.ts -COMPONENTS_TEMP_TS=src/surfaces/checkout/components/components.ts fail_and_exit() { echo "** Failed to generate docs" @@ -35,8 +33,7 @@ else echo "Building docs for '$API_VERSION' checkout UI extensions API." fi -COMPILE_DOCS="yarn tsc --project $DOCS_PATH/tsconfig.docs.json --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$DOCS_PATH/reference ./$SRC_PATH --typesInput ./$SRC_PATH --output ./$DOCS_PATH/generated" -COMPILE_STATIC_PAGES="yarn tsc $DOCS_PATH/staticPages/*.doc.ts --types react --moduleResolution node --target esNext --module CommonJS && yarn generate-docs --isLandingPage --input ./$DOCS_PATH/staticPages --output ./$DOCS_PATH/generated" +COMPILE_DOCS="yarn generate-docs --overridePath ./$DOCS_PATH/typeOverride.json --input ./$SRC_PATH --output ./$DOCS_PATH/generated" # Copy all .d.ts files in components directory to .ts files so they can be picked up by the generate-docs tool echo "Copying .d.ts files to temporary .ts files..." @@ -56,25 +53,19 @@ done if echo "$PWD" | grep -q '\checkout-web'; then # We are generating docs from the private package, which does not have other surfaces aside from checkout - eval $COMPILE_DOCS && eval $COMPILE_STATIC_PAGES && eval $COMPILE_CATEGORIES + eval $COMPILE_DOCS build_exit=$? else # Other surfaces may have duplicate types that cause issues with documentation generation, # so we erase their contents and replace them afterwards echo "export {}" > src/surfaces/customer-account.ts echo "export {}" > src/surfaces/admin.ts - eval $COMPILE_DOCS && eval $COMPILE_STATIC_PAGES && eval $COMPILE_CATEGORIES + eval $COMPILE_DOCS build_exit=$? git checkout HEAD -- src/surfaces/customer-account.ts git checkout HEAD -- src/surfaces/admin.ts fi -# TODO: get generate-docs to stop requiring JS files: -# https://github.com/Shopify/generate-docs#important-note -find ./ -name '*.doc*.js' -exec rm -r {} \; -find ./src/docs/shared -name '*.js' -exec rm -r {} \; -find ./src/docs/shared/components -name '*.js' -exec rm -r {} \; - # Remove all temporary .ts files that were created from .d.ts files echo "Removing temporary .ts files..." for temp_file in "${TEMP_FILES[@]}"; do @@ -89,7 +80,6 @@ fi # Make sure https://shopify.dev URLs are relative. # See https://github.com/Shopify/generate-docs/issues/181 -run_sed 's/https:\/\/shopify.dev//gi' ./$DOCS_PATH/generated/generated_docs_data.json run_sed 's/https:\/\/shopify.dev//gi' ./$DOCS_PATH/generated/generated_docs_data_v2.json sed_exit=$? if [ $sed_exit -ne 0 ]; then @@ -123,15 +113,13 @@ if [ -d $SHOPIFY_DEV_PATH ]; then fi # Replace 'latest' with the exact API version in relative doc links - for file in generated_docs_data.json generated_docs_data_v2.json generated_static_pages.json; do - run_sed \ - "s/\/docs\/api\/checkout-ui-extensions\/latest/\/docs\/api\/checkout-ui-extensions\/$API_VERSION/gi" \ - "$SHOPIFY_DEV_DEST/$file" - sed_exit=$? - if [ $sed_exit -ne 0 ]; then - fail_and_exit $sed_exit - fi - done + run_sed \ + "s/\/docs\/api\/checkout-ui-extensions\/latest/\/docs\/api\/checkout-ui-extensions\/$API_VERSION/gi" \ + "$SHOPIFY_DEV_DEST/generated_docs_data_v2.json" + sed_exit=$? + if [ $sed_exit -ne 0 ]; then + fail_and_exit $sed_exit + fi rsync -a ./$DOCS_PATH/screenshots/ $SHOPIFY_DEV_PATH/areas/platforms/shopify-dev/content/assets/images/templated-apis-screenshots/checkout-ui-extensions/$API_VERSION echo "Docs: https://shopify-dev.shop.dev/docs/api/checkout-ui-extensions" @@ -154,4 +142,3 @@ done if [ ! -d "$SHOPIFY_DEV_PATH" ]; then echo "Not copying docs to shopify-dev because no repo was found." fi - diff --git a/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs b/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs index 35ddc471b4..6f3c99f1b6 100644 --- a/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs +++ b/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs @@ -36,15 +36,11 @@ const shopifyDevDBPath = path.join( 'areas/platforms/shopify-dev/db/data/docs/templated_apis', ); -const generatedDocsDataFile = 'generated_docs_data.json'; const generatedDocsDataV2File = 'generated_docs_data_v2.json'; -const generatedStaticPagesFile = 'generated_static_pages.json'; const componentDefs = path.join(srcPath, 'components.d.ts'); const tempComponentDefs = path.join(srcPath, 'components.ts'); -const tsconfig = 'tsconfig.docs.json'; - const maxBuffer = 50 * 1024 * 1024; const copyCheckoutTypesToTemp = async () => { @@ -72,24 +68,6 @@ const cleanupTempFiles = async (tempFiles) => { ); }; -const cleanupGeneratedJsFiles = async (directories) => { - await Promise.all( - directories.map(async (dir) => { - if (!existsSync(dir)) return; - const files = await fs.readdir(dir, {recursive: true}); - await Promise.all( - files - .filter((file) => file.endsWith('.js')) - .map((file) => { - const jsPath = path.join(dir, file); - const tsPath = path.join(dir, file.replace(/\.js$/, '.ts')); - return existsSync(tsPath) ? fs.rm(jsPath) : Promise.resolve(); - }), - ); - }), - ); -}; - const generateExtensionsDocs = async () => { console.log( `Building Customer Account UI Extensions docs for ${EXTENSIONS_API_VERSION} version`, @@ -102,82 +80,16 @@ const generateExtensionsDocs = async () => { } const outputDir = `${docsGeneratedRelativePath}/customer_account_ui_extensions/${EXTENSIONS_API_VERSION}`; - const tempRefOutputDir = `${outputDir}/_temp_ref`; - const tempCompOutputDir = `${outputDir}/_temp_comp`; await fs.mkdir(outputDir, {recursive: true}); - await fs.mkdir(tempRefOutputDir, {recursive: true}); - await fs.mkdir(tempCompOutputDir, {recursive: true}); - - // Single tsc step — tsconfig.docs.json already covers all .doc.ts files - // (reference, staticPages, categories, and component docs) - console.log('Compiling TypeScript...'); - execSync( - `yarn tsc --project ${docsRelativePath}/${tsconfig} --moduleResolution node --target esNext --module CommonJS --skipLibCheck`, - {stdio: 'pipe'}, - ); - // Split generate-docs into independent parallel commands. - // Internally, generate-docs creates a TypeScript program for every - // --typesInput directory × every --input directory. Splitting reference - // docs from component docs avoids redundant type parsing: - // - Reference docs (APIs/targets) only need customer-account types - // - Component docs only need checkout component types - // (customer-account types are included automatically as the base path) - console.log('Generating docs in parallel...'); const overridePath = `./${docsRelativePath}/typeOverride.json`; - await Promise.all([ - execAsync( - `yarn generate-docs --overridePath ${overridePath} --input ./${docsRelativePath}/reference --typesInput ./${srcRelativePath} --output ./${tempRefOutputDir}`, - {maxBuffer}, - ), - execAsync( - `yarn generate-docs --overridePath ${overridePath} --input ./${srcRelativePath} --typesInput ./${checkoutComponentsRelativePath} --output ./${tempCompOutputDir}`, - {maxBuffer}, - ), - execAsync( - `yarn generate-docs --isLandingPage --input ./${docsRelativePath}/staticPages --output ./${outputDir}`, - {maxBuffer}, - ), - execAsync( - `yarn generate-docs --isCategoryPage --input ./${docsRelativePath}/categories --output ./${outputDir}`, - {maxBuffer}, - ), - ]); - - // Merge the two generated_docs_data_v2.json files (v2 dict format) - const [refData, compData] = await Promise.all([ - fs - .readFile(path.join(tempRefOutputDir, generatedDocsDataV2File), 'utf8') - .then(JSON.parse), - fs - .readFile(path.join(tempCompOutputDir, generatedDocsDataV2File), 'utf8') - .then(JSON.parse), - ]); - const mergedData = {...refData, ...compData}; - const mergedDataJson = JSON.stringify(mergedData, null, 2); - await fs.writeFile( - path.join(outputDir, generatedDocsDataV2File), - mergedDataJson, + await execAsync( + `yarn generate-docs --overridePath ${overridePath} --input ./${srcRelativePath} ./${checkoutComponentsRelativePath} --output ./${outputDir}`, + {maxBuffer}, ); - // Clean up temp directories - await Promise.all([ - fs.rm(tempRefOutputDir, {recursive: true}), - fs.rm(tempCompOutputDir, {recursive: true}), - ]); - - // Clean up .js files only in directories where tsc output lands - await cleanupGeneratedJsFiles([ - path.join(rootPath, docsRelativePath), - path.join(rootPath, srcRelativePath), - path.join(rootPath, 'src/docs/shared'), - ]); - const generatedFiles = [path.join(outputDir, generatedDocsDataV2File)]; - if (generatedStaticPagesFile) { - generatedFiles.push(path.join(outputDir, generatedStaticPagesFile)); - } // Make sure https://shopify.dev URLs are relative so they work in Spin await replaceFileContent({ diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs-targets-json.mjs b/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs-targets-json.mjs index f4694a372d..89a24f4e48 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs-targets-json.mjs +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs-targets-json.mjs @@ -480,7 +480,7 @@ function createReverseMapping(targetsJson) { return result; } -// Find the generated_docs_data.json file to determine output location +// Find the generated_docs_data_v2.json file to determine output location function findGeneratedDocsPath() { const generatedDir = path.join(__dirname, 'generated'); @@ -492,7 +492,7 @@ function findGeneratedDocsPath() { if (stat.isDirectory()) { const result = findFile(fullPath); if (result) return result; - } else if (file === 'generated_docs_data.json') { + } else if (file === 'generated_docs_data_v2.json') { return path.dirname(fullPath); } } diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs.mjs b/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs.mjs index a45c527203..8b5b0e6c64 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs.mjs +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs.mjs @@ -38,44 +38,16 @@ const shopifyDevDBPath = path.join( 'areas/platforms/shopify-dev/db/data/docs/templated_apis', ); -const generatedDocsDataFile = 'generated_docs_data.json'; const generatedDocsDataV2File = 'generated_docs_data_v2.json'; -const generatedStaticPagesFile = 'generated_static_pages.json'; const componentDefs = path.join(srcPath, 'components.d.ts'); const tempComponentDefs = path.join(srcPath, 'components.ts'); -const tsconfig = 'tsconfig.docs.json'; - -const transformJson = async (filePath) => { - let jsonData = JSON.parse((await fs.readFile(filePath, 'utf8')).toString()); - - // V2 format is keyed by symbol name; the legacy filter only applies to arrays. - if (!Array.isArray(jsonData)) { - await fs.writeFile(filePath, JSON.stringify(jsonData, null, 2)); - return; - } - - jsonData = jsonData.filter(Boolean); - await fs.writeFile(filePath, JSON.stringify(jsonData, null, 2)); -}; - const cleanup = async () => { try { - // Clean up temporary component definitions file if (existsSync(tempComponentDefs)) { await fs.rm(tempComponentDefs); } - - // Clean up any remaining .js files from compilation - const srcFiles = await fs.readdir(rootPath, {recursive: true}); - const builtFiles = srcFiles.filter((file) => file.endsWith('.doc.js')); - await Promise.all( - builtFiles.map((file) => { - const jsFilePath = path.join(rootPath, file); - return existsSync(jsFilePath) ? fs.rm(jsFilePath) : Promise.resolve(); - }), - ); } catch (cleanupError) { console.warn( 'Warning: Failed to clean up temporary files:', @@ -134,25 +106,19 @@ const generateExtensionsDocs = async () => { const outputDir = `${docsGeneratedRelativePath}/pos_ui_extensions/${EXTENSIONS_API_VERSION}`; const scripts = [ - `yarn tsc --project ${docsRelativePath}/${tsconfig} --moduleResolution node --target esNext --module CommonJS --skipLibCheck`, - `yarn generate-docs --overridePath ./${docsRelativePath}/typeOverride.json --input ./${docsRelativePath}/reference ./${srcRelativePath} --typesInput ./${srcRelativePath} --output ./${outputDir}`, - `yarn tsc ${docsRelativePath}/staticPages/*.doc.ts --moduleResolution node --target esNext --module CommonJS --skipLibCheck`, - `yarn generate-docs --isLandingPage --input ./${docsRelativePath}/staticPages --output ./${outputDir}`, + `yarn generate-docs --overridePath ./${docsRelativePath}/typeOverride.json --input ./${srcRelativePath} --output ./${outputDir}`, ]; await generateFiles({ scripts, outputDir, rootPath, - generatedDocsDataFile, generatedDocsDataV2File, - generatedStaticPagesFile, - transformJson, }); // Update API version in relative doc links await replaceFileContent({ - filePaths: path.join(outputDir, generatedDocsDataFile), + filePaths: path.join(outputDir, generatedDocsDataV2File), searchValue: '/docs/api/pos-ui-extensions/[^/]*/', replaceValue: `/docs/api/pos-ui-extensions/${EXTENSIONS_API_VERSION}/`, }); From fc556b3572a726ca76122e3be2f689900986b73e Mon Sep 17 00:00:00 2001 From: Laurel Thorburn Date: Tue, 19 May 2026 11:39:24 -0600 Subject: [PATCH 04/12] dont copy images over --- .../ui-extensions/docs/surfaces/admin/build-docs.mjs | 9 --------- .../ui-extensions/docs/surfaces/checkout/build-docs.sh | 1 - .../docs/surfaces/customer-account/build-docs.mjs | 10 ---------- .../docs/surfaces/point-of-sale/build-docs.mjs | 10 ---------- 4 files changed, 30 deletions(-) diff --git a/packages/ui-extensions/docs/surfaces/admin/build-docs.mjs b/packages/ui-extensions/docs/surfaces/admin/build-docs.mjs index 0e2f4444b9..6e0d9d7993 100644 --- a/packages/ui-extensions/docs/surfaces/admin/build-docs.mjs +++ b/packages/ui-extensions/docs/surfaces/admin/build-docs.mjs @@ -179,15 +179,6 @@ try { } } - await fs.cp( - path.join(docsPath, 'screenshots'), - path.join( - shopifyDevPath, - 'areas/platforms/shopify-dev/content/assets/images/templated-apis-screenshots/admin', - ), - {recursive: true}, - ); - await fs.rm(tempComponentDefs); } catch (error) { console.error(error); diff --git a/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh b/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh index 8d66f27019..a388c95833 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh +++ b/packages/ui-extensions/docs/surfaces/checkout/build-docs.sh @@ -121,7 +121,6 @@ if [ -d $SHOPIFY_DEV_PATH ]; then fail_and_exit $sed_exit fi - rsync -a ./$DOCS_PATH/screenshots/ $SHOPIFY_DEV_PATH/areas/platforms/shopify-dev/content/assets/images/templated-apis-screenshots/checkout-ui-extensions/$API_VERSION echo "Docs: https://shopify-dev.shop.dev/docs/api/checkout-ui-extensions" else echo "Not copying docs to shopify-dev because it was not found at $SHOPIFY_DEV_PATH." diff --git a/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs b/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs index 6f3c99f1b6..70c4dd6c01 100644 --- a/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs +++ b/packages/ui-extensions/docs/surfaces/customer-account/build-docs.mjs @@ -104,16 +104,6 @@ const generateExtensionsDocs = async () => { searchValue: '/docs/api//unstable/', replaceValue: `/docs/api/customer-account-ui-extensions/${EXTENSIONS_API_VERSION}`, }); - - await fs.cp( - path.join(docsPath, 'screenshots'), - path.join( - shopifyDevPath, - 'areas/platforms/shopify-dev/content/assets/images/templated-apis-screenshots/customer-account-ui-extensions', - EXTENSIONS_API_VERSION, - ), - {recursive: true}, - ); }; let checkoutTempFiles = []; diff --git a/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs.mjs b/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs.mjs index 8b5b0e6c64..94417270e3 100644 --- a/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs.mjs +++ b/packages/ui-extensions/docs/surfaces/point-of-sale/build-docs.mjs @@ -123,16 +123,6 @@ const generateExtensionsDocs = async () => { replaceValue: `/docs/api/pos-ui-extensions/${EXTENSIONS_API_VERSION}/`, }); - await fs.cp( - path.join(docsPath, 'screenshots'), - path.join( - shopifyDevPath, - 'areas/platforms/shopify-dev/content/assets/images/templated-apis-screenshots/pos-ui-extensions', - EXTENSIONS_API_VERSION, - ), - {recursive: true}, - ); - // Generate targets.json (extension targets + APIs + components mapping) const targetsScriptPath = path.join(__dirname, 'build-docs-targets-json.mjs'); childProcess.execSync(`node ${targetsScriptPath}`, { From fa6d528b41a94f23b20f77b9a394f390e15d4365 Mon Sep 17 00:00:00 2001 From: Laurel Thorburn Date: Tue, 19 May 2026 12:32:44 -0600 Subject: [PATCH 05/12] fix yarn lock to hopefully pass type check --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 1ee4fa4ced..1153f26d17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1918,7 +1918,7 @@ "@shopify/generate-docs@1.2.2": version "1.2.2" - resolved "https://npm.shopify.io/node/@shopify/generate-docs/-/generate-docs-1.2.2.tgz#208908cadbbfecc4f81614d78b6b6972bb929512" + resolved "https://registry.npmjs.org/@shopify/generate-docs/-/generate-docs-1.2.2.tgz#208908cadbbfecc4f81614d78b6b6972bb929512" integrity sha512-sXB76lHHx0CbRPrP5vABB9HL2ddxoQ6muCIzQDVM+TljUSztKFRUWEh57Gg9YefMlKh6soUMOMo06N6r51sBkA== dependencies: "@types/react" "^18.0.21" From 57309e4a7045130ab02e6f8ab2b091e28fee0add Mon Sep 17 00:00:00 2001 From: Laurel Thorburn Date: Tue, 19 May 2026 12:36:26 -0600 Subject: [PATCH 06/12] =?UTF-8?q?=20=20Summary=20of=20what=20was=20orphane?= =?UTF-8?q?d=20and=20removed:=20=20=20-=20src/docs/=20(entire=20tree=20?= =?UTF-8?q?=E2=80=94=20component-definitions.ts,=20docs-type.ts,=20compone?= =?UTF-8?q?nts/*.ts)=20=E2=80=94=20v1=20shared=20=20=20component=20schemas?= =?UTF-8?q?,=20all=20consumers=20were=20the=20.doc.ts=20files=20I=20delete?= =?UTF-8?q?d=20earlier=20=20=20-=20src/surfaces/admin/docs-types.ts=20?= =?UTF-8?q?=E2=80=94=20same=20=20=20-=20src/surfaces/checkout/helper.docs.?= =?UTF-8?q?ts=20=E2=80=94=20same=20=20=20-=20docs/surfaces/checkout/refere?= =?UTF-8?q?nce/helper.docs.ts=20=E2=80=94=20same?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../checkout/reference/helper.docs.ts | 857 ------------------ .../src/docs/shared/component-definitions.ts | 190 ---- .../docs/shared/components/Abbreviation.ts | 12 - .../docs/shared/components/Announcement.ts | 12 - .../src/docs/shared/components/Avatar.ts | 13 - .../src/docs/shared/components/Badge.ts | 13 - .../src/docs/shared/components/Banner.ts | 13 - .../src/docs/shared/components/Box.ts | 13 - .../src/docs/shared/components/Button.ts | 13 - .../src/docs/shared/components/ButtonGroup.ts | 13 - .../src/docs/shared/components/Checkbox.ts | 13 - .../src/docs/shared/components/Chip.ts | 13 - .../src/docs/shared/components/Choice.ts | 13 - .../src/docs/shared/components/ChoiceList.ts | 13 - .../src/docs/shared/components/Clickable.ts | 13 - .../docs/shared/components/ClickableChip.ts | 13 - .../docs/shared/components/ClipboardItem.ts | 12 - .../src/docs/shared/components/ColorField.ts | 13 - .../src/docs/shared/components/ColorPicker.ts | 13 - .../docs/shared/components/ConsentCheckbox.ts | 12 - .../shared/components/ConsentPhoneField.ts | 12 - .../src/docs/shared/components/DateField.ts | 13 - .../src/docs/shared/components/DatePicker.ts | 13 - .../src/docs/shared/components/Details.ts | 12 - .../src/docs/shared/components/Divider.ts | 13 - .../src/docs/shared/components/DropZone.ts | 12 - .../src/docs/shared/components/EmailField.ts | 13 - .../src/docs/shared/components/Form.ts | 13 - .../shared/components/FunctionSettings.ts | 13 - .../src/docs/shared/components/Grid.ts | 13 - .../src/docs/shared/components/GridItem.ts | 13 - .../src/docs/shared/components/Heading.ts | 13 - .../src/docs/shared/components/Icon.ts | 13 - .../src/docs/shared/components/Image.ts | 13 - .../src/docs/shared/components/Link.ts | 13 - .../src/docs/shared/components/ListItem.ts | 13 - .../src/docs/shared/components/Map.ts | 12 - .../src/docs/shared/components/MapMarker.ts | 12 - .../src/docs/shared/components/Menu.ts | 13 - .../src/docs/shared/components/Modal.ts | 12 - .../src/docs/shared/components/MoneyField.ts | 13 - .../src/docs/shared/components/NumberField.ts | 13 - .../src/docs/shared/components/Option.ts | 12 - .../src/docs/shared/components/OptionGroup.ts | 12 - .../src/docs/shared/components/OrderedList.ts | 13 - .../src/docs/shared/components/Page.ts | 12 - .../src/docs/shared/components/Paragraph.ts | 13 - .../docs/shared/components/PasswordField.ts | 13 - .../src/docs/shared/components/PaymentIcon.ts | 12 - .../src/docs/shared/components/PhoneField.ts | 11 - .../src/docs/shared/components/Popover.ts | 12 - .../src/docs/shared/components/PressButton.ts | 12 - .../shared/components/ProductThumbnail.ts | 11 - .../src/docs/shared/components/Progress.ts | 12 - .../src/docs/shared/components/QRCode.ts | 12 - .../docs/shared/components/QueryContainer.ts | 13 - .../src/docs/shared/components/ScrollBox.ts | 12 - .../src/docs/shared/components/SearchField.ts | 12 - .../src/docs/shared/components/Section.ts | 13 - .../src/docs/shared/components/Select.ts | 13 - .../src/docs/shared/components/Sheet.ts | 14 - .../shared/components/SkeletonParagraph.ts | 12 - .../src/docs/shared/components/Spinner.ts | 13 - .../src/docs/shared/components/Stack.ts | 13 - .../src/docs/shared/components/Summary.ts | 12 - .../src/docs/shared/components/Switch.ts | 13 - .../src/docs/shared/components/Table.ts | 13 - .../src/docs/shared/components/TableBody.ts | 13 - .../src/docs/shared/components/TableCell.ts | 13 - .../src/docs/shared/components/TableHeader.ts | 13 - .../docs/shared/components/TableHeaderRow.ts | 13 - .../src/docs/shared/components/TableRow.ts | 13 - .../src/docs/shared/components/Text.ts | 13 - .../src/docs/shared/components/TextArea.ts | 13 - .../src/docs/shared/components/TextField.ts | 13 - .../src/docs/shared/components/Thumbnail.ts | 13 - .../src/docs/shared/components/Time.ts | 12 - .../src/docs/shared/components/Tooltip.ts | 13 - .../src/docs/shared/components/URLField.ts | 13 - .../docs/shared/components/UnorderedList.ts | 13 - .../src/docs/shared/components/index.ts | 52 -- .../src/docs/shared/docs-type.ts | 7 - .../src/surfaces/admin/docs-types.ts | 45 - .../src/surfaces/checkout/helper.docs.ts | 166 ---- 84 files changed, 2305 deletions(-) delete mode 100644 packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts delete mode 100644 packages/ui-extensions/src/docs/shared/component-definitions.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Abbreviation.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Announcement.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Avatar.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Badge.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Banner.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Box.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Button.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ButtonGroup.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Checkbox.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Chip.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Choice.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ChoiceList.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Clickable.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ClickableChip.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ColorField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ColorPicker.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ConsentCheckbox.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ConsentPhoneField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/DateField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/DatePicker.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Details.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Divider.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/DropZone.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/EmailField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Form.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/FunctionSettings.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Grid.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/GridItem.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Heading.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Icon.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Image.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Link.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ListItem.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Map.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/MapMarker.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Menu.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Modal.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/MoneyField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/NumberField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Option.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/OptionGroup.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/OrderedList.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Page.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Paragraph.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/PasswordField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/PaymentIcon.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/PhoneField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Popover.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/PressButton.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ProductThumbnail.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Progress.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/QRCode.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/QueryContainer.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/ScrollBox.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/SearchField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Section.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Select.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Sheet.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Spinner.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Stack.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Summary.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Switch.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Table.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/TableBody.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/TableCell.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/TableHeader.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/TableHeaderRow.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/TableRow.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Text.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/TextArea.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/TextField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Thumbnail.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Time.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/Tooltip.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/URLField.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/UnorderedList.ts delete mode 100644 packages/ui-extensions/src/docs/shared/components/index.ts delete mode 100644 packages/ui-extensions/src/docs/shared/docs-type.ts delete mode 100644 packages/ui-extensions/src/surfaces/admin/docs-types.ts delete mode 100644 packages/ui-extensions/src/surfaces/checkout/helper.docs.ts diff --git a/packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts b/packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts deleted file mode 100644 index e00ced41ae..0000000000 --- a/packages/ui-extensions/docs/surfaces/checkout/reference/helper.docs.ts +++ /dev/null @@ -1,857 +0,0 @@ -import type {CodeTabType, ExampleType, LinkType} from '@shopify/generate-docs'; - -const examplePath = '../examples'; - -export const REQUIRES_PROTECTED_CUSTOMER_DATA = - 'access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) for some properties.'; - -export const REQUIRES_PROTECTED_CUSTOMER_DATA_LEVEL_2 = - 'level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).'; - -type NonEmptyArray = [T, ...T[]]; -type ExtensionExampleLanguage = 'js' | 'jsx' | 'toml'; -type ExtensionCodeTabConfig = Record< - ExtensionExampleLanguage, - { - title: string; - fileExtension: 'ts' | 'tsx' | 'toml'; - } ->; -const codeExampleTabConfig: ExtensionCodeTabConfig = { - js: { - title: 'JavaScript', - fileExtension: 'ts', - }, - jsx: { - title: 'Preact', - fileExtension: 'tsx', - }, - toml: { - title: 'TOML', - fileExtension: 'toml', - }, -}; - -interface OptionalCodeMetadata { - title?: string; - description?: string; - image?: string; -} - -/** - * Returns all examples available, specified with a key for reference. - */ -export function getExamples( - languages: NonEmptyArray, -): Record { - if (!languages || languages.length === 0) { - throw new HelperDocsError( - 'You must define at least one extension code language context you wish to retrieve the example(s) for.', - ); - } - /** - * Provides the code tab for the requested languages in "JavaScript" and "React". - */ - function getExtensionCodeTabs(name: string): CodeTabType[] { - return languages.map((language) => { - return { - code: `${examplePath}/${name}.example.${codeExampleTabConfig[language].fileExtension}`, - language, - title: codeExampleTabConfig[language].title, - }; - }); - } - - function createExample( - id: string, - metadata?: OptionalCodeMetadata, - ): Record { - return { - [id]: { - description: metadata?.description ?? '', - image: metadata?.image ?? undefined, - codeblock: { - title: metadata?.title ?? ` ${id.replace('/default', '')}`, - tabs: getExtensionCodeTabs(id), - }, - }, - }; - } - - // Add new examples here that can be shared across multiples pages. - return { - // The `name` of the example, used to reference this example with `getExample(name)` or `getHookExample(name)`. - default: { - // Shown in the example accordion or not shown at all if used as a default example on a page. - description: - "The extension API allows you to access information about the merchant's store, the customer's cart, and make changes.", - // Shown on the right-hand side of the page. - codeblock: { - // Shared for each code tab. - title: '', - // Use `generateCodeTabs(name)` to ensure you have both "JavaScript" and "React" examples available. - tabs: getExtensionCodeTabs('default'), - }, - }, - generic: { - description: '', - codeblock: { - title: '', - tabs: getExtensionCodeTabs('default'), - }, - }, - ...createExample('purchase.address-autocomplete.suggest/default'), - ...createExample('purchase.address-autocomplete.format-suggestion/default'), - ...createExample( - 'purchase.checkout.pickup-location-option-item.render-after/default', - ), - ...createExample( - 'purchase.checkout.shipping-option-item.details.render/default', - ), - ...createExample( - 'purchase.checkout.shipping-option-item.render-after/default', - ), - ...createExample( - 'purchase.checkout.shipping-option-list.render-after/default', - ), - ...createExample( - 'purchase.checkout.shipping-option-list.render-before/default', - ), - ...createExample('purchase.checkout.chat.render/default'), - ...createExample('purchase.thank-you.chat.render/default'), - ...createExample('purchase.thank-you.announcement.render/default'), - 'analytics-publish': { - description: - 'You can publish analytics events to the Shopify analytics frameworks and they will be propagated to all web pixels on the page.', - codeblock: { - title: 'Publish', - tabs: getExtensionCodeTabs('analytics-publish'), - }, - }, - 'analytics-visitor': { - description: - 'You can submit visitor information to Shopify, these will be sent to the shop backend and not be propagated to web pixels on the page.', - codeblock: { - title: 'Visitor', - tabs: getExtensionCodeTabs('analytics-visitor'), - }, - }, - // For examples specific to extension targets that differ from the StandardApi, organize them into folders (/). - 'cart-line-item/default': { - description: '', - codeblock: { - title: '', - tabs: getExtensionCodeTabs('cart-line-item/default'), - }, - }, - 'pickup-point-list/default': { - description: '', - codeblock: { - title: 'Determine if the location input form is shown', - tabs: getExtensionCodeTabs('pickup-point-list/default'), - }, - }, - 'shipping-option-item/default': { - description: '', - codeblock: { - title: 'Reading the selected shipping option', - tabs: getExtensionCodeTabs('shipping-option-item/default'), - }, - }, - 'pickup-location-list/default': { - description: '', - codeblock: { - title: '', - tabs: getExtensionCodeTabs('pickup-location-list/default'), - }, - }, - 'purchase.checkout.pickup-location-option-item.render-after/default': { - description: '', - codeblock: { - title: 'Reading the selected pickup location option', - tabs: getExtensionCodeTabs( - 'purchase.checkout.pickup-location-option-item.render-after/default', - ), - }, - }, - 'order-confirmation/default': { - description: '', - codeblock: { - title: 'Order confirmation', - tabs: getExtensionCodeTabs('order-confirmation/default'), - }, - }, - 'checkout/default': { - description: '', - codeblock: { - title: '', - tabs: getExtensionCodeTabs('checkout/default'), - }, - }, - api: { - description: ` -The extension API is passed as a parameter to the extension target function. -In React, you can access it from any component through the \`useApi()\` hook. - `, - codeblock: { - title: 'Accessing Properties', - tabs: getExtensionCodeTabs('api'), - }, - }, - 'extension-api': { - description: ` -The extension API is passed as a parameter to the extension target function. -In React, you can access it from any component through the \`useExtensionApi()\` hook. - `, - codeblock: { - title: 'Accessing Properties', - tabs: getExtensionCodeTabs('extension-api'), - }, - }, - 'api-subscribable': { - description: ` -Some API properties may change after the extension is rendered. -With Preact, any time you access \`.value\`, your extension components will re-render automatically when values change. -Without Preact, you'll need to call \`.subscribe()\` and render a new UI as values change. -`, - codeblock: { - title: 'Subscribing to changes', - tabs: getExtensionCodeTabs('api-subscribable'), - }, - }, - translate: { - description: ` -Define strings in JSON files for each locale and render them using \`translate()\`. -See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information. - `, - codeblock: { - title: 'Translating strings', - tabs: [ - ...getExtensionCodeTabs('translate'), - ...[ - { - code: `${examplePath}/translate.locale.example.json`, - language: 'json', - title: 'locales/en.default.json', - }, - ], - ], - }, - }, - 'translate-pluralization': { - description: ` -You can use the \`count\` option to get a pluralized string based on the current locale. -See [localizing UI extensions](/docs/apps/checkout/best-practices/localizing-ui-extensions) for more information. - `, - codeblock: { - title: 'Translating strings with pluralization', - tabs: [ - ...getExtensionCodeTabs('translate-pluralization'), - ...[ - { - code: `${examplePath}/translate-pluralization.locale.example.json`, - language: 'json', - title: 'locales/en.default.json', - }, - ], - ], - }, - }, - 'extension-targets': { - description: '', - codeblock: { - title: '', - tabs: [ - ...getExtensionCodeTabs('extension-targets'), - { - code: `${examplePath}/extension-targets.example.toml`, - language: 'toml', - title: 'shopify.extension.toml', - }, - ], - }, - }, - settings: { - description: ` -You can define settings that merchants can edit within the checkout editor. -See [settings](/docs/api/checkout-ui-extensions/configuration#settings-definition) for more information on how to define these. - `, - codeblock: { - title: 'Define merchant settings', - tabs: [ - { - code: `${examplePath}/settings.example.toml`, - language: 'toml', - title: 'shopify.extension.toml', - }, - ], - }, - }, - 'settings-access': { - description: ` -You can retrieve settings values within your extension. In React, the \`useSettings()\` hook re-renders your extension with the latest values. -In JavaScript, subscribe to changes and update your UI directly. - `, - codeblock: { - title: 'Accessing merchant settings', - tabs: getExtensionCodeTabs('settings-access'), - }, - }, - 'storefront-query-api': { - description: ` -You can access the [Storefront GraphQL API](/docs/api/storefront) via the \`query()\` helper function. -Ensure your extension can use this API by [enabling the \`api_access\` capability](/docs/api/checkout-ui-extensions/configuration#api-access). - `, - codeblock: { - title: 'Access the Storefront API with query', - tabs: getExtensionCodeTabs('query-default'), - }, - }, - 'storefront-query-with-fetch': { - description: ` -You can access the [Storefront GraphQL API](/docs/api/storefront) using global \`fetch()\`. -Ensure your extension can access the Storefront API via the [\`api_access\` capability](/docs/api/checkout-ui-extensions/configuration#api-access). - -The \`shopify:storefront\` protocol will automatically infer your Storefront URL and API version declared in your extension config. - -By omitting the API version (recommended), Shopify will use your API version configured in \`shopify.extension.toml\`. To change the API version, simply add it to the URL like \`shopify:storefront/api/2024-04/graphql.json\`. - -See [Storefront GraphQL API endpoints](/docs/api/storefront#endpoints) for more information. - `, - codeblock: { - title: 'Accessing the Storefront API with fetch()', - tabs: getExtensionCodeTabs('query-fetch'), - }, - }, - 'buyer-journey-intercept/page-level-error': { - description: `Intercept and prevent a buyer's progress through checkout while displaying an error message at the page level. - See the [validation tutorial](/docs/apps/checkout/validation) for more examples and best practices.`, - codeblock: { - title: 'Block progress and show error at page level', - tabs: getExtensionCodeTabs('buyer-journey-intercept/page-level-error'), - }, - }, - 'buyer-journey-intercept/target-native-field': { - description: `Intercept and prevent a buyer's progress through checkout while targeting a specific checkout UI field. - See the [validation tutorial](/docs/apps/checkout/validation) for more examples and best practices.`, - codeblock: { - title: 'Block progress and show error for a checkout UI field', - tabs: getExtensionCodeTabs( - 'buyer-journey-intercept/target-native-field', - ), - }, - }, - 'buyer-journey-intercept/extension-banner': { - description: `Intercept and prevent a buyer's progress through checkout while displaying an error message in your extension. - See the [validation tutorial](/docs/apps/checkout/validation) for more examples and best practices.`, - codeblock: { - title: 'Block progress and show error in your extension', - tabs: getExtensionCodeTabs('buyer-journey-intercept/extension-banner'), - }, - }, - 'payments/use-available-payment-options': { - description: '', - codeblock: { - title: 'Available payment options', - tabs: getExtensionCodeTabs('payments/use-available-payment-options'), - }, - }, - 'payments/use-selected-payment-options': { - description: '', - codeblock: { - title: 'Selected payment options', - tabs: getExtensionCodeTabs('payments/use-selected-payment-options'), - }, - }, - 'customer-privacy/default': { - description: '', - codeblock: { - title: 'Read Customer Privacy', - tabs: getExtensionCodeTabs('customer-privacy/default'), - }, - }, - 'customer-privacy/sheet-consent-banner-with-form': { - description: ` -You can apply changes to customer consent by using the \`applyTrackingConsentChanges\` API. - -> Note: Requires the [\`customer_privacy\` capability](https://shopify.dev/docs/api/checkout-ui-extensions/latest/configuration#collect-buyer-consent) to be set to \`true\`.`, - codeblock: { - title: 'Use a Sheet to manage customer privacy consent', - tabs: getExtensionCodeTabs( - 'customer-privacy/sheet-consent-banner-with-form', - ), - }, - }, - subscription: { - description: '', - codeblock: { - title: 'Subscribing to changes', - tabs: getExtensionCodeTabs('subscription'), - }, - }, - 'localized-fields/default': { - description: '', - codeblock: { - title: 'Read localized fields', - tabs: getExtensionCodeTabs('localized-fields/default'), - }, - }, - 'session-token': { - description: ` -You can request a session token from Shopify to use on your application server. The contents of the token claims are signed using your shared app secret so you can trust the claims came from Shopify unaltered. - -> Note: You will need to [enable the \`network_access\` capability](/docs/api/checkout-ui-extensions/configuration#network-access) to use \`fetch()\`. -`, - codeblock: { - title: 'Using a session token with fetch()', - tabs: getExtensionCodeTabs('session-token'), - }, - }, - 'session-token-jwt': { - description: ` -The contents of the token are signed using your shared app secret. The optional \`sub\` claim contains the customer's \`gid\` if they are logged in and your app has permission to read customer accounts. For example, a loyalty app that needs to check a customer's point balance can use the \`sub\` claim to verify the customer's account. - -> Caution: -> Your app server can only trust the claims within the session token. It cannot use the token to trust the entire HTTP request. See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) for details. -`, - codeblock: { - title: 'Session token claims', - tabs: [ - { - code: `${examplePath}/session-token-jwt.example.json`, - language: 'json', - title: 'session-token.jwt', - }, - ], - }, - }, - storage: { - description: '', - codeblock: { - title: 'Storage', - tabs: getExtensionCodeTabs('storage'), - }, - }, - 'delivery-groups': { - description: '', - codeblock: { - title: 'Delivery groups', - tabs: getExtensionCodeTabs('delivery-groups'), - }, - }, - 'delivery-group': { - description: '', - codeblock: { - title: 'Delivery group', - tabs: getExtensionCodeTabs('delivery-group'), - }, - }, - 'attribute-values': { - description: '', - codeblock: { - title: 'Attribute values', - tabs: getExtensionCodeTabs('attribute-values'), - }, - }, - 'attributes/attribute-change': { - description: - 'You can add or remove cart and checkout attributes by using the `applyAttributeChange` API.', - codeblock: { - title: 'Applying changes to attributes', - tabs: getExtensionCodeTabs('attributes/attribute-change'), - }, - }, - ...createExample('cart-instructions/attributes', { - title: 'Attributes', - description: ` - Check \`instructions.attributes.canUpdateAttributes\` before calling \`applyAttributeChange()\`. - `, - }), - ...createExample('cart-instructions/cart-lines-add', { - title: 'Lines', - description: ` - Check \`instructions.lines.canAddCartLine\` or \`instructions.lines.canRemoveCartLine\` or \`instructions.lines.canUpdateCartLine\` before calling \`applyCartLinesChange()\`. - `, - }), - ...createExample('cart-instructions/delivery', { - title: 'Delivery', - description: ` - Check \`instructions.delivery.canSelectCustomAddress\` before calling \`applyShippingAddressChange()\`. When \`true\`, this instruction implies that extensions can change the shipping address. - `, - }), - ...createExample('cart-instructions/discounts', { - title: 'Discounts', - description: ` - Check \`instructions.discounts.canUpdateDiscountCodes\` before calling \`applyDiscountCodeChange()\`. - `, - }), - ...createExample('cart-instructions/metafields', { - title: 'Metafields', - description: ` - Check \`instructions.metafields.canSetCartMetafields\` or \`instructions.metafields.canDeleteCartMetafields\` before calling \`applyMetafieldChange()\` if you are working with cart metafields. - `, - }), - ...createExample('cart-instructions/notes', { - title: 'Notes', - description: ` - Check \`instructions.notes.canUpdateNote\` before calling \`applyNoteChange()\`. - `, - }), - ...createExample('metafields/default', { - title: 'Use app owned metafields', - description: - 'Use the `$app` format to request metafields that are owned by your app in your extension configuration file. Your app exclusively controls structure, data, permissions and optional features for this type of metafield. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.', - }), - }; -} - -const links: Record = { - apis: [ - { - name: 'Targets', - subtitle: 'Reference', - url: '/docs/api/checkout-ui-extensions/targets', - type: 'blocks', - }, - { - name: 'Components', - subtitle: 'Reference', - url: '/docs/api/checkout-ui-extensions/components', - type: 'apps', - }, - { - name: 'Configuration', - subtitle: 'Reference', - url: '/docs/api/checkout-ui-extensions/configuration', - type: 'gear', - }, - { - name: 'Tutorials', - subtitle: 'Learn', - url: '/apps/checkout', - type: 'tutorial', - }, - ], - configuration: [ - { - name: 'Configuration', - subtitle: 'Overview', - url: '/docs/api/checkout-ui-extensions/configuration', - type: 'gear', - }, - { - name: 'Settings Definition', - subtitle: 'Configuration', - url: '/docs/api/checkout-ui-extensions/configuration#settings-definition', - type: 'gear', - }, - { - name: 'Settings Examples', - subtitle: 'APIs', - url: '/docs/api/checkout-ui-extensions/apis/standardapi#example-settings', - type: 'gear', - }, - ], - targets: [ - { - name: 'APIs', - subtitle: 'Reference', - url: '/docs/api/checkout-ui-extensions/targets', - type: 'blocks', - }, - { - name: 'Components', - subtitle: 'Reference', - url: '/docs/api/checkout-ui-extensions/components', - type: 'apps', - }, - { - name: 'Configuration', - subtitle: 'Reference', - url: '/docs/api/checkout-ui-extensions/configuration', - type: 'gear', - }, - { - name: 'Tutorials', - subtitle: 'Learn', - url: '/apps/checkout', - type: 'tutorial', - }, - ], -}; - -/** - * Returns an array of `LinkType` that can be used as related links on an entity. - * This uses a tag structure to allow you to group links together. - * You can optionally exclude a specific type of link from the results - */ -export function getLinksByTag( - name: string, - excludeLinkName?: string, -): LinkType[] { - const linksByTag = links[name]; - if (!linksByTag) { - throw new HelperDocsError( - `Could not find a matching tag with the name "${name}". Does it exist within the file "docs/reference/helper.docs.ts"?`, - ); - } - if (excludeLinkName) { - return linksByTag.filter((link) => link.name !== excludeLinkName); - } - - return linksByTag; -} - -/** - * Returns a specific `Example` by name, as specified in `getExamples()`. - * Specify whether you want to include both `js` and `jsx`examples or just one. - */ -export function getExample( - name: string, - languages: NonEmptyArray = ['js'], -): ExampleType { - const example = getExamples(languages)[name]; - if (!example) { - throw new HelperDocsError( - `Could not find a matching example with the name "${name}". Does it exist within the file "docs/reference/helper.docs.ts" in getExamples()?`, - ); - } - return example; -} - -/** - * Returns a specific react hook `Example` by name, as specified in `getExamples()`. - */ -export function getHookExample(name: string) { - return getExample(name, ['jsx']); -} - -class HelperDocsError extends Error { - name = 'HelperDocsError'; -} - -const CHECKOUT_API_DEFINITION = { - title: 'CheckoutApi', - description: - 'The API object provided to this and other `purchase.checkout` extension targets.', - type: 'CheckoutApi', -}; - -const STANDARD_API_DEFINITION = { - title: 'StandardApi', - description: - 'The base API object provided to this and other `purchase.checkout` and `purchase.thank-you` extension targets.', - type: 'StandardApi', -}; - -const ADDRESS_AUTOCOMPLETE_STANDARD_API_DEFINITION = { - title: 'AddressAutocompleteStandardApi', - description: - 'The base API object provided to this and other `purchase.address-autocomplete` extension targets.', - type: 'AddressAutocompleteStandardApi', -}; - -const ADDRESS_AUTOCOMPLETE_SUGGEST_API_DEFINITION = { - title: 'AddressAutocompleteSuggestApi', - description: - 'The API object provided to the `purchase.address-autocomplete.suggest` extension target.', - type: 'AddressAutocompleteSuggestApi', -}; - -const ADDRESS_AUTOCOMPLETE_SUGGEST_OUTPUT_DEFINITION = { - title: 'AddressAutocompleteSuggestOutput', - description: - 'The object expected to be returned by the `purchase.address-autocomplete.suggest` extension target.', - type: 'AddressAutocompleteSuggestOutput', -}; - -const ADDRESS_AUTOCOMPLETE_FORMAT_SUGGESTION_API_DEFINITION = { - title: 'AddressAutocompleteFormatSuggestionApi', - description: - 'The API object provided to the `purchase.address-autocomplete.format-suggestion` extension target.', - type: 'AddressAutocompleteFormatSuggestionApi', -}; - -const ADDRESS_AUTOCOMPLETE_FORMAT_SUGGESTION_OUTPUT_DEFINITION = { - title: 'AddressAutocompleteFormatSuggestionOutput', - description: - 'The object expected to be returned by the `purchase.address-autocomplete.format-suggestion` extension target.', - type: 'AddressAutocompleteFormatSuggestionOutput', -}; - -const CART_LINE_ITEM_API_DEFINITION = { - title: 'CartLineItemApi', - description: - 'The API object provided to this and other `cart-line-item` extension targets.', - type: 'CartLineItemApi', -}; - -const ORDER_CONFIRMATION_API_DEFINITION = { - title: 'OrderConfirmationApi', - description: - 'The API object provided to this and other `purchase.thank-you` extension targets.', - type: 'OrderConfirmationApi', -}; - -const PICKUP_LOCATION_LIST_API_DEFINITION = { - title: 'PickupLocationListApi', - description: - 'The API object provided to this and other `pickup-location-list` extension targets.', - type: 'PickupLocationListApi', -}; - -const PICKUP_LOCATION_ITEM_API_DEFINITION = { - title: 'PickupLocationItemApi', - description: - 'The API object provided to this and other `pickup-location-option-item` extension targets.', - type: 'PickupLocationItemApi', -}; - -const PICKUP_POINT_LIST_API_DEFINITION = { - title: 'PickupPointListApi', - description: - 'The API object provided to this and other `pickup-point-list` extension targets.', - type: 'PickupPointListApi', -}; - -const SHIPPING_OPTION_ITEM_API_DEFINITION = { - title: 'ShippingOptionItemApi', - description: - 'The API object provided to this and other `shipping-option-item` extension targets.', - type: 'ShippingOptionItemApi', -}; - -const SHIPPING_OPTION_LIST_API_DEFINITION = { - title: 'ShippingOptionListApi', - description: - 'The API object provided to this and other `shipping-option-list` extension targets.', - type: 'ShippingOptionListApi', -}; - -const COMMON_API = { - category: 'Targets', - isVisualComponent: false, - requires: REQUIRES_PROTECTED_CUSTOMER_DATA, - type: 'Target', -}; - -export const STANDARD_API = { - definitions: [STANDARD_API_DEFINITION], - ...COMMON_API, -}; - -export const CHECKOUT_API = { - definitions: [CHECKOUT_API_DEFINITION, STANDARD_API_DEFINITION], - ...COMMON_API, -}; - -export const ADDRESS_AUTOCOMPLETE_SUGGEST_API = { - definitions: [ - ADDRESS_AUTOCOMPLETE_SUGGEST_API_DEFINITION, - ADDRESS_AUTOCOMPLETE_SUGGEST_OUTPUT_DEFINITION, - ADDRESS_AUTOCOMPLETE_STANDARD_API_DEFINITION, - ], - ...COMMON_API, -}; - -export const ADDRESS_AUTOCOMPLETE_FORMAT_SUGGESTION_API = { - definitions: [ - ADDRESS_AUTOCOMPLETE_FORMAT_SUGGESTION_API_DEFINITION, - ADDRESS_AUTOCOMPLETE_FORMAT_SUGGESTION_OUTPUT_DEFINITION, - ADDRESS_AUTOCOMPLETE_STANDARD_API_DEFINITION, - ], - ...COMMON_API, -}; - -export const CART_LINE_ITEM_API = { - subCategory: 'Order Summary', - definitions: [CART_LINE_ITEM_API_DEFINITION, STANDARD_API_DEFINITION], - ...COMMON_API, -}; - -export const CHECKOUT_CART_LINE_ITEM_API = { - subCategory: CART_LINE_ITEM_API.subCategory, - definitions: [ - CART_LINE_ITEM_API_DEFINITION, - CHECKOUT_API_DEFINITION, - STANDARD_API_DEFINITION, - ], - ...COMMON_API, -}; - -export const THANK_YOU_API = { - definitions: [ORDER_CONFIRMATION_API_DEFINITION, STANDARD_API_DEFINITION], - ...COMMON_API, -}; - -export const THANK_YOU_CART_LINE_ITEM_API = { - subCategory: 'Order Summary', - definitions: [ - ORDER_CONFIRMATION_API_DEFINITION, - CART_LINE_ITEM_API_DEFINITION, - STANDARD_API_DEFINITION, - ], - ...COMMON_API, -}; - -export const PICKUP_LOCATION_LIST_API = { - subCategory: 'Local Pickup', - definitions: [ - PICKUP_LOCATION_LIST_API_DEFINITION, - CHECKOUT_API_DEFINITION, - STANDARD_API_DEFINITION, - ], - ...COMMON_API, -}; - -export const PICKUP_LOCATION_ITEM_API = { - subCategory: 'Local Pickup', - definitions: [ - PICKUP_LOCATION_ITEM_API_DEFINITION, - CHECKOUT_API_DEFINITION, - STANDARD_API_DEFINITION, - ], - ...COMMON_API, -}; - -export const PICKUP_POINT_LIST_API = { - subCategory: 'Pickup Points', - definitions: [ - PICKUP_POINT_LIST_API_DEFINITION, - CHECKOUT_API_DEFINITION, - STANDARD_API_DEFINITION, - ], - ...COMMON_API, -}; - -export const SHIPPING_OPTION_ITEM_API = { - subCategory: 'Shipping', - definitions: [ - SHIPPING_OPTION_ITEM_API_DEFINITION, - CHECKOUT_API_DEFINITION, - STANDARD_API_DEFINITION, - ], - ...COMMON_API, -}; - -export const SHIPPING_OPTION_LIST_API = { - subCategory: 'Shipping', - definitions: [ - SHIPPING_OPTION_LIST_API_DEFINITION, - CHECKOUT_API_DEFINITION, - STANDARD_API_DEFINITION, - ], - ...COMMON_API, -}; - -export const STANDARD_API_PROPERTIES_DESCRIPTION = - 'The base API object provided to `purchase` extension targets.'; - -export const CHECKOUT_API_PROPERTIES_DESCRIPTION = - 'The API object provided to `purchase.checkout` extension targets.'; - -export const ORDER_CONFIRMATION_API_PROPERTIES_DESCRIPTION = - 'The API object provided to `purchase.thank-you` extension targets.'; - -export const ORDER_STATUS_API_PROPERTIES_DESCRIPTION = - '> Note: This documentation has moved to customer accounts. Refer to [Order API](/docs/api/customer-account-ui-extensions/apis/order)'; diff --git a/packages/ui-extensions/src/docs/shared/component-definitions.ts b/packages/ui-extensions/src/docs/shared/component-definitions.ts deleted file mode 100644 index a8307619b9..0000000000 --- a/packages/ui-extensions/src/docs/shared/component-definitions.ts +++ /dev/null @@ -1,190 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -const CHECKOUT_PATH = - '/docs/api/checkout-ui-extensions/latest/using-polaris-components'; - -interface DefinitionsConfiguration { - properties?: boolean; - events?: boolean; - slots?: boolean; - methods?: boolean; -} - -interface ComponentDoc { - name: ReferenceEntityTemplateSchema['name']; - description: ReferenceEntityTemplateSchema['description']; - category: ReferenceEntityTemplateSchema['category']; - related?: ReferenceEntityTemplateSchema['related']; - requires?: ReferenceEntityTemplateSchema['requires']; - type?: ReferenceEntityTemplateSchema['type']; - isVisualComponent?: ReferenceEntityTemplateSchema['isVisualComponent']; - definitions: DefinitionsConfiguration; - subcomponent?: { - name: ReferenceEntityTemplateSchema['name']; - description?: ReferenceEntityTemplateSchema['description']; - definitions: DefinitionsConfiguration; - }; - usefulFor?: string; - considerations?: string; - bestPractices?: string; - subCategory?: ReferenceEntityTemplateSchema['subCategory']; - extraContent?: ReferenceEntityTemplateSchema['subSections']; - extraExamples?: ReferenceEntityTemplateSchema['examples']; -} - -function toPascalCase(name: string): string { - return name - .split(' ') - .map((word) => word.charAt(0).toUpperCase() + word.slice(1)) - .join(''); -} - -function buildDefinitions({ - name, - description, - definitions, -}: { - name: string; - description?: string; - definitions: DefinitionsConfiguration; -}) { - const typeName = toPascalCase(name); - - return [ - ...(description - ? [ - { - title: `${name}`, - description, - type: `${typeName}ElementProps`, - }, - ] - : []), - - ...(!description && definitions.properties - ? [ - { - title: 'Properties', - description: '', - type: `${typeName}ElementProps`, - }, - ] - : []), - - ...(definitions.events - ? [ - { - title: 'Events', - description: `Learn more about [registering events](${CHECKOUT_PATH}#event-handling).`, - type: `${typeName}ElementEvents`, - }, - ] - : []), - - ...(definitions.slots - ? [ - { - title: 'Slots', - description: `Learn more about [component slots](${CHECKOUT_PATH}#slots).`, - type: `${typeName}ElementSlots`, - }, - ] - : []), - - ...(definitions.methods - ? [ - { - title: 'Methods', - description: `Learn more about [component methods](${CHECKOUT_PATH}#methods).`, - type: `${typeName}ElementMethods`, - }, - ] - : []), - ]; -} - -export function createComponentDoc({ - name, - description, - category, - related = [], - requires = '', - type = '', - subCategory = '', - isVisualComponent = true, - definitions, - subcomponent, - usefulFor, - considerations, - bestPractices, - extraContent = [], - extraExamples, -}: ComponentDoc): ReferenceEntityTemplateSchema { - const kebabCasedName = name - .replace(/\s+/g, '-') - .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2') - .replace(/([a-z])([A-Z])/g, '$1-$2') - .toLowerCase(); - - return { - name, - description, - category, - related, - isVisualComponent, - thumbnail: `${kebabCasedName}-thumbnail.png`, - requires, - type, - subCategory, - definitions: [ - ...buildDefinitions({name, definitions}), - ...(subcomponent ? buildDefinitions(subcomponent) : []), - ], - defaultExample: { - image: `${kebabCasedName}-default.png`, - codeblock: { - title: 'Code', - tabs: [ - { - code: `./examples/basic-${kebabCasedName}.example.html`, - language: 'html', - }, - ], - }, - }, - examples: extraExamples, - subSections: [ - ...(usefulFor - ? [ - { - title: 'Useful for', - type: 'Generic' as const, - anchorLink: 'useful-for', - sectionContent: usefulFor, - }, - ] - : []), - ...(considerations - ? [ - { - title: 'Considerations', - type: 'Generic' as const, - anchorLink: 'considerations', - sectionContent: considerations, - }, - ] - : []), - ...(bestPractices - ? [ - { - type: 'Generic' as const, - anchorLink: 'best-practices', - title: 'Best Practices', - sectionContent: bestPractices, - }, - ] - : []), - ...extraContent, - ], - }; -} diff --git a/packages/ui-extensions/src/docs/shared/components/Abbreviation.ts b/packages/ui-extensions/src/docs/shared/components/Abbreviation.ts deleted file mode 100644 index f738d79aad..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Abbreviation.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Abbreviation', - description: - 'Displays abbreviated text or acronyms, revealing their full meaning or additional context through a tooltip on hover or focus. Use to clarify shortened terms, initialisms, or technical language without interrupting the reading flow.', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Announcement.ts b/packages/ui-extensions/src/docs/shared/components/Announcement.ts deleted file mode 100644 index 735e4ee2ee..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Announcement.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Announcement', - description: - 'The Announcement component provides a less disruptive alternative to auto-open modals for capturing user attention. It provides a standardized way to engage users without being too intrusive.', - category: 'Web components', - subCategory: 'Feedback and status indicators', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Avatar.ts b/packages/ui-extensions/src/docs/shared/components/Avatar.ts deleted file mode 100644 index 8732aab8c6..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Avatar.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Avatar', - description: - "The avatar component displays profile images or initials for users, customers, and businesses in a compact visual format. Use avatar to represent people or entities throughout the interface, with automatic fallback to initials when images aren't available." + - '\n\nAvatars support multiple sizes for different contexts and provide consistent color assignment for initials based on the name provided. For product or content preview images, use [thumbnail](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/thumbnail). For full-size images, use [image](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/image).', - category: 'Web components', - subCategory: 'Media and visuals', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Badge.ts b/packages/ui-extensions/src/docs/shared/components/Badge.ts deleted file mode 100644 index 39539b4594..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Badge.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Badge', - description: - 'The badge component displays status information or indicates completed actions through compact visual indicators. Use badge to communicate object states, order statuses, or system-generated classifications that help users quickly understand item conditions.' + - '\n\nBadges support multiple tones and sizes, with optional icons to reinforce status meaning and improve scannability in lists and tables. For user-created labels, categories, or tags, use [chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/chip) instead.', - category: 'Web components', - subCategory: 'Feedback and status indicators', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Banner.ts b/packages/ui-extensions/src/docs/shared/components/Banner.ts deleted file mode 100644 index 547f94fc24..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Banner.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Banner', - description: - 'The banner component highlights important information or required actions prominently within the interface. Use banner to communicate statuses, provide feedback, draw attention to critical updates, or guide users toward necessary actions.' + - '\n\nBanners support multiple tones to convey urgency levels, optional actions for next steps, and can be positioned contextually within sections or page-wide at the top. For inline status indicators on individual items, use [badge](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/badge).', - category: 'Web components', - subCategory: 'Feedback and status indicators', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Box.ts b/packages/ui-extensions/src/docs/shared/components/Box.ts deleted file mode 100644 index 1fda1e9919..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Box.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Box', - description: - "The box component provides a generic, flexible container for custom designs and layouts. Use box to apply styling like backgrounds, padding, borders, or border radius when existing components don't meet your needs, or to nest and group other components." + - '\n\nBox contents maintain their natural size, making it especially useful within layout components that would otherwise stretch their children. For structured layouts, use [stack](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/stack) or [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid).', - category: 'Web components', - subCategory: 'Layout and structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Button.ts b/packages/ui-extensions/src/docs/shared/components/Button.ts deleted file mode 100644 index 139327551e..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Button.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Button', - description: - 'The button component triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use buttons to let users perform specific tasks or initiate interactions throughout the interface.' + - '\n\nButtons support various visual styles, tones, and interaction patterns to communicate intent and hierarchy. They can also function as links, guiding users to internal or external destinations. For navigation-focused interactions within text, use [link](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/link). For grouping multiple related buttons, use [button group](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button-group).', - category: 'Web components', - subCategory: 'Actions', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ButtonGroup.ts b/packages/ui-extensions/src/docs/shared/components/ButtonGroup.ts deleted file mode 100644 index a5166ee4c3..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ButtonGroup.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Button group', - description: - 'The button group component displays multiple related buttons in a structured layout. Use button group to organize action buttons together, creating clear visual hierarchies and helping users understand available options.' + - '\n\nButton groups support various layouts including segmented appearances for tightly related options like view switching or filter controls. For individual actions, use [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button).', - category: 'Web components', - subCategory: 'Actions', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Checkbox.ts b/packages/ui-extensions/src/docs/shared/components/Checkbox.ts deleted file mode 100644 index eea117c7b1..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Checkbox.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Checkbox', - description: - 'The checkbox component provides a clear way for users to make selections, such as agreeing to terms, enabling settings, or choosing multiple items from a list. Use checkbox to create binary on/off controls or multi-select interfaces where users can select any combination of options.' + - '\n\nCheckboxes support labels, help text, error states, and an indeterminate state for "select all" functionality when working with grouped selections. For settings that take effect immediately, use [switch](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/switch) instead.', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Chip.ts b/packages/ui-extensions/src/docs/shared/components/Chip.ts deleted file mode 100644 index ea74dea527..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Chip.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Chip', - description: - 'The chip component displays static labels, categories, or attributes that help classify and organize content. Use chip to show product tags, categories, or metadata near the items they describe, helping users identify items with similar properties.' + - '\n\nChips support multiple visual variants for different levels of emphasis and can include icons to provide additional visual context. For system-generated status indicators, use [badge](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/badge). For interactive or removable chips, use [clickable chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/clickable-chip).', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Choice.ts b/packages/ui-extensions/src/docs/shared/components/Choice.ts deleted file mode 100644 index d8053c56f3..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Choice.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Choice', - 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.' + - '\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ChoiceList.ts b/packages/ui-extensions/src/docs/shared/components/ChoiceList.ts deleted file mode 100644 index a901315599..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ChoiceList.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Choice list', - description: - 'The choice list component presents multiple options for single or multiple selections. Use it when merchants need to choose from a defined set of options, such as filtering results or collecting preferences.' + - '\n\nThe component supports both single selection (radio button behavior) and multiple selection (checkbox behavior) modes. It includes configurable labels, help text, and validation. For compact dropdown selection with four or more options, use [select](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/select).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Clickable.ts b/packages/ui-extensions/src/docs/shared/components/Clickable.ts deleted file mode 100644 index b40401d9d2..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Clickable.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Clickable', - description: - 'The clickable component wraps content to make it interactive and clickable. Use it when you need more styling control than [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) or [link](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/link) provide, such as custom backgrounds, padding, or borders around your clickable content.' + - '\n\nClickable supports button, link, and submit modes with built-in accessibility properties for keyboard navigation and screen reader support.', - category: 'Web components', - subCategory: 'Actions', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ClickableChip.ts b/packages/ui-extensions/src/docs/shared/components/ClickableChip.ts deleted file mode 100644 index 4f36ff942d..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ClickableChip.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Clickable chip', - description: - 'The clickable chip component displays interactive labels or categories that users can click or remove. Use clickable chip to show filter tags, selected options, or merchant-created labels that users need to interact with or dismiss.' + - '\n\nClickable chips support multiple visual variants, optional icons, and can function as both clickable buttons and removable tags for flexible interaction patterns. For non-interactive labels, use [chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/chip).', - category: 'Web components', - subCategory: 'Actions', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts b/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts deleted file mode 100644 index 194d4076d1..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ClipboardItem.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Clipboard item', - description: - 'Enables copying text to the user’s clipboard. Use alongside Button or Link components to let users easily copy content. `` doesn’t render visually.', - category: 'Web components', - subCategory: 'Actions', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ColorField.ts b/packages/ui-extensions/src/docs/shared/components/ColorField.ts deleted file mode 100644 index 6403e774b6..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ColorField.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Color field', - description: - 'The color field component allows users to select colors through an integrated color picker or direct text input. Use color field for theme colors, brand colors, or any color selection to provide both visual and text-based color input methods.' + - '\n\nColor fields support hex color codes, color preview swatches, and validation to ensure users select or enter valid color values. For a standalone visual color palette interface without text input, use [color picker](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/color-picker).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ColorPicker.ts b/packages/ui-extensions/src/docs/shared/components/ColorPicker.ts deleted file mode 100644 index bb087bdaf3..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ColorPicker.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Color picker', - description: - 'The color picker component allows users to select colors from a visual color palette interface. Use color picker to provide an intuitive, visual way for users to choose colors for themes, branding, or design customization.' + - '\n\nColor pickers support multiple color formats, predefined color swatches, and interactive selection to make color choice easy and accurate. For combined visual and text-based color input with validation, use [color field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/color-field).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ConsentCheckbox.ts b/packages/ui-extensions/src/docs/shared/components/ConsentCheckbox.ts deleted file mode 100644 index 0297894dd5..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ConsentCheckbox.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Consent checkbox', - description: - 'Use buyer consent checkboxes for collecting the buyer’s approval for a given policy.', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ConsentPhoneField.ts b/packages/ui-extensions/src/docs/shared/components/ConsentPhoneField.ts deleted file mode 100644 index e57a028c5c..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ConsentPhoneField.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Consent phone field', - description: - 'Display a phone field for customers to sign up for text message marketing, noting that the phone field value will be automatically saved during checkout.', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/DateField.ts b/packages/ui-extensions/src/docs/shared/components/DateField.ts deleted file mode 100644 index 64d672b461..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/DateField.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Date field', - description: - 'The date field component captures date input with a consistent interface for date selection and proper validation. Use it to collect date information in forms, scheduling interfaces, or data entry workflows.' + - '\n\nThe component supports manual text entry. For visual calendar-based selection, consider using [date picker](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/date-picker).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/DatePicker.ts b/packages/ui-extensions/src/docs/shared/components/DatePicker.ts deleted file mode 100644 index a42cffdabf..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/DatePicker.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Date picker', - description: - 'The date picker component allows merchants to select dates using a calendar interface. Use it when merchants benefit from seeing dates in context of the full month, such as selecting dates relative to today or needing weekday context.' + - '\n\nThe component supports single dates, multiple dates, and date ranges. For text date entry, use [date field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/date-field).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Details.ts b/packages/ui-extensions/src/docs/shared/components/Details.ts deleted file mode 100644 index 61ae017b44..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Details.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Details', - description: - 'Creates a collapsible content area that can be expanded or collapsed by users. Use with Summary to provide expandable sections for additional information or settings.', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Divider.ts b/packages/ui-extensions/src/docs/shared/components/Divider.ts deleted file mode 100644 index afd6ea2fc0..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Divider.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Divider', - description: - 'The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping users scan and understand content organization.' + - '\n\nDividers support both horizontal and vertical orientations, along with different visual strengths for varying levels of emphasis. For more structured content grouping with headings, use [section](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/section).', - category: 'Web components', - subCategory: 'Layout and structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/DropZone.ts b/packages/ui-extensions/src/docs/shared/components/DropZone.ts deleted file mode 100644 index b970c78c90..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/DropZone.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Drop zone', - description: - 'The drop zone component lets users upload files through drag-and-drop or by clicking to browse. Use for file uploads such as images, documents, or CSV imports.\n\nThe component provides visual feedback during drag operations and supports file type validation through the `accept` property. Rejected files trigger the `droprejected` event for custom error handling.', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/EmailField.ts b/packages/ui-extensions/src/docs/shared/components/EmailField.ts deleted file mode 100644 index f08d15319f..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/EmailField.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Email field', - description: - 'The email field component captures email address input. Use it to collect email information in forms, customer profiles, or contact workflows.' + - "\n\nEmail field doesn't perform automatic email validation. Implement your own validation logic, and use the `error` property to display validation results. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Form.ts b/packages/ui-extensions/src/docs/shared/components/Form.ts deleted file mode 100644 index 3c1ca35c3c..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Form.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Form', - description: - 'The form component wraps form controls and enables implicit submission, allowing users to submit from any input by pressing **Enter**. Use form to group related input fields and handle form submission through JavaScript event handlers.' + - "\n\nUnlike HTML forms, form doesn't automatically submit data using HTTP—you must register a `submit` event to process form data programmatically. For Shopify Functions configuration forms, use [function settings](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/function-settings).", - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/FunctionSettings.ts b/packages/ui-extensions/src/docs/shared/components/FunctionSettings.ts deleted file mode 100644 index 5c5813a06d..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/FunctionSettings.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Function settings', - description: - 'The function settings component configures metafield settings for [Shopify Functions](/docs/api/functions). Use function settings to create configuration interfaces that allow merchants to customize function behavior through structured input fields and controls.' + - '\n\nThis component provides a standardized layout for settings forms and integrates with the native save bar to handle form submission and reset actions automatically. For general form submission, use [form](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/form).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Grid.ts b/packages/ui-extensions/src/docs/shared/components/Grid.ts deleted file mode 100644 index 999d82038d..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Grid.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Grid', - description: - 'The grid component organizes content in a matrix of rows and columns to create responsive page layouts. Use grid to build complex, multi-column layouts that adapt to different screen sizes and maintain consistent alignment.' + - '\n\nGrid follows the CSS grid layout pattern and supports flexible column configurations, gap spacing, and alignment properties for precise layout control. For simpler linear layouts (horizontal or vertical), use [stack](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/stack).', - category: 'Web components', - subCategory: 'Layout and structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/GridItem.ts b/packages/ui-extensions/src/docs/shared/components/GridItem.ts deleted file mode 100644 index a78c9550f6..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/GridItem.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Grid item', - 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.' + - '\n\nGrid 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.', - category: 'Web components', - subCategory: 'Layout and structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Heading.ts b/packages/ui-extensions/src/docs/shared/components/Heading.ts deleted file mode 100644 index 4ad1ad10f8..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Heading.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Heading', - description: - 'The heading component renders hierarchical titles to communicate the structure and organization of page content. Use heading to create section titles and content headers that help users understand information hierarchy and navigate content.' + - '\n\nHeading levels adjust automatically based on nesting within parent [section](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/section) components, ensuring meaningful and accessible page outlines without manual level management.', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Icon.ts b/packages/ui-extensions/src/docs/shared/components/Icon.ts deleted file mode 100644 index 7cdbafb5b8..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Icon.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Icon', - description: - 'The icon component renders graphic symbols to visually communicate actions, status, and navigation throughout the interface. Use icon to reinforce button actions, indicate status states, or provide wayfinding cues that help users understand available functionality.' + - '\n\nIcons support multiple sizes, tones for semantic meaning, and can be integrated with other components like [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button), [badge](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/badge), and [chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/chip) to enhance visual communication.', - category: 'Web components', - subCategory: 'Media and visuals', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Image.ts b/packages/ui-extensions/src/docs/shared/components/Image.ts deleted file mode 100644 index a9368d71b4..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Image.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Image', - description: - 'The image component embeds images within the interface with control over presentation and loading behavior. Use image to visually illustrate concepts, showcase products, display user content, or support tasks and interactions with visual context.' + - '\n\nImages support responsive sizing, alt text for accessibility, aspect ratio control, and loading states for progressive enhancement. For small preview images in lists or tables, use [thumbnail](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/thumbnail). For profile images, use [avatar](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/avatar).', - category: 'Web components', - subCategory: 'Media and visuals', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Link.ts b/packages/ui-extensions/src/docs/shared/components/Link.ts deleted file mode 100644 index 08ce7ba93a..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Link.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Link', - description: - 'The link component makes text interactive, allowing users to navigate to other pages or perform specific actions. Use link for navigation, external references, or triggering actions while maintaining standard link semantics and accessibility.' + - '\n\nLinks support standard URLs, custom protocols, navigation within Shopify admin pages, and can open in new windows for external destinations. For prominent actions or form submissions, use [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) instead.', - category: 'Web components', - subCategory: 'Actions', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ListItem.ts b/packages/ui-extensions/src/docs/shared/components/ListItem.ts deleted file mode 100644 index c8cbd30bdd..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ListItem.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'List item', - 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.' + - '\n\nList 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.', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Map.ts b/packages/ui-extensions/src/docs/shared/components/Map.ts deleted file mode 100644 index 915e17b79d..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Map.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Map', - description: - 'Use Map to display a map on a page. This component is useful for displaying a map of a location, such as a store or a customer’s address.', - category: 'Web components', - subCategory: 'Media and visuals', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/MapMarker.ts b/packages/ui-extensions/src/docs/shared/components/MapMarker.ts deleted file mode 100644 index f5699c8591..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/MapMarker.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Map marker', - description: - 'Use MapMarker to display a marker on a map. Use only as a child of `s-map` component.', - category: 'Web components', - subCategory: 'Media and visuals', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Menu.ts b/packages/ui-extensions/src/docs/shared/components/Menu.ts deleted file mode 100644 index 6afe27d89e..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Menu.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Menu', - description: - 'The menu component displays a list of actions that can be performed on a resource or within a specific context. Use menu to present multiple related actions in a compact dropdown format, reducing visual clutter while maintaining discoverability.' + - '\n\nMenus support action grouping, icons for visual clarity, and keyboard navigation for efficient interaction.', - category: 'Web components', - subCategory: 'Actions', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Modal.ts b/packages/ui-extensions/src/docs/shared/components/Modal.ts deleted file mode 100644 index 1c732c23d9..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Modal.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Modal', - description: - 'Displays content in an overlay. Use to create a distraction-free experience such as a confirmation dialog or a settings panel.', - category: 'Web components', - subCategory: 'Overlays', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/MoneyField.ts b/packages/ui-extensions/src/docs/shared/components/MoneyField.ts deleted file mode 100644 index afe020f3e4..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/MoneyField.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Money field', - description: - 'The money field component collects monetary values from users with built-in currency formatting and validation. Use money field for prices, costs, or financial amounts to provide proper currency symbols, decimal handling, and numeric validation.' + - '\n\nMoney fields support currency codes, automatic formatting, and min/max constraints to ensure users enter valid monetary values. For non-currency numeric input, use [number field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/number-field).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/NumberField.ts b/packages/ui-extensions/src/docs/shared/components/NumberField.ts deleted file mode 100644 index 36ba5619b8..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/NumberField.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Number field', - description: - 'The number field component captures numeric input with built-in number validation. Use it to collect quantities, prices, or other numeric information.' + - '\n\nThe component supports min/max constraints and step increments for guided numeric entry. For monetary values with currency formatting, use [money field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/money-field).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Option.ts b/packages/ui-extensions/src/docs/shared/components/Option.ts deleted file mode 100644 index 228cf40b40..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Option.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Option', - description: - 'Represents a single option within a select component. Use only as a child of `s-select` components.', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/OptionGroup.ts b/packages/ui-extensions/src/docs/shared/components/OptionGroup.ts deleted file mode 100644 index 2cf18bd655..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/OptionGroup.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Option group', - description: - 'Represents a group of options within a select component. Use only as a child of `s-select` components.', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/OrderedList.ts b/packages/ui-extensions/src/docs/shared/components/OrderedList.ts deleted file mode 100644 index b5023ee7bc..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/OrderedList.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Ordered list', - description: - 'The ordered list component displays a numbered list of related items in a specific sequence. Use ordered list to present step-by-step instructions, ranked items, procedures, or any content where order and sequence matter to understanding.' + - "\n\nOrdered lists automatically number items and support nested lists for hierarchical content organization. For items where order doesn't matter, use [unordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/unordered-list).", - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Page.ts b/packages/ui-extensions/src/docs/shared/components/Page.ts deleted file mode 100644 index 571a3bec75..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Page.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Page', - description: - ' Use `s-page` as the main container for placing content in your app. Page comes with preset layouts and automatically adds spacing between elements.', - category: 'Web components', - subCategory: 'Layout and structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Paragraph.ts b/packages/ui-extensions/src/docs/shared/components/Paragraph.ts deleted file mode 100644 index ecc57bd6a8..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Paragraph.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Paragraph', - description: - 'The paragraph component displays blocks of text content and can contain inline elements like buttons, links, or emphasized text. Use paragraph to present standalone blocks of readable content, descriptions, or explanatory text.' + - '\n\nParagraphs support alignment options and can wrap inline components to create rich, formatted content blocks. For inline text styling, use [text](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/text).', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/PasswordField.ts b/packages/ui-extensions/src/docs/shared/components/PasswordField.ts deleted file mode 100644 index 10ea4cae99..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/PasswordField.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Password field', - description: - 'The password field component securely collects sensitive information from users. Use password field for password entry, where input characters are automatically masked for privacy.' + - '\n\nPassword fields support validation, help text, and accessibility features to create secure and user-friendly authentication experiences. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/PaymentIcon.ts b/packages/ui-extensions/src/docs/shared/components/PaymentIcon.ts deleted file mode 100644 index 11d43499fb..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/PaymentIcon.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Payment icon', - description: - 'Displays icons representing payment methods. Use to visually communicate available or saved payment options clearly', - category: 'Web components', - subCategory: 'Media and visuals', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/PhoneField.ts b/packages/ui-extensions/src/docs/shared/components/PhoneField.ts deleted file mode 100644 index c09099ec55..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/PhoneField.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Phone field', - description: 'Use PhoneField to allow users to enter phone numbers.', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Popover.ts b/packages/ui-extensions/src/docs/shared/components/Popover.ts deleted file mode 100644 index 503224e342..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Popover.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Popover', - description: - 'Popovers are used to display content in an overlay that can be triggered by a button.', - category: 'Web components', - subCategory: 'Overlays', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/PressButton.ts b/packages/ui-extensions/src/docs/shared/components/PressButton.ts deleted file mode 100644 index 6741729177..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/PressButton.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Press button', - description: - 'Allows users to toggle between active/inactive states. Use to represent a persistent on/off or selected/unselected status.', - category: 'Web components', - subCategory: 'Actions', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ProductThumbnail.ts b/packages/ui-extensions/src/docs/shared/components/ProductThumbnail.ts deleted file mode 100644 index 5a710729c3..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ProductThumbnail.ts +++ /dev/null @@ -1,11 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Product thumbnail', - description: 'Use ProductThumbnail to display a product thumbnail', - category: 'Web components', - subCategory: 'Media and visuals', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Progress.ts b/packages/ui-extensions/src/docs/shared/components/Progress.ts deleted file mode 100644 index 3ca05845a3..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Progress.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Progress', - description: - 'Displays an indicator showing the completion status of a task. Use to visually communicate progress in either determinate (known percentage) or indeterminate (unknown duration) states.', - category: 'Web components', - subCategory: 'Feedback and status indicators', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/QRCode.ts b/packages/ui-extensions/src/docs/shared/components/QRCode.ts deleted file mode 100644 index 5481c1f0de..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/QRCode.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'QR code', - description: - 'Displays a scannable QR code representing data such as URLs or text. Use to let users quickly access information by scanning with a smartphone or other device.', - category: 'Web components', - subCategory: 'Media and visuals', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/QueryContainer.ts b/packages/ui-extensions/src/docs/shared/components/QueryContainer.ts deleted file mode 100644 index f8d0874f8c..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/QueryContainer.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Query container', - description: - "The query container component establishes a container query context for responsive design. Use query container to define an element as a containment context, enabling child components or styles to adapt based on the container's size rather than viewport width." + - '\n\nQuery containers support modern responsive patterns where components respond to their container dimensions, creating more flexible and reusable layouts.', - category: 'Web components', - subCategory: 'Layout and structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/ScrollBox.ts b/packages/ui-extensions/src/docs/shared/components/ScrollBox.ts deleted file mode 100644 index 80ea964272..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/ScrollBox.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Scroll box', - description: - 'Provides a scrollable container for long content that exceeds the available space. Use to display lists, order summaries, or other lengthy content while maintaining a constrained layout.', - category: 'Web components', - subCategory: 'Layout and structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/SearchField.ts b/packages/ui-extensions/src/docs/shared/components/SearchField.ts deleted file mode 100644 index ef36f4ac58..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/SearchField.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Search field', - description: - 'The search field component captures search terms for filtering and search functionality. Use it to enable inline search within specific sections or lists, like filtering products or searching customers. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Section.ts b/packages/ui-extensions/src/docs/shared/components/Section.ts deleted file mode 100644 index 21e7796066..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Section.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Section', - description: - 'The section component groups related content into clearly-defined thematic areas with consistent styling and structure. Use section to organize page content into logical blocks, each with its own heading and visual container.' + - '\n\nSections automatically adapt their styling based on nesting depth and adjust heading levels to maintain meaningful, accessible page hierarchies. For simple visual separation without headings, use [divider](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/divider).', - category: 'Web components', - subCategory: 'Layout and structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Select.ts b/packages/ui-extensions/src/docs/shared/components/Select.ts deleted file mode 100644 index 2fa41fc0e5..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Select.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Select', - description: - 'The select component allows users to choose one option from a dropdown menu. Use select when presenting four or more choices to keep interfaces uncluttered and scannable, or when space is limited.' + - '\n\nSelect components support option grouping, placeholder text, help text, and validation states to create clear selection interfaces. For more visual selection layouts with radio buttons or checkboxes, use [choice list](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/choice-list).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Sheet.ts b/packages/ui-extensions/src/docs/shared/components/Sheet.ts deleted file mode 100644 index 9ced2034fd..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Sheet.ts +++ /dev/null @@ -1,14 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Sheet', - description: ` -The Sheet component displays essential information for customers at the bottom of the screen, appearing above other elements. Use it sparingly to avoid distracting customers during checkout. This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/latest/configuration#collect-buyer-consent) to be rendered. - -The library automatically applies the [WAI-ARIA Dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/) to both the activator and the sheet content.`, - category: 'Web components', - subCategory: 'Overlays', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts b/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts deleted file mode 100644 index e095adbeed..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/SkeletonParagraph.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Skeleton paragraph', - description: - 'Displays a placeholder representation of text content while it loads. Use to improve perceived performance by showing users where text will appear.', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Spinner.ts b/packages/ui-extensions/src/docs/shared/components/Spinner.ts deleted file mode 100644 index 87ff992521..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Spinner.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Spinner', - description: - 'The spinner component displays an animated indicator showing users that content or actions are loading. Use spinner to communicate ongoing processes like fetching data, processing requests, or waiting for operations to complete.' + - '\n\nSpinners support multiple sizes and should be used for page or section loading states. For button loading states, use the `loading` property on the [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) component instead.', - category: 'Web components', - subCategory: 'Feedback and status indicators', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Stack.ts b/packages/ui-extensions/src/docs/shared/components/Stack.ts deleted file mode 100644 index f312a1d434..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Stack.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Stack', - description: - 'The stack component organizes elements horizontally or vertically along the block or inline axis. Use stack to structure layouts, group related components, control spacing between elements, or create flexible arrangements that adapt to content.' + - '\n\nStacks support gap spacing, alignment, wrapping, and distribution properties to create consistent, responsive layouts without custom CSS. For complex multi-column layouts with precise grid positioning, use [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid).', - category: 'Web components', - subCategory: 'Layout and structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Summary.ts b/packages/ui-extensions/src/docs/shared/components/Summary.ts deleted file mode 100644 index 04cbb3d42f..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Summary.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Summary', - description: - 'Provides a clickable label for collapsible Details content. Use to create clear, accessible disclosure controls that show or hide additional information.', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Switch.ts b/packages/ui-extensions/src/docs/shared/components/Switch.ts deleted file mode 100644 index a27203abeb..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Switch.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Switch', - description: - 'The switch component provides a clear way for users to toggle options or settings on and off. Use switch for binary controls that take effect immediately, like enabling features, activating settings, or controlling visibility.' + - "\n\nSwitches provide instant visual feedback and are ideal for settings that don't require a save action to apply changes. For selections that require explicit submission, use [checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox) instead.", - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Table.ts b/packages/ui-extensions/src/docs/shared/components/Table.ts deleted file mode 100644 index fcd95de686..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Table.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Table', - description: - 'The table component displays data clearly in rows and columns, helping users view, analyze, and compare structured information. Use table to present datasets, product lists, order details, or any tabular content that benefits from organized rows and columns.' + - '\n\nTables automatically adapt to screen size, rendering as lists on small screens and tables on larger ones for optimal readability across devices.', - category: 'Web components', - subCategory: 'Layout and structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/TableBody.ts b/packages/ui-extensions/src/docs/shared/components/TableBody.ts deleted file mode 100644 index b0c8a7cb86..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/TableBody.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Table body', - 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.' + - '\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.', - category: 'Web components', - subCategory: 'Structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/TableCell.ts b/packages/ui-extensions/src/docs/shared/components/TableCell.ts deleted file mode 100644 index 2549f3fa7e..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/TableCell.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Table cell', - 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.' + - '\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.', - category: 'Web components', - subCategory: 'Structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/TableHeader.ts b/packages/ui-extensions/src/docs/shared/components/TableHeader.ts deleted file mode 100644 index b4227ced0d..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/TableHeader.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Table header', - 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.' + - '\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.', - category: 'Web components', - subCategory: 'Structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/TableHeaderRow.ts b/packages/ui-extensions/src/docs/shared/components/TableHeaderRow.ts deleted file mode 100644 index 57fdc5017c..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/TableHeaderRow.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Table header row', - 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.' + - '\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.', - category: 'Web components', - subCategory: 'Structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/TableRow.ts b/packages/ui-extensions/src/docs/shared/components/TableRow.ts deleted file mode 100644 index 6735eaeb43..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/TableRow.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Table row', - 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.' + - '\n\nTable 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.', - category: 'Web components', - subCategory: 'Structure', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Text.ts b/packages/ui-extensions/src/docs/shared/components/Text.ts deleted file mode 100644 index 6e5c471bae..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Text.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Text', - description: - 'The text component displays inline text with specific visual styles or tones. Use text to emphasize or differentiate words or phrases within paragraphs or other block-level components, applying weight, color, or semantic styling.' + - '\n\nText supports multiple visual variants, alignment options, and line clamping for flexible inline typography control. For block-level text content, use [paragraph](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/paragraph).', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/TextArea.ts b/packages/ui-extensions/src/docs/shared/components/TextArea.ts deleted file mode 100644 index b0a7e9eac5..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/TextArea.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Text area', - description: - 'The text area component captures multi-line text input. Use it to collect descriptions, notes, comments, or other extended text content.' + - '\n\nThe component supports configurable height, character limits, and validation. For single-line text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/TextField.ts b/packages/ui-extensions/src/docs/shared/components/TextField.ts deleted file mode 100644 index cc8c7787da..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/TextField.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Text field', - description: - 'The text field component captures single-line text input. Use it to collect short, free-form information like names, titles, or identifiers.' + - '\n\nThe component supports various input configurations including placeholders, character limits, and validation. For multi-line text entry, use [text area](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-area). For specialized input types, use [email field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/email-field), [URL field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/url-field), [password field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/password-field), or [search field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/search-field).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Thumbnail.ts b/packages/ui-extensions/src/docs/shared/components/Thumbnail.ts deleted file mode 100644 index 365d9c016e..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Thumbnail.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Thumbnail', - description: - 'The thumbnail component displays small preview images representing content, products, or media items. Use thumbnail to provide visual identification in lists, tables, or cards where space is constrained and quick recognition is important.' + - '\n\nThumbnails support multiple sizes, alt text for accessibility, and fallback states for missing images. For full-size images, use [image](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/image). For user profile images, use [avatar](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/avatar).', - category: 'Web components', - subCategory: 'Media and visuals', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Time.ts b/packages/ui-extensions/src/docs/shared/components/Time.ts deleted file mode 100644 index 75d7503a49..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Time.ts +++ /dev/null @@ -1,12 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Time', - description: - 'Represents a specific point or duration in time. Use to display dates, times, or durations clearly and consistently. May include a machine-readable `datetime` attribute for improved accessibility and functionality.', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/Tooltip.ts b/packages/ui-extensions/src/docs/shared/components/Tooltip.ts deleted file mode 100644 index 967f2a55ce..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/Tooltip.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Tooltip', - description: - 'The tooltip component displays helpful information in a small overlay when users hover over or focus on an element. Use tooltip to provide additional context, explain functionality, or clarify terms without cluttering the interface with permanent text.' + - '\n\nTooltips support keyboard accessibility, positioning options, and activation on both hover and focus for inclusive interaction patterns.', - category: 'Web components', - subCategory: 'Overlays', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/URLField.ts b/packages/ui-extensions/src/docs/shared/components/URLField.ts deleted file mode 100644 index 92e2b3d230..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/URLField.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'URL field', - description: - 'The URL field component collects URLs from users with built-in formatting and validation. Use URL field for website addresses, link destinations, or any URL input to provide URL-specific keyboard layouts and automatic validation.' + - '\n\nURL fields support protocol prefixing, validation, and help text to guide users toward entering properly formatted web addresses. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).', - category: 'Web components', - subCategory: 'Forms', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/UnorderedList.ts b/packages/ui-extensions/src/docs/shared/components/UnorderedList.ts deleted file mode 100644 index 6cf01b771c..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/UnorderedList.ts +++ /dev/null @@ -1,13 +0,0 @@ -import type {SharedReferenceEntityTemplateSchema} from '../docs-type'; - -const data: SharedReferenceEntityTemplateSchema = { - name: 'Unordered list', - description: - "The unordered list component displays a bulleted list of related items where sequence isn't critical. Use unordered list to present collections of features, options, requirements, or any group of items where order doesn't affect meaning." + - '\n\nUnordered lists automatically add bullet points and support nested lists for hierarchical content organization. For sequential items where order is important, use [ordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/ordered-list).', - category: 'Web components', - subCategory: 'Typography and content', - related: [], -}; - -export default data; diff --git a/packages/ui-extensions/src/docs/shared/components/index.ts b/packages/ui-extensions/src/docs/shared/components/index.ts deleted file mode 100644 index 99b92099e0..0000000000 --- a/packages/ui-extensions/src/docs/shared/components/index.ts +++ /dev/null @@ -1,52 +0,0 @@ -export {default as Abbreviation} from './Abbreviation'; -export {default as Badge} from './Badge'; -export {default as Banner} from './Banner'; -export {default as Box} from './Box'; -export {default as Button} from './Button'; -export {default as Checkbox} from './Checkbox'; -export {default as Chip} from './Chip'; -export {default as ChoiceList} from './ChoiceList'; -export {default as Clickable} from './Clickable'; -export {default as ClickableChip} from './ClickableChip'; -export {default as ClipboardItem} from './ClipboardItem'; -export {default as ConsentCheckbox} from './ConsentCheckbox'; -export {default as ConsentPhoneField} from './ConsentPhoneField'; -export {default as DateField} from './DateField'; -export {default as DatePicker} from './DatePicker'; -export {default as Details} from './Details'; -export {default as Divider} from './Divider'; -export {default as DropZone} from './DropZone'; -export {default as EmailField} from './EmailField'; -export {default as Form} from './Form'; -export {default as Grid} from './Grid'; -export {default as Heading} from './Heading'; -export {default as Icon} from './Icon'; -export {default as Image} from './Image'; -export {default as Link} from './Link'; -export {default as ListItem} from './ListItem'; -export {default as MoneyField} from './MoneyField'; -export {default as NumberField} from './NumberField'; -export {default as OrderedList} from './OrderedList'; -export {default as Paragraph} from './Paragraph'; -export {default as PasswordField} from './PasswordField'; -export {default as PaymentIcon} from './PaymentIcon'; -export {default as Popover} from './Popover'; -export {default as PressButton} from './PressButton'; -export {default as Progress} from './Progress'; -export {default as QRCode} from './QRCode'; -export {default as ScrollBox} from './ScrollBox'; -export {default as SearchField} from './SearchField'; -export {default as Section} from './Section'; -export {default as Select} from './Select'; -export {default as SkeletonParagraph} from './SkeletonParagraph'; -export {default as Spinner} from './Spinner'; -export {default as Stack} from './Stack'; -export {default as Summary} from './Summary'; -export {default as Switch} from './Switch'; -export {default as Table} from './Table'; -export {default as Text} from './Text'; -export {default as TextArea} from './TextArea'; -export {default as Time} from './Time'; -export {default as Tooltip} from './Tooltip'; -export {default as UnorderedList} from './UnorderedList'; -export {default as URLField} from './URLField'; diff --git a/packages/ui-extensions/src/docs/shared/docs-type.ts b/packages/ui-extensions/src/docs/shared/docs-type.ts deleted file mode 100644 index af1052417f..0000000000 --- a/packages/ui-extensions/src/docs/shared/docs-type.ts +++ /dev/null @@ -1,7 +0,0 @@ -import type {ReferenceEntityTemplateSchema} from '@shopify/generate-docs'; - -export interface SharedReferenceEntityTemplateSchema - extends Pick< - ReferenceEntityTemplateSchema, - 'name' | 'description' | 'category' | 'subCategory' | 'related' - > {} diff --git a/packages/ui-extensions/src/surfaces/admin/docs-types.ts b/packages/ui-extensions/src/surfaces/admin/docs-types.ts deleted file mode 100644 index 0b84a7be08..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/docs-types.ts +++ /dev/null @@ -1,45 +0,0 @@ -import type {CSSProperties} from 'react'; -import { - ReferenceEntityTemplateSchema, - CodeTabType, - ExampleType, - ExampleSectionSchema, - ExampleGroupType, -} from '@shopify/generate-docs'; - -// Don't allow all CSS properties to be used in the customStyles property -type AllowedCSSProperties = Pick; - -type AdminCodeTabType = CodeTabType & { - layout?: string; - customStyles?: AllowedCSSProperties; -}; - -interface CodeLinkType { - name: string; - url: string; - icon: string; -} - -interface AdminCodeblockType { - title: string; - tabs: AdminCodeTabType[]; - links?: CodeLinkType[]; -} - -type AdminExampleType = Omit & { - codeblock: AdminCodeblockType | AdminCodeblockType[]; -}; - -type AdminExampleGroupType = Omit & { - examples: AdminExampleType[]; -}; - -export interface AdminReferenceEntityTemplateSchema - extends Omit { - defaultExample?: AdminExampleType; - examples?: Omit & { - exampleGroups?: AdminExampleGroupType[] | null; - examples?: AdminExampleType[] | null; - }; -} diff --git a/packages/ui-extensions/src/surfaces/checkout/helper.docs.ts b/packages/ui-extensions/src/surfaces/checkout/helper.docs.ts deleted file mode 100644 index f390bf6221..0000000000 --- a/packages/ui-extensions/src/surfaces/checkout/helper.docs.ts +++ /dev/null @@ -1,166 +0,0 @@ -import type {CodeTabType, ExampleType} from '@shopify/generate-docs'; - -const examplePath = '../../../../../docs/surfaces/checkout/reference/examples'; - -type NonEmptyArray = [T, ...T[]]; -type ExtensionExampleLanguage = 'js' | 'jsx'; -type ExtensionCodeTabConfig = Record< - ExtensionExampleLanguage, - { - title: string; - fileExtension: 'ts' | 'tsx'; - } ->; -const codeExampleTabConfig: ExtensionCodeTabConfig = { - js: { - title: 'JavaScript', - fileExtension: 'ts', - }, - jsx: { - title: 'React', - fileExtension: 'tsx', - }, -}; - -/** - * Returns all examples available, specified with a key for reference. - */ -export function getExamples( - languages: NonEmptyArray, -): Record { - if (!languages || languages.length === 0) { - throw new HelperDocsError( - 'You must define at least one extension code language context you wish to retrieve the example(s) for.', - ); - } - /** - * Provides the code tab for the requested languages in "JavaScript" and "React". - */ - function getExtensionCodeTabs(name: string): CodeTabType[] { - return languages.map((language) => { - return { - code: `${examplePath}/${name}.example.${codeExampleTabConfig[language].fileExtension}`, - language, - title: codeExampleTabConfig[language].title, - }; - }); - } - - // Add new examples here that can be shared across multiples pages. - return { - 'ui-components/clipboarditem-qrcode': { - description: - 'When displaying a QR code, include an alternative way for the user to get the content', - image: 'clipboard-qrcode.png', - codeblock: { - title: "Copying content of a QR code to the user's clipboard", - tabs: getExtensionCodeTabs('ui-components/clipboarditem-qrcode'), - }, - }, - 'ui-components/choicelist-survey': { - description: `The base variant’s flexibility allows for the creation of Likert scales using the ChoiceList component. By utilizing layout components, you can easily structure rows and columns for this purpose.`, - image: 'choicelist-survey.png', - codeblock: { - title: 'Custom survey using the base variant', - tabs: getExtensionCodeTabs('ui-components/choicelist-survey'), - }, - }, - 'ui-components/choicelist-details': { - description: `The ChoiceList’s group variant, combined with the details property, allows for the conditional display of information when needed.`, - image: 'choicelist-details.png', - codeblock: { - title: 'Collecting additional information', - tabs: getExtensionCodeTabs('ui-components/choicelist-details'), - }, - }, - 'ui-components/choicelist-time-picking': { - description: `The ChoiceList component is great for presenting a concise list of options, particularly when showcasing time ranges due to its ample horizontal space. However, if there’s more than 5 choices, use the [Select](/docs/api/checkout-ui-extensions/components/forms/select) component instead.`, - image: 'choicelist-time-picking.png', - codeblock: { - title: 'Displaying a short list of time choices', - tabs: getExtensionCodeTabs('ui-components/choicelist-time-picking'), - }, - }, - 'ui-components/sheet-consent': { - description: - 'The Sheet component can be used to display privacy consent preferences in the Checkout interface. Sheet can be defaulted to open for this use case.\n\n This component requires access to [Customer Privacy API](/docs/api/checkout-ui-extensions/latest/apis/customer-privacy) to be rendered.', - codeblock: { - title: 'Using Sheet to display consent preferences', - tabs: getExtensionCodeTabs('ui-components/sheet-consent'), - }, - }, - 'ui-components/sheet-description-preferences': { - description: - 'In order to save space in the action slot, secondary actions can be placed in the content area.', - image: 'sheet-description-preferences.png', - codeblock: { - title: 'Preferences button is in the description as a link', - tabs: getExtensionCodeTabs( - 'ui-components/sheet-description-preferences', - ), - }, - }, - 'ui-components/sheet-layout-content': { - description: - 'The description can take in layout components to allow for different types of content to be structured in specific ways.', - image: 'sheet-layout-content.png', - codeblock: { - title: 'Using layout component in the description ', - tabs: getExtensionCodeTabs('ui-components/sheet-layout-content'), - }, - }, - 'ui-components/sheet-icon-button-preferences': { - description: - 'An icon button can be used in the secondary actions area to allow for more space for the primary actions.', - image: 'sheet-icon-button-preferences.png', - codeblock: { - title: 'Icon button used for preferences', - tabs: getExtensionCodeTabs( - 'ui-components/sheet-icon-button-preferences', - ), - }, - }, - 'ui-components/qrcode-image': { - description: - 'The QRCode component can display an image in the center. Adding a logo can increase brand trust and set expectations for the action when scanning.', - image: 'qrcode-image.png', - codeblock: { - title: 'With logo', - tabs: getExtensionCodeTabs('ui-components/qrcode-image'), - }, - }, - 'ui-components/qrcode-fill-size': { - description: - 'In most cases the default size should work well. If you need a different size, use `fill` to make it grow to the size of its parent container.', - image: 'qrcode-fill-size.png', - codeblock: { - title: 'Fill size', - tabs: getExtensionCodeTabs('ui-components/qrcode-fill-size'), - }, - }, - }; -} - -/** - * Returns a specific `Example` by name, as specified in `getExamples()`. - * Specify whether you want to include both `js` and `jsx`examples or just one. - */ -export function getExample( - name: string, - languages: NonEmptyArray = ['js'], -): ExampleType { - const example = getExamples(languages)[name]; - if (!example) { - throw new HelperDocsError( - `Could not find a matching example with the name "${name}". Does it exist within the file "docs/reference/helper.docs.ts" in getExamples()?`, - ); - } - return example; -} - -class HelperDocsError extends Error { - name = 'HelperDocsError'; -} - -export const REQUIRES_PROTECTED_CUSTOMER_DATA = - 'access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) for some properties.'; From 8d14b38f351a0331ea67da3e5a7d15e061deb92e Mon Sep 17 00:00:00 2001 From: Laurel Thorburn Date: Tue, 19 May 2026 12:56:41 -0600 Subject: [PATCH 07/12] Before this PR, tsc compiled the now-deleted .doc.ts files (e.g. src/surfaces/checkout/components/Abbreviation/Abbreviation.doc.ts), which incidentally created build/ts/surfaces/checkout/components/ as a side effect. copyComponentDefinitions in buildTargetDts.ts assumed that directory existed. With the .doc.ts files gone, tsc no longer creates the parent dir, so copyFileSync fails with ENOENT on the destination. --- packages/ui-extensions/buildTargetDts.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/ui-extensions/buildTargetDts.ts b/packages/ui-extensions/buildTargetDts.ts index 6032f8ca9a..652b3414ab 100644 --- a/packages/ui-extensions/buildTargetDts.ts +++ b/packages/ui-extensions/buildTargetDts.ts @@ -28,6 +28,7 @@ function copyComponentDefinitions({ if (!existsSync(buildPath)) { mkdirSync(buildPath, {recursive: true}); } + mkdirSync(componentsBuildPath, {recursive: true}); const exists = componentsSrcPaths.every((path) => existsSync(path)); From 7767ac1c723c9f73b83c3b434a00b2167cecc780 Mon Sep 17 00:00:00 2001 From: Laurel Thorburn Date: Wed, 20 May 2026 10:43:27 -0600 Subject: [PATCH 08/12] regenerate scripts post clean up --- .../2026-04-rc/generated_docs_data.json | 142544 --------------- .../2026-04-rc/generated_docs_data_v2.json | 360 +- .../admin_extensions/2026-04-rc/targets.json | 122 + .../app_home/generated_docs_data.json | 30833 ---- .../app_home/generated_docs_data_v2.json | 360 +- .../generated/generated_docs_data_v2.json | 8532 +- .../2026-04/generated_category_pages.json | 1 - .../2026-04/generated_docs_data_v2.json | 1566 +- .../2026-04/generated_static_pages.json | 1435 - .../2026-04/generated_docs_data.json | 15588 -- .../2026-04/generated_static_pages.json | 265 - 11 files changed, 5614 insertions(+), 195992 deletions(-) delete mode 100644 packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/generated_docs_data.json delete mode 100644 packages/ui-extensions/docs/surfaces/admin/generated/app_home/generated_docs_data.json delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_category_pages.json delete mode 100644 packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_static_pages.json delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-04/generated_docs_data.json delete mode 100644 packages/ui-extensions/docs/surfaces/point-of-sale/generated/pos_ui_extensions/2026-04/generated_static_pages.json diff --git a/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/generated_docs_data.json b/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/generated_docs_data.json deleted file mode 100644 index ca8fa5b5ae..0000000000 --- a/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/generated_docs_data.json +++ /dev/null @@ -1,142544 +0,0 @@ -[ - { - "name": "Action Extension API", - "description": "The Action Extension API lets you [build action extensions](/docs/apps/build/admin/actions-blocks/build-admin-action) that merchants access from the **More actions** menu on details and index pages. Use this API to create workflows for processing resources, configuring settings, or integrating with external systems.", - "isVisualComponent": false, - "type": "API", - "requires": "the [admin action](/docs/api/admin-extensions/{API_VERSION}/web-components/settings-and-templates/admin-action) component.", - "defaultExample": { - "description": "Send selected product IDs to your backend for bulk processing. This example shows how to map selected items, make an authenticated API call, and close the modal when the operation completes.", - "codeblock": { - "title": "Process selected products", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n\n const handleProcess = async () => {\n const productIds = data.selected.map((item) => item.id);\n\n const response = await fetch('/api/bulk-process', {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify({productIds}),\n });\n\n if (response.ok) {\n console.log('Products processed successfully');\n shopify.close();\n } else {\n console.error('Failed to process products');\n }\n };\n\n return (\n <s-admin-action title=\"Bulk Process\">\n <s-text>Processing {data.selected.length} products</s-text>\n <s-button onClick={handleProcess}>Process Products</s-button>\n </s-admin-action>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `ActionExtensionApi` object provides properties for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "type": "ActionExtensionApi", - "typeDefinitions": { - "ActionExtensionApi": { - "filePath": "src/surfaces/admin/api/action/action.ts", - "name": "ActionExtensionApi", - "description": "The `ActionExtensionApi` object provides methods for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ActionExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner.\n */\n close: () => void;\n\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n}" - }, - "Auth": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "Auth", - "description": "The `Auth` object provides authentication methods for secure communication with your app backend.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "idToken", - "value": "() => Promise", - "description": "Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved." - } - ], - "value": "export interface Auth {\n /**\n * Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved.\n */\n idToken: () => Promise;\n}" - }, - "Data": { - "filePath": "src/surfaces/admin/api/shared.ts", - "name": "Data", - "description": "The `Data` object provides access to currently viewed or selected resources in the admin context.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "{ id: string; }[]", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - } - ], - "value": "export interface Data {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n selected: {id: string}[];\n}" - }, - "ExtensionTarget": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionTarget", - "value": "keyof ExtensionTargets", - "description": "A string literal union of all valid extension target identifiers. Use this type to specify where your admin UI extension should render, such as `admin.product-details.block.render` for a block on product details pages or `admin.order-details.action.render` for an action on order details pages. The target determines the extension's location, available APIs, and UI components." - }, - "ExtensionTargets": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "name": "ExtensionTargets", - "description": "Maps extension target identifiers to their corresponding extension types. Each target represents a specific location or context in the Shopify admin where extensions can render or execute. Use these targets to define where your extension appears and what capabilities it has access to.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.app.tools.data", - "value": "RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >", - "description": "A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-location-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customers.segmentation-templates.data", - "value": "RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >", - "description": "A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.function-settings.render", - "value": "RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.configuration.render", - "value": "RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.reorder.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.configuration.render", - "value": "RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.internal-order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.validation.render", - "value": "RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." - } - ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" - }, - "RenderExtension": { - "filePath": "src/extension.ts", - "name": "RenderExtension", - "description": "Defines the structure of a render extension, which displays UI in the Shopify admin.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "components", - "value": "ComponentsSet", - "description": "The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "void | Promise", - "description": "The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads." - } - ], - "value": "export interface RenderExtension {\n /**\n * The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying.\n */\n api: Api;\n /**\n * The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target.\n */\n components: ComponentsSet;\n /**\n * The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads.\n */\n output: void | Promise;\n}" - }, - "ActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/ActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionExtensionComponents", - "value": "StandardComponents | 'AdminAction'", - "description": "The components available for building action extensions. Includes all standard components plus the admin action component required for action extension setup." - }, - "StandardComponents": { - "filePath": "src/surfaces/admin/components/StandardComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "StandardComponents", - "value": "'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField'", - "description": "The standard set of UI components available in most admin extensions. These components provide the building blocks for creating extension interfaces including layout elements, form inputs, data display, navigation, and interactive controls. Use these components to build consistent, accessible UIs that match the Shopify admin design system." - }, - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred." - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - }, - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "OrderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedList", - "description": "Configure the following properties on the ordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OrderedList\n extends PreactCustomElement\n implements OrderedListProps\n{\n constructor();\n}" - }, - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)" - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "Tooltip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Tooltip", - "description": "Configure the following properties on the tooltip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Tooltip extends PreactOverlayElement implements TooltipProps {\n constructor();\n}" - }, - "UnorderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedList", - "description": "Configure the following properties on the unordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class UnorderedList\n extends PreactCustomElement\n implements UnorderedListProps\n{\n constructor();\n}" - }, - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "AdminAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminAction", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text to use as the Action modal's title. If not provided, the name of the extension will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminAction\n extends PreactCustomElement\n implements AdminActionProps\n{\n /**\n * The text to use as the Action modal's title. If not provided, the name of the extension will be used.\n */\n heading: string;\n /**\n * Whether the action is in a loading state, such as during initial page load or when the action is being opened.\n * When `true`, the action might be in an inert state that prevents user interaction.\n */\n loading: boolean;\n constructor();\n}" - }, - "RunnableExtension": { - "filePath": "src/extension.ts", - "name": "RunnableExtension", - "description": "Defines the structure of a runnable extension, which executes logic and returns data without rendering UI.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "Output | Promise", - "description": "The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case." - } - ], - "value": "export interface RunnableExtension {\n /**\n * The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension.\n */\n api: Api;\n /**\n * The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case.\n */\n output: Output | Promise;\n}" - }, - "ShouldRenderApi": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderApi", - "description": "The `ShouldRenderApi` object provides methods for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ShouldRenderApi\n extends StandardApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.\n */\n data: Data;\n}" - }, - "I18n": { - "filePath": "src/api.ts", - "name": "I18n", - "description": "Internationalization utilities for formatting and translating content according to the user's locale. Use these methods to display numbers, currency, dates, and translated strings that match the merchant's language and regional preferences.", - "members": [ - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatCurrency", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatDate", - "value": "(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string", - "description": "Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatNumber", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "translate", - "value": "I18nTranslate", - "description": "Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components." - } - ], - "value": "export interface I18n {\n /**\n * Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default.\n *\n * @param number - The number to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the number format\n */\n formatNumber: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default.\n *\n * @param number - The currency amount to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the currency format, such as the currency code\n */\n formatCurrency: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style.\n *\n * @param date - The Date object to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.DateTimeFormatOptions for customizing the date format\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n */\n formatDate: (\n date: Date,\n options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,\n ) => string;\n\n /**\n * Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components.\n */\n translate: I18nTranslate;\n}" - }, - "I18nTranslate": { - "filePath": "src/api.ts", - "name": "I18nTranslate", - "description": "The translation function signature for internationalization. Use this to translate string keys defined in your locale files into localized content for the current user's language.", - "members": [], - "value": "export interface I18nTranslate {\n /**\n * Returns a translated string matching a key in a locale file. Use this to display localized text in your extension based on the merchant's language preferences. Supports interpolation with replacement values and pluralization with the `count` option. Returns a string when replacements are primitives, or an array when replacements include UI components.\n *\n * @param key - The translation key from your locale file (for example, \"banner.title\")\n * @param options - Optional replacement values for interpolation or the special `count` property for pluralization\n *\n * @example translate(\"banner.title\")\n * @example translate(\"items.count\", { count: 5 })\n */\n (\n key: string,\n options?: Record,\n ): ReplacementType extends string | number\n ? string\n : (string | ReplacementType)[];\n}" - }, - "Intents": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "Intents", - "description": "The `Intents` object provides methods for launching standardized Shopify workflows to create or edit resources. Intents enable your extension to trigger native admin interfaces for products, customers, discounts, and other resources, then receive the results when merchants complete the workflow.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "invoke", - "value": "IntentInvokeApi", - "description": "Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "launchUrl", - "value": "string | URL", - "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", - "isOptional": true - } - ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" - }, - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - }, - "ApiVersion": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ApiVersion", - "value": "'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04'", - "description": "The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The `unstable` version provides access to the latest features but may change without notice." - }, - "Storage": { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "name": "Storage", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: Keys) => Promise", - "description": "Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "deleteMany", - "value": "(keys: Keys[]) => Promise>", - "description": "Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "entries", - "value": "() => Promise>", - "description": "Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "get", - "value": "(key: Keys) => Promise", - "description": "Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "getMany", - "value": "(keys: Keys[]) => Promise", - "description": "Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "set", - "value": "(key: Keys, value: StorageTypes[Keys]) => Promise", - "description": "Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "setMany", - "value": "(entries: Partial) => Promise", - "description": "Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings." - } - ], - "value": "export interface Storage<\n BaseStorageTypes extends Record = Record,\n> {\n /**\n * Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports.\n *\n * @param key - The key to set the value for. Use descriptive keys to organize your stored data.\n * @param value - The value to set for the key. Can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n set<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n value: StorageTypes[Keys],\n ): Promise;\n\n /**\n * Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings.\n *\n * @param entries - An object containing key-value pairs to store. Values can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n setMany(\n entries: Partial,\n ): Promise;\n\n /**\n * Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type.\n *\n * @param key - The key to get the value for.\n * @returns The value of the key, or `undefined` if no value exists for the key.\n */\n get<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage.\n *\n * @param keys - An array of keys to get the values for.\n * @returns An array containing values for the requested keys, in the same order as the input keys.\n */\n getMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise<(StorageTypes[Keys] | undefined)[]>;\n\n /**\n * Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs.\n */\n clear(): Promise;\n\n /**\n * Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene.\n *\n * @param key - The key to delete.\n * @returns A promise that resolves to `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n delete<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings.\n *\n * @param keys - An array of keys to delete.\n * @returns A promise that resolves to an object mapping each key to a boolean value: `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n deleteMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise>;\n\n /**\n * Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples.\n *\n * @returns A promise that resolves to an iterator containing all key-value pairs in the storage.\n */\n entries<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(): Promise>;\n}" - }, - "ShouldRenderOutput": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderOutput", - "description": "The output returned by `should-render` extensions to control visibility.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "boolean", - "description": "Whether to display the associated action extension. Return `true` to show the action, `false` to hide it." - } - ], - "value": "export interface ShouldRenderOutput {\n /** Whether to display the associated action extension. Return `true` to show the action, `false` to hide it. */\n display: boolean;\n}" - }, - "BlockExtensionApi": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "BlockExtensionApi", - "description": "The `BlockExtensionApi` object provides methods for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface BlockExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n\n /**\n * Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`).\n */\n navigation: Navigation;\n}" - }, - "Navigation": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "Navigation", - "description": "The `Navigation` object provides methods for navigating between extensions and admin pages.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigate", - "value": "(url: string | URL) => void", - "description": "Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "navigation.navigate('extension://my-admin-action-extension-handle')", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface Navigation {\n /**\n * Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.\n *\n * @param url - The destination URL, typically in the format 'extension://extension-handle' for other extensions\n * @example navigation.navigate('extension://my-admin-action-extension-handle')\n */\n navigate: (url: string | URL) => void;\n}" - }, - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result." - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - }, - "ResourcePickerApi": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerApi", - "description": "Opens the resource picker modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "ResourcePickerOptions", - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "description": "", - "name": "Promise | undefined>", - "value": "Promise | undefined>" - }, - "value": "(\n options: ResourcePickerOptions,\n) => Promise | undefined>" - }, - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - }, - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - }, - "BlockExtensionComponents": { - "filePath": "src/surfaces/admin/components/BlockExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BlockExtensionComponents", - "value": "StandardComponents | 'AdminBlock' | 'Form'", - "description": "The components available for building block extensions. Includes all standard components plus the admin block component required for block extension setup and the form component for creating forms." - }, - "AdminBlock": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlock", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminBlock\n extends PreactCustomElement\n implements AdminBlockProps\n{\n /**\n * The text displayed as the block's title in the header. If not provided, the extension name will be used.\n */\n heading: string;\n /**\n * The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.\n */\n collapsedSummary: string;\n constructor();\n}" - }, - "Form": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Form", - "description": "Configure the following properties on the form component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" - }, - "StandardApi": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "StandardApi", - "description": "The `StandardApi` object provides core methods available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface StandardApi {\n /**\n * The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.\n */\n extension: {\n target: ExtensionTarget;\n };\n\n /**\n * Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.\n */\n auth: Auth;\n\n /**\n * Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.\n */\n i18n: I18n;\n\n /**\n * Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.\n */\n intents: Intents;\n\n /**\n * Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension.\n */\n storage: Storage;\n\n /**\n * Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.\n */\n query: (\n query: string,\n options?: {variables?: Variables; version?: Omit},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n}" - }, - "GraphQLError": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "GraphQLError", - "description": "The GraphQL error returned by the [GraphQL Admin API](/docs/api/admin-graphql).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "locations", - "value": "{ line: number; column: string; }", - "description": "The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query." - } - ], - "value": "export interface GraphQLError {\n /**\n * A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query.\n */\n message: string;\n /**\n * The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string.\n */\n locations: {\n /** The line number in the GraphQL query where the error occurred. */\n line: number;\n /** The column position in the GraphQL query where the error occurred. */\n column: string;\n };\n}" - }, - "CustomerSegmentTemplateApi": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplateApi", - "description": "The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "__enabledFeatures", - "value": "string[]", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating template content into the merchant's language." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface CustomerSegmentTemplateApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardApi {\n /** Utilities for translating template content into the merchant's language. */\n i18n: I18n;\n /** @private */\n __enabledFeatures: string[];\n}" - }, - "CustomerSegmentTemplate": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplate", - "description": "Defines a customer segment template that merchants can use to create targeted customer groups.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "createdOn", - "value": "string", - "description": "The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "dependencies", - "value": "{ standardMetafields?: \"facts.birth_date\"[]; customMetafields?: string[]; }", - "description": "Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string | string[]", - "description": "The template description in the merchant's language. Use an array for multiple paragraphs." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "queryToInsert", - "value": "string", - "description": "The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The template title in the merchant's language." - } - ], - "value": "export interface CustomerSegmentTemplate {\n /**\n * The template title in the merchant's language.\n */\n title: string;\n /**\n * The template description in the merchant's language. Use an array for multiple paragraphs.\n */\n description: string | string[];\n /**\n * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n query: string;\n /**\n * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n queryToInsert: string;\n /**\n * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.\n */\n dependencies?: {\n /** Standard Shopify customer metafields used in the query. */\n standardMetafields?: CustomerStandardMetafieldDependency[];\n /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */\n customMetafields?: string[];\n };\n /**\n * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge.\n */\n createdOn: string;\n}" - }, - "DiscountFunctionSettingsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "name": "DiscountFunctionSettingsApi", - "description": "The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DiscountFunctionSettingsData", - "description": "The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "DiscountsApi", - "description": "The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface DiscountFunctionSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends Omit, 'data'> {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: DiscountFunctionSettingsData;\n /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */\n discounts: DiscountsApi;\n}" - }, - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store discount function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your discount configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - }, - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - }, - "DiscountsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountsApi", - "description": "The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountClasses", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountMethod", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "updateDiscountClasses", - "value": "UpdateSignalFunction", - "description": "A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects." - } - ], - "value": "export interface DiscountsApi {\n /**\n * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.\n */\n discountClasses: ReadonlySignalLike;\n /**\n * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.\n */\n updateDiscountClasses: UpdateSignalFunction;\n /**\n * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.\n */\n discountMethod: ReadonlySignalLike;\n}" - }, - "ReadonlySignalLike": { - "filePath": "src/shared.ts", - "name": "ReadonlySignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface ReadonlySignalLike {\n /**\n * The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.\n */\n readonly value: T;\n /**\n * Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.\n */\n subscribe(fn: (value: T) => void): () => void;\n}" - }, - "DiscountClass": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountClass", - "value": "'product' | 'order' | 'shipping'", - "description": "The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).", - "isPublicDocs": true - }, - "DiscountMethod": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountMethod", - "value": "'automatic' | 'code'", - "description": "The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.", - "isPublicDocs": true - }, - "UpdateSignalFunction": { - "filePath": "src/shared.ts", - "name": "UpdateSignalFunction", - "description": "A function that updates a signal and returns a result indicating success or failure. The function is typically used along with a `ReadonlySignalLike` object.", - "params": [ - { - "name": "value", - "description": "", - "value": "T", - "filePath": "src/shared.ts" - } - ], - "returns": { - "filePath": "src/shared.ts", - "description": "", - "name": "Result", - "value": "Result" - }, - "value": "(value: T) => Result" - }, - "Result": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Result", - "value": "{success: true; value: T} | {success: false; errors: ValidationError[]}", - "description": "A result type that indicates the success or failure of an operation." - }, - "ValidationError": { - "filePath": "src/shared.ts", - "name": "ValidationError", - "description": "A validation error object that is returned when an operation fails.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "A code identifier for the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ message: string; path: string[]; }[]", - "description": "Field-level validation issues", - "isOptional": true - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message describing the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "" - } - ], - "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" - }, - "FunctionSettingsComponents": { - "filePath": "src/surfaces/admin/components/FunctionSettingsComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FunctionSettingsComponents", - "value": "FormExtensionComponents | 'FunctionSettings'", - "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." - }, - "FormExtensionComponents": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - }, - "FunctionSettings": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FunctionSettings", - "description": "Configure the following properties on the function settings component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class FunctionSettings\n extends PreactCustomElement\n implements FunctionSettingsProps\n{\n constructor();\n}" - }, - "PrintActionExtensionApi": { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "name": "PrintActionExtensionApi", - "description": "The `PrintActionExtensionApi` object provides methods for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PrintActionExtensionApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products.\n */\n data: Data;\n}" - }, - "PrintActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/PrintActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PrintActionExtensionComponents", - "value": "StandardComponents | 'AdminPrintAction'", - "description": "The components available for building print action extensions. Includes all standard components plus the admin print action component required for print action setup." - }, - "AdminPrintAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintAction", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The `src` URL of the preview and the document to print. If not provided, the preview will show an empty state and the print button will be disabled. HTML, PDFs, and images are supported." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminPrintAction\n extends PreactCustomElement\n implements AdminPrintActionProps\n{\n /**\n * The `src` URL of the preview and the document to print.\n * If not provided, the preview will show an empty state and the print button will be disabled.\n * HTML, PDFs, and images are supported.\n */\n src: string;\n constructor();\n}" - }, - "ProductDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductDetailsConfigurationApi", - "description": "The `ProductDetailsConfigurationApi` object provides methods for configuring product bundles and relationships. Access the following properties on the `ProductDetailsConfigurationApi` object to build product configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product currently being viewed in the admin.\n * @deprecated\n */\n product: Product;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Product": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "Product", - "description": "A product configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "onlineStoreUrl", - "value": "string", - "description": "The URL to view this product on the online store. Use this to create \"View in store\" links.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productCategory", - "value": "string", - "description": "The standardized product category taxonomy. Use this for product classification in search and organization.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productComponents", - "value": "ProductComponent[]", - "description": "An array of component products that make up this bundle. Each component represents a product included in the bundle configuration." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "'ACTIVE' | 'ARCHIVED' | 'DRAFT'", - "description": "The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name shown to merchants and customers." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "The total available inventory summed across all variants and locations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this product has." - } - ], - "value": "export interface Product {\n /** The product's unique global identifier (GID). */\n id: string;\n /** The product's display name shown to merchants and customers. */\n title: string;\n /** The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`). */\n handle: string;\n /** The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished). */\n status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';\n /** The total number of variants this product has. */\n totalVariants: number;\n /** The total available inventory summed across all variants and locations. */\n totalInventory: number;\n /** Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations. */\n hasOnlyDefaultVariant: boolean;\n /** The URL to view this product on the online store. Use this to create \"View in store\" links. */\n onlineStoreUrl?: string;\n /** Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values. */\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n /** The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\"). */\n productType: string;\n /** The standardized product category taxonomy. Use this for product classification in search and organization. */\n productCategory?: string;\n /** An array of component products that make up this bundle. Each component represents a product included in the bundle configuration. */\n productComponents: ProductComponent[];\n}" - }, - "ProductComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductComponent", - "description": "A component product that is part of a bundle. Represents an individual product included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "componentVariantsCount", - "value": "number", - "description": "The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "featuredImage", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "nonComponentVariantsCount", - "value": "number", - "description": "The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productUrl", - "value": "string", - "description": "The admin URL for this component product. Use this to create links to the product's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name. Use this to show which product is included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this component product has. Use this to determine if variant selection is needed for this component." - } - ], - "value": "export interface ProductComponent {\n /** The component product's unique global identifier (GID). */\n id: string;\n /** The product's display name. Use this to show which product is included in the bundle. */\n title: string;\n /** The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n featuredImage?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The total number of variants this component product has. Use this to determine if variant selection is needed for this component. */\n totalVariants: number;\n /** The admin URL for this component product. Use this to create links to the product's details page in the admin. */\n productUrl: string;\n /** The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles. */\n componentVariantsCount: number;\n /** The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations. */\n nonComponentVariantsCount: number;\n}" - }, - "PurchaseOptionsCardConfigurationApi": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "name": "PurchaseOptionsCardConfigurationApi", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ selected: { id: string; sellingPlanId?: string; }[]; }", - "description": "Selected purchase option data including product and selling plan identifiers." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PurchaseOptionsCardConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends ActionExtensionApi {\n /** Selected purchase option data including product and selling plan identifiers. */\n data: {\n /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */\n selected: {\n /** The product or variant identifier. */\n id: string;\n /** The associated selling plan identifier, if a subscription option is selected. */\n sellingPlanId?: string;\n }[];\n };\n}" - }, - "ProductVariantDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantDetailsConfigurationApi", - "description": "The `ProductVariantDetailsConfigurationApi` object provides methods for configuring product variant bundles and relationships. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to build variant configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductVariantDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product variant currently being viewed in the admin.\n * @deprecated\n */\n variant: ProductVariant;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "ProductVariant": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariant", - "description": "A product variant configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string", - "description": "The barcode, UPC, or ISBN number for the variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "string", - "description": "The original price before any discounts or markdowns." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "string", - "description": "The current selling price for this variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantComponents", - "value": "ProductVariantComponent[]", - "description": "An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for inventory tracking." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxCode", - "value": "string", - "description": "The harmonized system (HS) tax code for international shipping and customs." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number", - "description": "The physical weight of the variant as a number." - } - ], - "value": "export interface ProductVariant {\n /** The variant's unique global identifier (GID). */\n id: string;\n /** The Stock Keeping Unit (SKU) identifier for inventory tracking. */\n sku: string;\n /** The barcode, UPC, or ISBN number for the variant. */\n barcode: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The current selling price for this variant. */\n price: string;\n /** The original price before any discounts or markdowns. */\n compareAtPrice: string;\n /** Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout. */\n taxable: boolean;\n /** The harmonized system (HS) tax code for international shipping and customs. */\n taxCode: string;\n /** The physical weight of the variant as a number. */\n weight: number;\n /** The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n /** An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle. */\n productVariantComponents: ProductVariantComponent[];\n}" - }, - "ProductVariantComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantComponent", - "description": "A component variant that is part of a product bundle. Represents an individual product variant included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantUrl", - "value": "string", - "description": "The admin URL for this product variant. Use this to create links to the variant's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for this component variant.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - } - ], - "value": "export interface ProductVariantComponent {\n /** The component variant's unique global identifier (GID). */\n id: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** The Stock Keeping Unit (SKU) identifier for this component variant. */\n sku?: string;\n /** The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n image?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The admin URL for this product variant. Use this to create links to the variant's details page in the admin. */\n productVariantUrl: string;\n /** The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n}" - }, - "OrderRoutingRuleApi": { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "name": "OrderRoutingRuleApi", - "description": "The `OrderRoutingRuleApi` object provides methods for configuring order routing rules. Access the following properties on the `OrderRoutingRuleApi` object to manage rule settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldsChange", - "value": "ApplyMetafieldsChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface OrderRoutingRuleApi\n extends StandardRenderingExtensionApi {\n /** Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration. */\n applyMetafieldsChange: ApplyMetafieldsChange;\n /** The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields). */\n data: Data;\n}" - }, - "ApplyMetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "ApplyMetafieldsChange", - "description": "A function that applies metafield changes to order routing rule settings. Call this function with one or more change operations to update or remove metafields in batch. Use batch operations to apply multiple configuration changes efficiently.", - "isPublicDocs": true, - "params": [ - { - "name": "changes", - "description": "", - "value": "MetafieldsChange[]", - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(changes: MetafieldsChange[]) => void" - }, - "MetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldsChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]", - "description": "One or more metafield change operations to apply to order routing rule settings. Can be a single change or an array of changes for batch operations. Use arrays to apply multiple changes at once.", - "isPublicDocs": true - }, - "ValidationSettingsApi": { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "name": "ValidationSettingsApi", - "description": "The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "ValidationData", - "description": "The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ValidationSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: ValidationData;\n}" - }, - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - } - } - } - ], - "examples": { - "description": "Examples that demonstrate how to use the Action Extension API.", - "examples": [ - { - "description": "Launch the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) to select component products for a [bundle](/docs/apps/build/product-merchandising/bundles), then save the bundle configuration to your backend. This example demonstrates opening a resource picker from within an action modal and handling the selection result.", - "codeblock": { - "title": "Select additional resources", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [selected, setSelected] = useState(null);\n\n const currentProductId = data.selected[0]?.id;\n\n const handleSelectProducts = async () => {\n const selectedProducts = await shopify.resourcePicker({\n type: 'product',\n multiple: 5,\n action: 'select',\n });\n\n if (selectedProducts) {\n setSelected(selectedProducts);\n \n await fetch('/api/create-bundle', {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify({\n mainProduct: currentProductId,\n components: selectedProducts.map((p) => p.id),\n }),\n });\n \n shopify.close();\n }\n };\n\n return (\n <s-admin-action title=\"Create Bundle\">\n <s-text>Main product: {currentProductId}</s-text>\n <s-button onClick={handleSelectProducts}>\n Select Component Products\n </s-button>\n {selected && <s-text>Selected {selected.length} products</s-text>}\n </s-admin-action>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Fulfill an order through your app backend with proper error handling. This example uses `try-catch` blocks to catch errors and displays error messages when your backend fulfillment service fails.", - "codeblock": { - "title": "Fulfill order with error handling", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [error, setError] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleFulfill = async () => {\n setLoading(true);\n setError(null);\n \n try {\n const orderId = data.selected[0]?.id;\n \n const response = await fetch(`/api/orders/${orderId}/fulfill`, {\n method: 'POST',\n });\n \n const result = await response.json();\n \n if (!response.ok) {\n throw new Error(result.error || 'Fulfillment failed');\n }\n \n console.log('Order fulfilled:', result);\n shopify.close();\n } catch (err) {\n setError(err.message);\n } finally {\n setLoading(false);\n }\n };\n\n return (\n <s-admin-action title=\"Fulfill Order\">\n {error && <s-banner status=\"critical\">{error}</s-banner>}\n <s-button onClick={handleFulfill} disabled={loading}>\n {loading ? 'Fulfilling...' : 'Fulfill Order'}\n </s-button>\n </s-admin-action>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Core APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Check array length for bulk operations:** When actions appear on index pages with bulk selection, `api.data.selected` can contain multiple resources. Check the array length and handle batch operations accordingly.\n- **Use `loading` state on buttons:** Modal actions don't show loading indicators automatically. Use the `loading` prop on [button](/docs/api/admin-extensions/{API_VERSION}/web-components/actions/button) components during async operations to prevent duplicate submissions." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Action extensions must call `api.close()` to dismiss the modal. Modal actions remain open indefinitely until explicitly closed.\n- Modal overlays can't be resized. The modal dimensions are fixed by the Shopify admin.\n- Action extensions can't modify the page layout underneath the modal or persist UI after closing.\n- Multiple modals can't be stacked. Opening a [picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) or [intent](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api) closes the current modal context temporarily." - } - ] - }, - { - "name": "Block Extension API", - "description": "The Block Extension API lets you [build block extensions](/docs/apps/build/admin/actions-blocks/build-admin-block) that display inline content directly within admin pages. Use this API to show contextual information, tools, or actions related to the current page without requiring merchants to open a modal.", - "isVisualComponent": false, - "type": "API", - "requires": "the [admin block](/docs/api/admin-extensions/{API_VERSION}/web-components/settings-and-templates/admin-block) component.", - "defaultExample": { - "description": "Fetch and display a product's title, inventory, and status in a [block extension](/docs/api/admin-extensions/{API_VERSION}#building-your-extension). This example uses `useEffect` to query the [GraphQL Admin API](/docs/api/admin-graphql/) when the page loads and renders a loading [spinner](/docs/api/admin-extensions/{API_VERSION}/web-components/feedback-and-status-indicators/spinner) component while fetching.", - "codeblock": { - "title": "Display product information", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useEffect} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [product, setProduct] = useState(null);\n\n useEffect(() => {\n const fetchProduct = async () => {\n const productId = data.selected[0]?.id;\n\n const {data: productData} = await shopify.query(\n `query GetProduct($id: ID!) {\n product(id: $id) {\n title\n totalInventory\n status\n }\n }`,\n {variables: {id: productId}},\n );\n\n setProduct(productData.product);\n };\n\n fetchProduct();\n }, [data]);\n\n return (\n <s-admin-block heading=\"Product Information\">\n {product ? (\n <>\n <s-text>Title: {product.title}</s-text>\n <s-text>Inventory: {product.totalInventory}</s-text>\n <s-text>Status: {product.status}</s-text>\n </>\n ) : (\n <s-spinner />\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `BlockExtensionApi` object provides properties for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "type": "BlockExtensionApi", - "typeDefinitions": { - "BlockExtensionApi": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "BlockExtensionApi", - "description": "The `BlockExtensionApi` object provides methods for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface BlockExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n\n /**\n * Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`).\n */\n navigation: Navigation;\n}" - }, - "Auth": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "Auth", - "description": "The `Auth` object provides authentication methods for secure communication with your app backend.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "idToken", - "value": "() => Promise", - "description": "Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved." - } - ], - "value": "export interface Auth {\n /**\n * Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved.\n */\n idToken: () => Promise;\n}" - }, - "Data": { - "filePath": "src/surfaces/admin/api/shared.ts", - "name": "Data", - "description": "The `Data` object provides access to currently viewed or selected resources in the admin context.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "{ id: string; }[]", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - } - ], - "value": "export interface Data {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n selected: {id: string}[];\n}" - }, - "ExtensionTarget": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionTarget", - "value": "keyof ExtensionTargets", - "description": "A string literal union of all valid extension target identifiers. Use this type to specify where your admin UI extension should render, such as `admin.product-details.block.render` for a block on product details pages or `admin.order-details.action.render` for an action on order details pages. The target determines the extension's location, available APIs, and UI components." - }, - "ExtensionTargets": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "name": "ExtensionTargets", - "description": "Maps extension target identifiers to their corresponding extension types. Each target represents a specific location or context in the Shopify admin where extensions can render or execute. Use these targets to define where your extension appears and what capabilities it has access to.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.app.tools.data", - "value": "RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >", - "description": "A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-location-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customers.segmentation-templates.data", - "value": "RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >", - "description": "A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.function-settings.render", - "value": "RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.configuration.render", - "value": "RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.reorder.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.configuration.render", - "value": "RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.internal-order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.validation.render", - "value": "RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." - } - ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" - }, - "RenderExtension": { - "filePath": "src/extension.ts", - "name": "RenderExtension", - "description": "Defines the structure of a render extension, which displays UI in the Shopify admin.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "components", - "value": "ComponentsSet", - "description": "The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "void | Promise", - "description": "The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads." - } - ], - "value": "export interface RenderExtension {\n /**\n * The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying.\n */\n api: Api;\n /**\n * The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target.\n */\n components: ComponentsSet;\n /**\n * The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads.\n */\n output: void | Promise;\n}" - }, - "ActionExtensionApi": { - "filePath": "src/surfaces/admin/api/action/action.ts", - "name": "ActionExtensionApi", - "description": "The `ActionExtensionApi` object provides methods for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ActionExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner.\n */\n close: () => void;\n\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n}" - }, - "I18n": { - "filePath": "src/api.ts", - "name": "I18n", - "description": "Internationalization utilities for formatting and translating content according to the user's locale. Use these methods to display numbers, currency, dates, and translated strings that match the merchant's language and regional preferences.", - "members": [ - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatCurrency", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatDate", - "value": "(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string", - "description": "Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatNumber", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "translate", - "value": "I18nTranslate", - "description": "Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components." - } - ], - "value": "export interface I18n {\n /**\n * Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default.\n *\n * @param number - The number to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the number format\n */\n formatNumber: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default.\n *\n * @param number - The currency amount to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the currency format, such as the currency code\n */\n formatCurrency: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style.\n *\n * @param date - The Date object to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.DateTimeFormatOptions for customizing the date format\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n */\n formatDate: (\n date: Date,\n options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,\n ) => string;\n\n /**\n * Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components.\n */\n translate: I18nTranslate;\n}" - }, - "I18nTranslate": { - "filePath": "src/api.ts", - "name": "I18nTranslate", - "description": "The translation function signature for internationalization. Use this to translate string keys defined in your locale files into localized content for the current user's language.", - "members": [], - "value": "export interface I18nTranslate {\n /**\n * Returns a translated string matching a key in a locale file. Use this to display localized text in your extension based on the merchant's language preferences. Supports interpolation with replacement values and pluralization with the `count` option. Returns a string when replacements are primitives, or an array when replacements include UI components.\n *\n * @param key - The translation key from your locale file (for example, \"banner.title\")\n * @param options - Optional replacement values for interpolation or the special `count` property for pluralization\n *\n * @example translate(\"banner.title\")\n * @example translate(\"items.count\", { count: 5 })\n */\n (\n key: string,\n options?: Record,\n ): ReplacementType extends string | number\n ? string\n : (string | ReplacementType)[];\n}" - }, - "Intents": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "Intents", - "description": "The `Intents` object provides methods for launching standardized Shopify workflows to create or edit resources. Intents enable your extension to trigger native admin interfaces for products, customers, discounts, and other resources, then receive the results when merchants complete the workflow.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "invoke", - "value": "IntentInvokeApi", - "description": "Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "launchUrl", - "value": "string | URL", - "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", - "isOptional": true - } - ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" - }, - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - }, - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result." - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - }, - "ApiVersion": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ApiVersion", - "value": "'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04'", - "description": "The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The `unstable` version provides access to the latest features but may change without notice." - }, - "ResourcePickerApi": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerApi", - "description": "Opens the resource picker modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "ResourcePickerOptions", - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "description": "", - "name": "Promise | undefined>", - "value": "Promise | undefined>" - }, - "value": "(\n options: ResourcePickerOptions,\n) => Promise | undefined>" - }, - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - }, - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - }, - "Storage": { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "name": "Storage", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: Keys) => Promise", - "description": "Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "deleteMany", - "value": "(keys: Keys[]) => Promise>", - "description": "Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "entries", - "value": "() => Promise>", - "description": "Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "get", - "value": "(key: Keys) => Promise", - "description": "Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "getMany", - "value": "(keys: Keys[]) => Promise", - "description": "Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "set", - "value": "(key: Keys, value: StorageTypes[Keys]) => Promise", - "description": "Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "setMany", - "value": "(entries: Partial) => Promise", - "description": "Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings." - } - ], - "value": "export interface Storage<\n BaseStorageTypes extends Record = Record,\n> {\n /**\n * Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports.\n *\n * @param key - The key to set the value for. Use descriptive keys to organize your stored data.\n * @param value - The value to set for the key. Can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n set<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n value: StorageTypes[Keys],\n ): Promise;\n\n /**\n * Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings.\n *\n * @param entries - An object containing key-value pairs to store. Values can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n setMany(\n entries: Partial,\n ): Promise;\n\n /**\n * Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type.\n *\n * @param key - The key to get the value for.\n * @returns The value of the key, or `undefined` if no value exists for the key.\n */\n get<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage.\n *\n * @param keys - An array of keys to get the values for.\n * @returns An array containing values for the requested keys, in the same order as the input keys.\n */\n getMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise<(StorageTypes[Keys] | undefined)[]>;\n\n /**\n * Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs.\n */\n clear(): Promise;\n\n /**\n * Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene.\n *\n * @param key - The key to delete.\n * @returns A promise that resolves to `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n delete<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings.\n *\n * @param keys - An array of keys to delete.\n * @returns A promise that resolves to an object mapping each key to a boolean value: `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n deleteMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise>;\n\n /**\n * Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples.\n *\n * @returns A promise that resolves to an iterator containing all key-value pairs in the storage.\n */\n entries<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(): Promise>;\n}" - }, - "ActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/ActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionExtensionComponents", - "value": "StandardComponents | 'AdminAction'", - "description": "The components available for building action extensions. Includes all standard components plus the admin action component required for action extension setup." - }, - "StandardComponents": { - "filePath": "src/surfaces/admin/components/StandardComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "StandardComponents", - "value": "'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField'", - "description": "The standard set of UI components available in most admin extensions. These components provide the building blocks for creating extension interfaces including layout elements, form inputs, data display, navigation, and interactive controls. Use these components to build consistent, accessible UIs that match the Shopify admin design system." - }, - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred." - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - }, - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "OrderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedList", - "description": "Configure the following properties on the ordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OrderedList\n extends PreactCustomElement\n implements OrderedListProps\n{\n constructor();\n}" - }, - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)" - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "Tooltip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Tooltip", - "description": "Configure the following properties on the tooltip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Tooltip extends PreactOverlayElement implements TooltipProps {\n constructor();\n}" - }, - "UnorderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedList", - "description": "Configure the following properties on the unordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class UnorderedList\n extends PreactCustomElement\n implements UnorderedListProps\n{\n constructor();\n}" - }, - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "AdminAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminAction", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text to use as the Action modal's title. If not provided, the name of the extension will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminAction\n extends PreactCustomElement\n implements AdminActionProps\n{\n /**\n * The text to use as the Action modal's title. If not provided, the name of the extension will be used.\n */\n heading: string;\n /**\n * Whether the action is in a loading state, such as during initial page load or when the action is being opened.\n * When `true`, the action might be in an inert state that prevents user interaction.\n */\n loading: boolean;\n constructor();\n}" - }, - "RunnableExtension": { - "filePath": "src/extension.ts", - "name": "RunnableExtension", - "description": "Defines the structure of a runnable extension, which executes logic and returns data without rendering UI.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "Output | Promise", - "description": "The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case." - } - ], - "value": "export interface RunnableExtension {\n /**\n * The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension.\n */\n api: Api;\n /**\n * The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case.\n */\n output: Output | Promise;\n}" - }, - "ShouldRenderApi": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderApi", - "description": "The `ShouldRenderApi` object provides methods for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ShouldRenderApi\n extends StandardApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.\n */\n data: Data;\n}" - }, - "ShouldRenderOutput": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderOutput", - "description": "The output returned by `should-render` extensions to control visibility.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "boolean", - "description": "Whether to display the associated action extension. Return `true` to show the action, `false` to hide it." - } - ], - "value": "export interface ShouldRenderOutput {\n /** Whether to display the associated action extension. Return `true` to show the action, `false` to hide it. */\n display: boolean;\n}" - }, - "BlockExtensionComponents": { - "filePath": "src/surfaces/admin/components/BlockExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BlockExtensionComponents", - "value": "StandardComponents | 'AdminBlock' | 'Form'", - "description": "The components available for building block extensions. Includes all standard components plus the admin block component required for block extension setup and the form component for creating forms." - }, - "AdminBlock": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlock", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminBlock\n extends PreactCustomElement\n implements AdminBlockProps\n{\n /**\n * The text displayed as the block's title in the header. If not provided, the extension name will be used.\n */\n heading: string;\n /**\n * The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.\n */\n collapsedSummary: string;\n constructor();\n}" - }, - "Form": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Form", - "description": "Configure the following properties on the form component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" - }, - "StandardApi": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "StandardApi", - "description": "The `StandardApi` object provides core methods available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface StandardApi {\n /**\n * The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.\n */\n extension: {\n target: ExtensionTarget;\n };\n\n /**\n * Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.\n */\n auth: Auth;\n\n /**\n * Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.\n */\n i18n: I18n;\n\n /**\n * Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.\n */\n intents: Intents;\n\n /**\n * Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension.\n */\n storage: Storage;\n\n /**\n * Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.\n */\n query: (\n query: string,\n options?: {variables?: Variables; version?: Omit},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n}" - }, - "GraphQLError": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "GraphQLError", - "description": "The GraphQL error returned by the [GraphQL Admin API](/docs/api/admin-graphql).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "locations", - "value": "{ line: number; column: string; }", - "description": "The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query." - } - ], - "value": "export interface GraphQLError {\n /**\n * A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query.\n */\n message: string;\n /**\n * The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string.\n */\n locations: {\n /** The line number in the GraphQL query where the error occurred. */\n line: number;\n /** The column position in the GraphQL query where the error occurred. */\n column: string;\n };\n}" - }, - "CustomerSegmentTemplateApi": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplateApi", - "description": "The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "__enabledFeatures", - "value": "string[]", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating template content into the merchant's language." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface CustomerSegmentTemplateApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardApi {\n /** Utilities for translating template content into the merchant's language. */\n i18n: I18n;\n /** @private */\n __enabledFeatures: string[];\n}" - }, - "CustomerSegmentTemplate": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplate", - "description": "Defines a customer segment template that merchants can use to create targeted customer groups.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "createdOn", - "value": "string", - "description": "The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "dependencies", - "value": "{ standardMetafields?: \"facts.birth_date\"[]; customMetafields?: string[]; }", - "description": "Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string | string[]", - "description": "The template description in the merchant's language. Use an array for multiple paragraphs." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "queryToInsert", - "value": "string", - "description": "The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The template title in the merchant's language." - } - ], - "value": "export interface CustomerSegmentTemplate {\n /**\n * The template title in the merchant's language.\n */\n title: string;\n /**\n * The template description in the merchant's language. Use an array for multiple paragraphs.\n */\n description: string | string[];\n /**\n * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n query: string;\n /**\n * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n queryToInsert: string;\n /**\n * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.\n */\n dependencies?: {\n /** Standard Shopify customer metafields used in the query. */\n standardMetafields?: CustomerStandardMetafieldDependency[];\n /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */\n customMetafields?: string[];\n };\n /**\n * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge.\n */\n createdOn: string;\n}" - }, - "DiscountFunctionSettingsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "name": "DiscountFunctionSettingsApi", - "description": "The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DiscountFunctionSettingsData", - "description": "The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "DiscountsApi", - "description": "The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface DiscountFunctionSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends Omit, 'data'> {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: DiscountFunctionSettingsData;\n /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */\n discounts: DiscountsApi;\n}" - }, - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store discount function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your discount configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - }, - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - }, - "DiscountsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountsApi", - "description": "The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountClasses", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountMethod", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "updateDiscountClasses", - "value": "UpdateSignalFunction", - "description": "A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects." - } - ], - "value": "export interface DiscountsApi {\n /**\n * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.\n */\n discountClasses: ReadonlySignalLike;\n /**\n * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.\n */\n updateDiscountClasses: UpdateSignalFunction;\n /**\n * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.\n */\n discountMethod: ReadonlySignalLike;\n}" - }, - "ReadonlySignalLike": { - "filePath": "src/shared.ts", - "name": "ReadonlySignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface ReadonlySignalLike {\n /**\n * The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.\n */\n readonly value: T;\n /**\n * Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.\n */\n subscribe(fn: (value: T) => void): () => void;\n}" - }, - "DiscountClass": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountClass", - "value": "'product' | 'order' | 'shipping'", - "description": "The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).", - "isPublicDocs": true - }, - "DiscountMethod": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountMethod", - "value": "'automatic' | 'code'", - "description": "The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.", - "isPublicDocs": true - }, - "UpdateSignalFunction": { - "filePath": "src/shared.ts", - "name": "UpdateSignalFunction", - "description": "A function that updates a signal and returns a result indicating success or failure. The function is typically used along with a `ReadonlySignalLike` object.", - "params": [ - { - "name": "value", - "description": "", - "value": "T", - "filePath": "src/shared.ts" - } - ], - "returns": { - "filePath": "src/shared.ts", - "description": "", - "name": "Result", - "value": "Result" - }, - "value": "(value: T) => Result" - }, - "Result": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Result", - "value": "{success: true; value: T} | {success: false; errors: ValidationError[]}", - "description": "A result type that indicates the success or failure of an operation." - }, - "ValidationError": { - "filePath": "src/shared.ts", - "name": "ValidationError", - "description": "A validation error object that is returned when an operation fails.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "A code identifier for the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ message: string; path: string[]; }[]", - "description": "Field-level validation issues", - "isOptional": true - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message describing the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "" - } - ], - "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" - }, - "Navigation": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "Navigation", - "description": "The `Navigation` object provides methods for navigating between extensions and admin pages.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigate", - "value": "(url: string | URL) => void", - "description": "Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "navigation.navigate('extension://my-admin-action-extension-handle')", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface Navigation {\n /**\n * Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.\n *\n * @param url - The destination URL, typically in the format 'extension://extension-handle' for other extensions\n * @example navigation.navigate('extension://my-admin-action-extension-handle')\n */\n navigate: (url: string | URL) => void;\n}" - }, - "FunctionSettingsComponents": { - "filePath": "src/surfaces/admin/components/FunctionSettingsComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FunctionSettingsComponents", - "value": "FormExtensionComponents | 'FunctionSettings'", - "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." - }, - "FormExtensionComponents": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - }, - "FunctionSettings": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FunctionSettings", - "description": "Configure the following properties on the function settings component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class FunctionSettings\n extends PreactCustomElement\n implements FunctionSettingsProps\n{\n constructor();\n}" - }, - "PrintActionExtensionApi": { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "name": "PrintActionExtensionApi", - "description": "The `PrintActionExtensionApi` object provides methods for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PrintActionExtensionApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products.\n */\n data: Data;\n}" - }, - "PrintActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/PrintActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PrintActionExtensionComponents", - "value": "StandardComponents | 'AdminPrintAction'", - "description": "The components available for building print action extensions. Includes all standard components plus the admin print action component required for print action setup." - }, - "AdminPrintAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintAction", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The `src` URL of the preview and the document to print. If not provided, the preview will show an empty state and the print button will be disabled. HTML, PDFs, and images are supported." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminPrintAction\n extends PreactCustomElement\n implements AdminPrintActionProps\n{\n /**\n * The `src` URL of the preview and the document to print.\n * If not provided, the preview will show an empty state and the print button will be disabled.\n * HTML, PDFs, and images are supported.\n */\n src: string;\n constructor();\n}" - }, - "ProductDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductDetailsConfigurationApi", - "description": "The `ProductDetailsConfigurationApi` object provides methods for configuring product bundles and relationships. Access the following properties on the `ProductDetailsConfigurationApi` object to build product configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product currently being viewed in the admin.\n * @deprecated\n */\n product: Product;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Product": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "Product", - "description": "A product configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "onlineStoreUrl", - "value": "string", - "description": "The URL to view this product on the online store. Use this to create \"View in store\" links.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productCategory", - "value": "string", - "description": "The standardized product category taxonomy. Use this for product classification in search and organization.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productComponents", - "value": "ProductComponent[]", - "description": "An array of component products that make up this bundle. Each component represents a product included in the bundle configuration." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "'ACTIVE' | 'ARCHIVED' | 'DRAFT'", - "description": "The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name shown to merchants and customers." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "The total available inventory summed across all variants and locations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this product has." - } - ], - "value": "export interface Product {\n /** The product's unique global identifier (GID). */\n id: string;\n /** The product's display name shown to merchants and customers. */\n title: string;\n /** The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`). */\n handle: string;\n /** The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished). */\n status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';\n /** The total number of variants this product has. */\n totalVariants: number;\n /** The total available inventory summed across all variants and locations. */\n totalInventory: number;\n /** Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations. */\n hasOnlyDefaultVariant: boolean;\n /** The URL to view this product on the online store. Use this to create \"View in store\" links. */\n onlineStoreUrl?: string;\n /** Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values. */\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n /** The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\"). */\n productType: string;\n /** The standardized product category taxonomy. Use this for product classification in search and organization. */\n productCategory?: string;\n /** An array of component products that make up this bundle. Each component represents a product included in the bundle configuration. */\n productComponents: ProductComponent[];\n}" - }, - "ProductComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductComponent", - "description": "A component product that is part of a bundle. Represents an individual product included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "componentVariantsCount", - "value": "number", - "description": "The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "featuredImage", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "nonComponentVariantsCount", - "value": "number", - "description": "The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productUrl", - "value": "string", - "description": "The admin URL for this component product. Use this to create links to the product's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name. Use this to show which product is included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this component product has. Use this to determine if variant selection is needed for this component." - } - ], - "value": "export interface ProductComponent {\n /** The component product's unique global identifier (GID). */\n id: string;\n /** The product's display name. Use this to show which product is included in the bundle. */\n title: string;\n /** The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n featuredImage?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The total number of variants this component product has. Use this to determine if variant selection is needed for this component. */\n totalVariants: number;\n /** The admin URL for this component product. Use this to create links to the product's details page in the admin. */\n productUrl: string;\n /** The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles. */\n componentVariantsCount: number;\n /** The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations. */\n nonComponentVariantsCount: number;\n}" - }, - "PurchaseOptionsCardConfigurationApi": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "name": "PurchaseOptionsCardConfigurationApi", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ selected: { id: string; sellingPlanId?: string; }[]; }", - "description": "Selected purchase option data including product and selling plan identifiers." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PurchaseOptionsCardConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends ActionExtensionApi {\n /** Selected purchase option data including product and selling plan identifiers. */\n data: {\n /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */\n selected: {\n /** The product or variant identifier. */\n id: string;\n /** The associated selling plan identifier, if a subscription option is selected. */\n sellingPlanId?: string;\n }[];\n };\n}" - }, - "ProductVariantDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantDetailsConfigurationApi", - "description": "The `ProductVariantDetailsConfigurationApi` object provides methods for configuring product variant bundles and relationships. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to build variant configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductVariantDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product variant currently being viewed in the admin.\n * @deprecated\n */\n variant: ProductVariant;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "ProductVariant": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariant", - "description": "A product variant configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string", - "description": "The barcode, UPC, or ISBN number for the variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "string", - "description": "The original price before any discounts or markdowns." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "string", - "description": "The current selling price for this variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantComponents", - "value": "ProductVariantComponent[]", - "description": "An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for inventory tracking." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxCode", - "value": "string", - "description": "The harmonized system (HS) tax code for international shipping and customs." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number", - "description": "The physical weight of the variant as a number." - } - ], - "value": "export interface ProductVariant {\n /** The variant's unique global identifier (GID). */\n id: string;\n /** The Stock Keeping Unit (SKU) identifier for inventory tracking. */\n sku: string;\n /** The barcode, UPC, or ISBN number for the variant. */\n barcode: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The current selling price for this variant. */\n price: string;\n /** The original price before any discounts or markdowns. */\n compareAtPrice: string;\n /** Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout. */\n taxable: boolean;\n /** The harmonized system (HS) tax code for international shipping and customs. */\n taxCode: string;\n /** The physical weight of the variant as a number. */\n weight: number;\n /** The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n /** An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle. */\n productVariantComponents: ProductVariantComponent[];\n}" - }, - "ProductVariantComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantComponent", - "description": "A component variant that is part of a product bundle. Represents an individual product variant included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantUrl", - "value": "string", - "description": "The admin URL for this product variant. Use this to create links to the variant's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for this component variant.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - } - ], - "value": "export interface ProductVariantComponent {\n /** The component variant's unique global identifier (GID). */\n id: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** The Stock Keeping Unit (SKU) identifier for this component variant. */\n sku?: string;\n /** The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n image?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The admin URL for this product variant. Use this to create links to the variant's details page in the admin. */\n productVariantUrl: string;\n /** The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n}" - }, - "OrderRoutingRuleApi": { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "name": "OrderRoutingRuleApi", - "description": "The `OrderRoutingRuleApi` object provides methods for configuring order routing rules. Access the following properties on the `OrderRoutingRuleApi` object to manage rule settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldsChange", - "value": "ApplyMetafieldsChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface OrderRoutingRuleApi\n extends StandardRenderingExtensionApi {\n /** Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration. */\n applyMetafieldsChange: ApplyMetafieldsChange;\n /** The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields). */\n data: Data;\n}" - }, - "ApplyMetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "ApplyMetafieldsChange", - "description": "A function that applies metafield changes to order routing rule settings. Call this function with one or more change operations to update or remove metafields in batch. Use batch operations to apply multiple configuration changes efficiently.", - "isPublicDocs": true, - "params": [ - { - "name": "changes", - "description": "", - "value": "MetafieldsChange[]", - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(changes: MetafieldsChange[]) => void" - }, - "MetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldsChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]", - "description": "One or more metafield change operations to apply to order routing rule settings. Can be a single change or an array of changes for batch operations. Use arrays to apply multiple changes at once.", - "isPublicDocs": true - }, - "ValidationSettingsApi": { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "name": "ValidationSettingsApi", - "description": "The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "ValidationData", - "description": "The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ValidationSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: ValidationData;\n}" - }, - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - } - } - } - ], - "examples": { - "description": "Common block extension patterns", - "examples": [ - { - "description": "Check product eligibility with your backend API before launching an action extension. This example validates that the product meets criteria, shows a loading state during the check, and conditionally displays a navigation [button](/docs/api/admin-extensions/{API_VERSION}/web-components/actions/button).", - "codeblock": { - "title": "Navigate to action extension", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useEffect} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [eligible, setEligible] = useState(false);\n const [checking, setChecking] = useState(true);\n\n useEffect(() => {\n const checkEligibility = async () => {\n const productId = data.selected[0]?.id;\n\n if (!productId) {\n setChecking(false);\n return;\n }\n\n const response = await fetch(`/api/products/${productId}/check-eligibility`, {\n method: 'GET',\n headers: {'Content-Type': 'application/json'},\n });\n\n const {eligible} = await response.json();\n setEligible(eligible);\n setChecking(false);\n };\n\n checkEligibility();\n }, [data]);\n\n const handleNavigate = () => {\n shopify.navigation.navigate('extension://my-product-action-extension-handle');\n };\n\n return (\n <s-admin-block heading=\"Advanced Actions\">\n {checking ? (\n <s-spinner />\n ) : eligible ? (\n <s-button onClick={handleNavigate}>Launch Advanced Workflow</s-button>\n ) : (\n <s-text>Product not eligible for advanced actions</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Open the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) to select related products, then save the associations to your backend. This example tracks selection count and shows feedback when relationships are created.", - "codeblock": { - "title": "Select related products", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [relatedCount, setRelatedCount] = useState(0);\n\n const currentProductId = data.selected[0]?.id;\n\n const handleSelectRelated = async () => {\n const selectedProducts = await shopify.resourcePicker({\n type: 'product',\n multiple: true,\n filter: {\n hidden: false,\n draft: false,\n },\n });\n\n if (selectedProducts) {\n await fetch('/api/product-recommendations', {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify({\n productId: currentProductId,\n relatedProducts: selectedProducts.map((p) => p.id),\n }),\n });\n \n setRelatedCount(selectedProducts.length);\n }\n };\n\n return (\n <s-admin-block heading=\"Product Recommendations\">\n <s-button onClick={handleSelectRelated}>Select Related Products</s-button>\n {relatedCount > 0 && (\n <s-text>Added {relatedCount} related products</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Core APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Test layouts at narrow widths:** Block extensions render in responsive containers that resize with browser width. Test down to ~300px where blocks stack vertically to ensure your UI remains usable.\n- **Defer expensive operations until user interaction:** Blocks render immediately when pages load. Defer expensive operations until user interaction to avoid slowing down page rendering for merchants." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Block extensions share horizontal space with other blocks and must adapt to variable container widths. Placement order is determined by Shopify and can't be configured.\n- Navigation is limited to action extensions on the same resource page. You can't navigate to detail pages of other resources or to index pages.\n- Block extensions don't have access to information about other extensions on the page and can't communicate with them." - } - ] - }, - { - "name": "Validation Settings API", - "description": "The Validation Settings API lets you [create complex validation rules](/docs/apps/build/checkout/cart-checkout-validation/create-admin-ui-validation) for cart and checkout validation. Use this API to build custom settings interfaces for [Shopify Functions](/docs/apps/build/functions) that implement validation logic.", - "isVisualComponent": false, - "type": "API", - "requires": "the [function settings](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/function-settings) component.", - "defaultExample": { - "description": "Save a minimum quantity validation rule with a [number field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/number-field) input. This example calls `applyMetafieldChange`, checks the result type, and displays success or error banners based on the response.", - "codeblock": { - "title": "Set minimum quantity", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [quantity, setQuantity] = useState('3');\n const [result, setResult] = useState(null);\n\n const handleSave = async () => {\n const res = await shopify.applyMetafieldChange({\n type: 'updateMetafield',\n namespace: 'validation',\n key: 'minimum_quantity',\n value: quantity,\n valueType: 'number_integer',\n });\n\n setResult(res);\n };\n\n return (\n <s-function-settings>\n <s-number-field\n label=\"Minimum quantity\"\n value={quantity}\n onChange={(value) => setQuantity(value)}\n />\n <s-button onClick={handleSave}>Save Validation</s-button>\n {result?.type === 'success' && (\n <s-banner status=\"success\">Minimum quantity configured</s-banner>\n )}\n {result?.type === 'error' && (\n <s-banner status=\"critical\">{result.message}</s-banner>\n )}\n </s-function-settings>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "applyMetafieldChange", - "description": "Applies a [metafield](/docs/apps/build/metafields) change to the validation settings. Use this method to update or remove metafields that store validation function configuration data. The method accepts a change object specifying the operation type, metafield key, namespace, value, and [value type](/docs/apps/build/metafields/list-of-data-types). Returns a promise that resolves to indicate success or provides an error message if the operation fails.", - "type": "ApplyMetafieldChange", - "typeDefinitions": { - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to validation settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify validation settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store validation function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_quantity'` or `'shipping_restriction'`)." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_quantity'` or `'shipping_restriction'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your validation configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - } - } - }, - { - "title": "data", - "description": "The `data` object exposed to the extension containing the validation settings. Provides access to the validation object with its identifier and [metafields](/docs/apps/build/metafields), plus the [Shopify Function](/docs/apps/build/functions) identifier. Use this data to populate your settings UI and understand the current validation configuration in the `admin.settings.validation.render` target.", - "type": "ValidationData", - "typeDefinitions": { - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores validation function configuration data. Use metafields to persist settings that control how your validation function behaves, such as minimum quantities, restricted shipping zones, or custom validation rules.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects validation behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_quantity'` or `'blocked_countries'`)." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a validation should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects validation behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a validation should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_quantity'` or `'blocked_countries'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - } - } - } - ], - "examples": { - "description": "Configure cart and checkout validation rules", - "examples": [ - { - "description": "Block shipping to specific countries with custom error messages. This example saves blocked countries as a JSON array and a custom error message, then displays the validation and function IDs.", - "codeblock": { - "title": "Configure shipping restrictions", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [countries, setCountries] = useState('US, CA, GB');\n const [errorMsg, setErrorMsg] = useState('Shipping not available to your location');\n\n const handleSave = async () => {\n const blockedCountries = countries.split(',').map((c) => c.trim());\n\n await shopify.applyMetafieldChange({\n type: 'updateMetafield',\n namespace: 'validation',\n key: 'blocked_shipping_countries',\n value: JSON.stringify(blockedCountries),\n valueType: 'json',\n });\n\n await shopify.applyMetafieldChange({\n type: 'updateMetafield',\n namespace: 'validation',\n key: 'error_message',\n value: errorMsg,\n valueType: 'single_line_text_field',\n });\n };\n\n return (\n <s-function-settings>\n <s-stack direction=\"block\">\n <s-text-field\n label=\"Blocked countries (comma-separated)\"\n value={countries}\n onChange={(value) => setCountries(value)}\n />\n <s-text-field\n label=\"Error message\"\n value={errorMsg}\n onChange={(value) => setErrorMsg(value)}\n />\n <s-button onClick={handleSave}>Save Restrictions</s-button>\n <s-text>Validation ID: {data.validation?.id}</s-text>\n <s-text>Function ID: {data.shopifyFunction.id}</s-text>\n </s-stack>\n </s-function-settings>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Detect whether you're editing an existing validation or creating a new one. This example checks for `data.validation`, loads existing metafields if present, or initializes default settings for new validations.", - "codeblock": { - "title": "Load validation configuration", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useEffect} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [mode, setMode] = useState('loading');\n const [settings, setSettings] = useState({});\n\n useEffect(() => {\n const initializeSettings = async () => {\n if (data.validation) {\n const config = data.validation.metafields.reduce((acc, field) => {\n acc[field.key] = field.value;\n return acc;\n }, {});\n \n setSettings(config);\n setMode('edit');\n } else {\n await shopify.applyMetafieldChange({\n type: 'updateMetafield',\n namespace: 'validation',\n key: 'default_rule',\n value: 'require_minimum_cart_total',\n valueType: 'single_line_text_field',\n });\n \n setMode('created');\n }\n };\n\n initializeSettings();\n }, [data]);\n\n return (\n <s-function-settings>\n {mode === 'loading' && <s-spinner />}\n {mode === 'edit' && (\n <>\n <s-text>Editing existing validation</s-text>\n {Object.entries(settings).map(([key, value]) => (\n <s-text key={key}>\n {key}: {value}\n </s-text>\n ))}\n </>\n )}\n {mode === 'created' && <s-text>Created new validation configuration</s-text>}\n </s-function-settings>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Contextual APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Check operation result type:** `applyMetafieldChange` returns `{ type: 'success' }` or `{ type: 'error', message: string }`. Errors don't throw exceptions, so always check the returned `type` property." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Metafields have [size limits](/docs/apps/build/metafields/metafield-limits). Individual values can't exceed 256KB, and total metafield storage per validation is limited.\n- The `applyMetafieldChange` method is sequential. Operations process one at a time. Rapid successive calls can cause race conditions where later updates overwrite earlier ones.\n- Metafield changes apply immediately. Unlike admin forms, metafield changes persist right away without waiting for merchants to save.\n- Your extension can't modify the Function ID. The `shopifyFunctionId` is read-only and determined when the validation rule is created." - } - ] - }, - { - "name": "Customer Segment Template Extension API", - "description": "The Customer Segment Template Extension API lets you [build a customer segment template extension](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension). Merchants can use your templates to set up [customer segments](/docs/apps/build/marketing-analytics/customer-segments) based on custom criteria.", - "isVisualComponent": false, - "type": "API", - "defaultExample": { - "description": "Create a segment template targeting customers who spent $500+ across 5+ orders. This example uses `total_spent` and `orders_count` queries to identify high-value customers, and demonstrates `shopify.i18n.translate` for internationalized template titles and descriptions.", - "codeblock": { - "title": "Target high-value customers", - "tabs": [ - { - "title": "jsx", - "code": "export default () => {\n return {\n templates: [\n {\n title: shopify.i18n.translate('templates.highValue.title'),\n description: shopify.i18n.translate('templates.highValue.description'),\n query: `{\n total_spent: {\n min: 500\n }\n orders_count: {\n min: 5\n }\n}`,\n queryToInsert: `{\n total_spent: {\n min: 500\n }\n orders_count: {\n min: 5\n }\n}`,\n createdOn: '2025-01-15T00:00:00Z',\n },\n ],\n };\n};\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `CustomerSegmentTemplateApi` object includes tools for creating segment templates and translating content. Access the following properties on the `CustomerSegmentTemplateApi` object in the `admin.customers.segmentation-templates.data` target.", - "type": "CustomerSegmentTemplateApi", - "typeDefinitions": { - "CustomerSegmentTemplateApi": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplateApi", - "description": "The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "__enabledFeatures", - "value": "string[]", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating template content into the merchant's language." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface CustomerSegmentTemplateApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardApi {\n /** Utilities for translating template content into the merchant's language. */\n i18n: I18n;\n /** @private */\n __enabledFeatures: string[];\n}" - }, - "Auth": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "Auth", - "description": "The `Auth` object provides authentication methods for secure communication with your app backend.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "idToken", - "value": "() => Promise", - "description": "Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved." - } - ], - "value": "export interface Auth {\n /**\n * Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved.\n */\n idToken: () => Promise;\n}" - }, - "ExtensionTarget": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionTarget", - "value": "keyof ExtensionTargets", - "description": "A string literal union of all valid extension target identifiers. Use this type to specify where your admin UI extension should render, such as `admin.product-details.block.render` for a block on product details pages or `admin.order-details.action.render` for an action on order details pages. The target determines the extension's location, available APIs, and UI components." - }, - "ExtensionTargets": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "name": "ExtensionTargets", - "description": "Maps extension target identifiers to their corresponding extension types. Each target represents a specific location or context in the Shopify admin where extensions can render or execute. Use these targets to define where your extension appears and what capabilities it has access to.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.app.tools.data", - "value": "RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >", - "description": "A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-location-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customers.segmentation-templates.data", - "value": "RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >", - "description": "A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.function-settings.render", - "value": "RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.configuration.render", - "value": "RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.reorder.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.configuration.render", - "value": "RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.internal-order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.validation.render", - "value": "RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." - } - ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" - }, - "RenderExtension": { - "filePath": "src/extension.ts", - "name": "RenderExtension", - "description": "Defines the structure of a render extension, which displays UI in the Shopify admin.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "components", - "value": "ComponentsSet", - "description": "The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "void | Promise", - "description": "The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads." - } - ], - "value": "export interface RenderExtension {\n /**\n * The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying.\n */\n api: Api;\n /**\n * The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target.\n */\n components: ComponentsSet;\n /**\n * The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads.\n */\n output: void | Promise;\n}" - }, - "ActionExtensionApi": { - "filePath": "src/surfaces/admin/api/action/action.ts", - "name": "ActionExtensionApi", - "description": "The `ActionExtensionApi` object provides methods for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ActionExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner.\n */\n close: () => void;\n\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n}" - }, - "Data": { - "filePath": "src/surfaces/admin/api/shared.ts", - "name": "Data", - "description": "The `Data` object provides access to currently viewed or selected resources in the admin context.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "{ id: string; }[]", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - } - ], - "value": "export interface Data {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n selected: {id: string}[];\n}" - }, - "I18n": { - "filePath": "src/api.ts", - "name": "I18n", - "description": "Internationalization utilities for formatting and translating content according to the user's locale. Use these methods to display numbers, currency, dates, and translated strings that match the merchant's language and regional preferences.", - "members": [ - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatCurrency", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatDate", - "value": "(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string", - "description": "Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatNumber", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "translate", - "value": "I18nTranslate", - "description": "Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components." - } - ], - "value": "export interface I18n {\n /**\n * Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default.\n *\n * @param number - The number to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the number format\n */\n formatNumber: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default.\n *\n * @param number - The currency amount to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the currency format, such as the currency code\n */\n formatCurrency: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style.\n *\n * @param date - The Date object to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.DateTimeFormatOptions for customizing the date format\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n */\n formatDate: (\n date: Date,\n options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,\n ) => string;\n\n /**\n * Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components.\n */\n translate: I18nTranslate;\n}" - }, - "I18nTranslate": { - "filePath": "src/api.ts", - "name": "I18nTranslate", - "description": "The translation function signature for internationalization. Use this to translate string keys defined in your locale files into localized content for the current user's language.", - "members": [], - "value": "export interface I18nTranslate {\n /**\n * Returns a translated string matching a key in a locale file. Use this to display localized text in your extension based on the merchant's language preferences. Supports interpolation with replacement values and pluralization with the `count` option. Returns a string when replacements are primitives, or an array when replacements include UI components.\n *\n * @param key - The translation key from your locale file (for example, \"banner.title\")\n * @param options - Optional replacement values for interpolation or the special `count` property for pluralization\n *\n * @example translate(\"banner.title\")\n * @example translate(\"items.count\", { count: 5 })\n */\n (\n key: string,\n options?: Record,\n ): ReplacementType extends string | number\n ? string\n : (string | ReplacementType)[];\n}" - }, - "Intents": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "Intents", - "description": "The `Intents` object provides methods for launching standardized Shopify workflows to create or edit resources. Intents enable your extension to trigger native admin interfaces for products, customers, discounts, and other resources, then receive the results when merchants complete the workflow.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "invoke", - "value": "IntentInvokeApi", - "description": "Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "launchUrl", - "value": "string | URL", - "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", - "isOptional": true - } - ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" - }, - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - }, - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result." - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - }, - "ApiVersion": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ApiVersion", - "value": "'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04'", - "description": "The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The `unstable` version provides access to the latest features but may change without notice." - }, - "ResourcePickerApi": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerApi", - "description": "Opens the resource picker modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "ResourcePickerOptions", - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "description": "", - "name": "Promise | undefined>", - "value": "Promise | undefined>" - }, - "value": "(\n options: ResourcePickerOptions,\n) => Promise | undefined>" - }, - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - }, - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - }, - "Storage": { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "name": "Storage", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: Keys) => Promise", - "description": "Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "deleteMany", - "value": "(keys: Keys[]) => Promise>", - "description": "Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "entries", - "value": "() => Promise>", - "description": "Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "get", - "value": "(key: Keys) => Promise", - "description": "Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "getMany", - "value": "(keys: Keys[]) => Promise", - "description": "Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "set", - "value": "(key: Keys, value: StorageTypes[Keys]) => Promise", - "description": "Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "setMany", - "value": "(entries: Partial) => Promise", - "description": "Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings." - } - ], - "value": "export interface Storage<\n BaseStorageTypes extends Record = Record,\n> {\n /**\n * Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports.\n *\n * @param key - The key to set the value for. Use descriptive keys to organize your stored data.\n * @param value - The value to set for the key. Can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n set<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n value: StorageTypes[Keys],\n ): Promise;\n\n /**\n * Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings.\n *\n * @param entries - An object containing key-value pairs to store. Values can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n setMany(\n entries: Partial,\n ): Promise;\n\n /**\n * Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type.\n *\n * @param key - The key to get the value for.\n * @returns The value of the key, or `undefined` if no value exists for the key.\n */\n get<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage.\n *\n * @param keys - An array of keys to get the values for.\n * @returns An array containing values for the requested keys, in the same order as the input keys.\n */\n getMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise<(StorageTypes[Keys] | undefined)[]>;\n\n /**\n * Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs.\n */\n clear(): Promise;\n\n /**\n * Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene.\n *\n * @param key - The key to delete.\n * @returns A promise that resolves to `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n delete<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings.\n *\n * @param keys - An array of keys to delete.\n * @returns A promise that resolves to an object mapping each key to a boolean value: `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n deleteMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise>;\n\n /**\n * Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples.\n *\n * @returns A promise that resolves to an iterator containing all key-value pairs in the storage.\n */\n entries<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(): Promise>;\n}" - }, - "ActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/ActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionExtensionComponents", - "value": "StandardComponents | 'AdminAction'", - "description": "The components available for building action extensions. Includes all standard components plus the admin action component required for action extension setup." - }, - "StandardComponents": { - "filePath": "src/surfaces/admin/components/StandardComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "StandardComponents", - "value": "'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField'", - "description": "The standard set of UI components available in most admin extensions. These components provide the building blocks for creating extension interfaces including layout elements, form inputs, data display, navigation, and interactive controls. Use these components to build consistent, accessible UIs that match the Shopify admin design system." - }, - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred." - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - }, - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "OrderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedList", - "description": "Configure the following properties on the ordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OrderedList\n extends PreactCustomElement\n implements OrderedListProps\n{\n constructor();\n}" - }, - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)" - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "Tooltip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Tooltip", - "description": "Configure the following properties on the tooltip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Tooltip extends PreactOverlayElement implements TooltipProps {\n constructor();\n}" - }, - "UnorderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedList", - "description": "Configure the following properties on the unordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class UnorderedList\n extends PreactCustomElement\n implements UnorderedListProps\n{\n constructor();\n}" - }, - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "AdminAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminAction", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text to use as the Action modal's title. If not provided, the name of the extension will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminAction\n extends PreactCustomElement\n implements AdminActionProps\n{\n /**\n * The text to use as the Action modal's title. If not provided, the name of the extension will be used.\n */\n heading: string;\n /**\n * Whether the action is in a loading state, such as during initial page load or when the action is being opened.\n * When `true`, the action might be in an inert state that prevents user interaction.\n */\n loading: boolean;\n constructor();\n}" - }, - "RunnableExtension": { - "filePath": "src/extension.ts", - "name": "RunnableExtension", - "description": "Defines the structure of a runnable extension, which executes logic and returns data without rendering UI.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "Output | Promise", - "description": "The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case." - } - ], - "value": "export interface RunnableExtension {\n /**\n * The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension.\n */\n api: Api;\n /**\n * The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case.\n */\n output: Output | Promise;\n}" - }, - "ShouldRenderApi": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderApi", - "description": "The `ShouldRenderApi` object provides methods for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ShouldRenderApi\n extends StandardApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.\n */\n data: Data;\n}" - }, - "ShouldRenderOutput": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderOutput", - "description": "The output returned by `should-render` extensions to control visibility.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "boolean", - "description": "Whether to display the associated action extension. Return `true` to show the action, `false` to hide it." - } - ], - "value": "export interface ShouldRenderOutput {\n /** Whether to display the associated action extension. Return `true` to show the action, `false` to hide it. */\n display: boolean;\n}" - }, - "BlockExtensionApi": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "BlockExtensionApi", - "description": "The `BlockExtensionApi` object provides methods for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface BlockExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n\n /**\n * Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`).\n */\n navigation: Navigation;\n}" - }, - "Navigation": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "Navigation", - "description": "The `Navigation` object provides methods for navigating between extensions and admin pages.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigate", - "value": "(url: string | URL) => void", - "description": "Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "navigation.navigate('extension://my-admin-action-extension-handle')", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface Navigation {\n /**\n * Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.\n *\n * @param url - The destination URL, typically in the format 'extension://extension-handle' for other extensions\n * @example navigation.navigate('extension://my-admin-action-extension-handle')\n */\n navigate: (url: string | URL) => void;\n}" - }, - "BlockExtensionComponents": { - "filePath": "src/surfaces/admin/components/BlockExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BlockExtensionComponents", - "value": "StandardComponents | 'AdminBlock' | 'Form'", - "description": "The components available for building block extensions. Includes all standard components plus the admin block component required for block extension setup and the form component for creating forms." - }, - "AdminBlock": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlock", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminBlock\n extends PreactCustomElement\n implements AdminBlockProps\n{\n /**\n * The text displayed as the block's title in the header. If not provided, the extension name will be used.\n */\n heading: string;\n /**\n * The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.\n */\n collapsedSummary: string;\n constructor();\n}" - }, - "Form": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Form", - "description": "Configure the following properties on the form component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" - }, - "StandardApi": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "StandardApi", - "description": "The `StandardApi` object provides core methods available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface StandardApi {\n /**\n * The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.\n */\n extension: {\n target: ExtensionTarget;\n };\n\n /**\n * Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.\n */\n auth: Auth;\n\n /**\n * Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.\n */\n i18n: I18n;\n\n /**\n * Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.\n */\n intents: Intents;\n\n /**\n * Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension.\n */\n storage: Storage;\n\n /**\n * Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.\n */\n query: (\n query: string,\n options?: {variables?: Variables; version?: Omit},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n}" - }, - "GraphQLError": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "GraphQLError", - "description": "The GraphQL error returned by the [GraphQL Admin API](/docs/api/admin-graphql).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "locations", - "value": "{ line: number; column: string; }", - "description": "The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query." - } - ], - "value": "export interface GraphQLError {\n /**\n * A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query.\n */\n message: string;\n /**\n * The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string.\n */\n locations: {\n /** The line number in the GraphQL query where the error occurred. */\n line: number;\n /** The column position in the GraphQL query where the error occurred. */\n column: string;\n };\n}" - }, - "CustomerSegmentTemplate": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplate", - "description": "Defines a customer segment template that merchants can use to create targeted customer groups.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "createdOn", - "value": "string", - "description": "The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "dependencies", - "value": "{ standardMetafields?: \"facts.birth_date\"[]; customMetafields?: string[]; }", - "description": "Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string | string[]", - "description": "The template description in the merchant's language. Use an array for multiple paragraphs." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "queryToInsert", - "value": "string", - "description": "The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The template title in the merchant's language." - } - ], - "value": "export interface CustomerSegmentTemplate {\n /**\n * The template title in the merchant's language.\n */\n title: string;\n /**\n * The template description in the merchant's language. Use an array for multiple paragraphs.\n */\n description: string | string[];\n /**\n * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n query: string;\n /**\n * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n queryToInsert: string;\n /**\n * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.\n */\n dependencies?: {\n /** Standard Shopify customer metafields used in the query. */\n standardMetafields?: CustomerStandardMetafieldDependency[];\n /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */\n customMetafields?: string[];\n };\n /**\n * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge.\n */\n createdOn: string;\n}" - }, - "DiscountFunctionSettingsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "name": "DiscountFunctionSettingsApi", - "description": "The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DiscountFunctionSettingsData", - "description": "The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "DiscountsApi", - "description": "The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface DiscountFunctionSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends Omit, 'data'> {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: DiscountFunctionSettingsData;\n /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */\n discounts: DiscountsApi;\n}" - }, - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store discount function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your discount configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - }, - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - }, - "DiscountsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountsApi", - "description": "The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountClasses", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountMethod", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "updateDiscountClasses", - "value": "UpdateSignalFunction", - "description": "A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects." - } - ], - "value": "export interface DiscountsApi {\n /**\n * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.\n */\n discountClasses: ReadonlySignalLike;\n /**\n * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.\n */\n updateDiscountClasses: UpdateSignalFunction;\n /**\n * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.\n */\n discountMethod: ReadonlySignalLike;\n}" - }, - "ReadonlySignalLike": { - "filePath": "src/shared.ts", - "name": "ReadonlySignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface ReadonlySignalLike {\n /**\n * The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.\n */\n readonly value: T;\n /**\n * Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.\n */\n subscribe(fn: (value: T) => void): () => void;\n}" - }, - "DiscountClass": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountClass", - "value": "'product' | 'order' | 'shipping'", - "description": "The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).", - "isPublicDocs": true - }, - "DiscountMethod": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountMethod", - "value": "'automatic' | 'code'", - "description": "The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.", - "isPublicDocs": true - }, - "UpdateSignalFunction": { - "filePath": "src/shared.ts", - "name": "UpdateSignalFunction", - "description": "A function that updates a signal and returns a result indicating success or failure. The function is typically used along with a `ReadonlySignalLike` object.", - "params": [ - { - "name": "value", - "description": "", - "value": "T", - "filePath": "src/shared.ts" - } - ], - "returns": { - "filePath": "src/shared.ts", - "description": "", - "name": "Result", - "value": "Result" - }, - "value": "(value: T) => Result" - }, - "Result": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Result", - "value": "{success: true; value: T} | {success: false; errors: ValidationError[]}", - "description": "A result type that indicates the success or failure of an operation." - }, - "ValidationError": { - "filePath": "src/shared.ts", - "name": "ValidationError", - "description": "A validation error object that is returned when an operation fails.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "A code identifier for the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ message: string; path: string[]; }[]", - "description": "Field-level validation issues", - "isOptional": true - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message describing the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "" - } - ], - "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" - }, - "FunctionSettingsComponents": { - "filePath": "src/surfaces/admin/components/FunctionSettingsComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FunctionSettingsComponents", - "value": "FormExtensionComponents | 'FunctionSettings'", - "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." - }, - "FormExtensionComponents": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - }, - "FunctionSettings": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FunctionSettings", - "description": "Configure the following properties on the function settings component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class FunctionSettings\n extends PreactCustomElement\n implements FunctionSettingsProps\n{\n constructor();\n}" - }, - "PrintActionExtensionApi": { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "name": "PrintActionExtensionApi", - "description": "The `PrintActionExtensionApi` object provides methods for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PrintActionExtensionApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products.\n */\n data: Data;\n}" - }, - "PrintActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/PrintActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PrintActionExtensionComponents", - "value": "StandardComponents | 'AdminPrintAction'", - "description": "The components available for building print action extensions. Includes all standard components plus the admin print action component required for print action setup." - }, - "AdminPrintAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintAction", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The `src` URL of the preview and the document to print. If not provided, the preview will show an empty state and the print button will be disabled. HTML, PDFs, and images are supported." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminPrintAction\n extends PreactCustomElement\n implements AdminPrintActionProps\n{\n /**\n * The `src` URL of the preview and the document to print.\n * If not provided, the preview will show an empty state and the print button will be disabled.\n * HTML, PDFs, and images are supported.\n */\n src: string;\n constructor();\n}" - }, - "ProductDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductDetailsConfigurationApi", - "description": "The `ProductDetailsConfigurationApi` object provides methods for configuring product bundles and relationships. Access the following properties on the `ProductDetailsConfigurationApi` object to build product configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product currently being viewed in the admin.\n * @deprecated\n */\n product: Product;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Product": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "Product", - "description": "A product configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "onlineStoreUrl", - "value": "string", - "description": "The URL to view this product on the online store. Use this to create \"View in store\" links.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productCategory", - "value": "string", - "description": "The standardized product category taxonomy. Use this for product classification in search and organization.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productComponents", - "value": "ProductComponent[]", - "description": "An array of component products that make up this bundle. Each component represents a product included in the bundle configuration." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "'ACTIVE' | 'ARCHIVED' | 'DRAFT'", - "description": "The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name shown to merchants and customers." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "The total available inventory summed across all variants and locations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this product has." - } - ], - "value": "export interface Product {\n /** The product's unique global identifier (GID). */\n id: string;\n /** The product's display name shown to merchants and customers. */\n title: string;\n /** The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`). */\n handle: string;\n /** The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished). */\n status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';\n /** The total number of variants this product has. */\n totalVariants: number;\n /** The total available inventory summed across all variants and locations. */\n totalInventory: number;\n /** Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations. */\n hasOnlyDefaultVariant: boolean;\n /** The URL to view this product on the online store. Use this to create \"View in store\" links. */\n onlineStoreUrl?: string;\n /** Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values. */\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n /** The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\"). */\n productType: string;\n /** The standardized product category taxonomy. Use this for product classification in search and organization. */\n productCategory?: string;\n /** An array of component products that make up this bundle. Each component represents a product included in the bundle configuration. */\n productComponents: ProductComponent[];\n}" - }, - "ProductComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductComponent", - "description": "A component product that is part of a bundle. Represents an individual product included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "componentVariantsCount", - "value": "number", - "description": "The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "featuredImage", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "nonComponentVariantsCount", - "value": "number", - "description": "The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productUrl", - "value": "string", - "description": "The admin URL for this component product. Use this to create links to the product's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name. Use this to show which product is included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this component product has. Use this to determine if variant selection is needed for this component." - } - ], - "value": "export interface ProductComponent {\n /** The component product's unique global identifier (GID). */\n id: string;\n /** The product's display name. Use this to show which product is included in the bundle. */\n title: string;\n /** The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n featuredImage?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The total number of variants this component product has. Use this to determine if variant selection is needed for this component. */\n totalVariants: number;\n /** The admin URL for this component product. Use this to create links to the product's details page in the admin. */\n productUrl: string;\n /** The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles. */\n componentVariantsCount: number;\n /** The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations. */\n nonComponentVariantsCount: number;\n}" - }, - "PurchaseOptionsCardConfigurationApi": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "name": "PurchaseOptionsCardConfigurationApi", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ selected: { id: string; sellingPlanId?: string; }[]; }", - "description": "Selected purchase option data including product and selling plan identifiers." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PurchaseOptionsCardConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends ActionExtensionApi {\n /** Selected purchase option data including product and selling plan identifiers. */\n data: {\n /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */\n selected: {\n /** The product or variant identifier. */\n id: string;\n /** The associated selling plan identifier, if a subscription option is selected. */\n sellingPlanId?: string;\n }[];\n };\n}" - }, - "ProductVariantDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantDetailsConfigurationApi", - "description": "The `ProductVariantDetailsConfigurationApi` object provides methods for configuring product variant bundles and relationships. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to build variant configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductVariantDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product variant currently being viewed in the admin.\n * @deprecated\n */\n variant: ProductVariant;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "ProductVariant": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariant", - "description": "A product variant configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string", - "description": "The barcode, UPC, or ISBN number for the variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "string", - "description": "The original price before any discounts or markdowns." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "string", - "description": "The current selling price for this variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantComponents", - "value": "ProductVariantComponent[]", - "description": "An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for inventory tracking." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxCode", - "value": "string", - "description": "The harmonized system (HS) tax code for international shipping and customs." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number", - "description": "The physical weight of the variant as a number." - } - ], - "value": "export interface ProductVariant {\n /** The variant's unique global identifier (GID). */\n id: string;\n /** The Stock Keeping Unit (SKU) identifier for inventory tracking. */\n sku: string;\n /** The barcode, UPC, or ISBN number for the variant. */\n barcode: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The current selling price for this variant. */\n price: string;\n /** The original price before any discounts or markdowns. */\n compareAtPrice: string;\n /** Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout. */\n taxable: boolean;\n /** The harmonized system (HS) tax code for international shipping and customs. */\n taxCode: string;\n /** The physical weight of the variant as a number. */\n weight: number;\n /** The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n /** An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle. */\n productVariantComponents: ProductVariantComponent[];\n}" - }, - "ProductVariantComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantComponent", - "description": "A component variant that is part of a product bundle. Represents an individual product variant included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantUrl", - "value": "string", - "description": "The admin URL for this product variant. Use this to create links to the variant's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for this component variant.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - } - ], - "value": "export interface ProductVariantComponent {\n /** The component variant's unique global identifier (GID). */\n id: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** The Stock Keeping Unit (SKU) identifier for this component variant. */\n sku?: string;\n /** The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n image?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The admin URL for this product variant. Use this to create links to the variant's details page in the admin. */\n productVariantUrl: string;\n /** The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n}" - }, - "OrderRoutingRuleApi": { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "name": "OrderRoutingRuleApi", - "description": "The `OrderRoutingRuleApi` object provides methods for configuring order routing rules. Access the following properties on the `OrderRoutingRuleApi` object to manage rule settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldsChange", - "value": "ApplyMetafieldsChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface OrderRoutingRuleApi\n extends StandardRenderingExtensionApi {\n /** Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration. */\n applyMetafieldsChange: ApplyMetafieldsChange;\n /** The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields). */\n data: Data;\n}" - }, - "ApplyMetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "ApplyMetafieldsChange", - "description": "A function that applies metafield changes to order routing rule settings. Call this function with one or more change operations to update or remove metafields in batch. Use batch operations to apply multiple configuration changes efficiently.", - "isPublicDocs": true, - "params": [ - { - "name": "changes", - "description": "", - "value": "MetafieldsChange[]", - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(changes: MetafieldsChange[]) => void" - }, - "MetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldsChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]", - "description": "One or more metafield change operations to apply to order routing rule settings. Can be a single change or an array of changes for batch operations. Use arrays to apply multiple changes at once.", - "isPublicDocs": true - }, - "ValidationSettingsApi": { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "name": "ValidationSettingsApi", - "description": "The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "ValidationData", - "description": "The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ValidationSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: ValidationData;\n}" - }, - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - } - } - } - ], - "examples": { - "description": "Pre-built customer segment templates", - "examples": [ - { - "description": "Create a segment template targeting customers with birthdays this month. This example requires the `facts.birth_date` metafield to be set up, which enables birthday-based customer targeting for marketing campaigns.", - "codeblock": { - "title": "Target customers with birthdays this month", - "tabs": [ - { - "title": "jsx", - "code": "export default () => {\n return {\n templates: [\n {\n title: 'Birthday this month',\n description: 'Customers with birthdays in the current month',\n query: `{\n metafields: {\n key: \"birth_date\"\n namespace: \"customer\"\n value: {\n month: ${new Date().getMonth() + 1}\n }\n }\n}`,\n queryToInsert: `{\n metafields: {\n key: \"birth_date\"\n namespace: \"customer\"\n value: {\n month: ${new Date().getMonth() + 1}\n }\n }\n}`,\n dependencies: {\n standardMetafields: ['facts.birth_date'],\n },\n createdOn: '2025-01-15T00:00:00Z',\n },\n ],\n };\n};\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Create a segment template targeting customers who abandoned at least one checkout in the last 7 days. This example uses `abandoned_checkouts_count` and `last_abandoned_order_date` queries with dynamic date calculation to identify customers for abandoned cart email outreach.", - "codeblock": { - "title": "Target customers who started checkout but didn't finish", - "tabs": [ - { - "title": "jsx", - "code": "export default () => {\n return {\n templates: [\n {\n title: 'Cart abandoners',\n description: [\n 'Customers who abandoned carts in the last 7 days',\n 'Use this segment for email recovery campaigns',\n ],\n query: `{\n abandoned_checkouts_count: {\n min: 1\n }\n last_abandoned_order_date: {\n min: \"${new Date(Date.now() - 7 * 24 * 60 * 60 * 1000).toISOString()}\"\n }\n}`,\n queryToInsert: `{\n abandoned_checkouts_count: {\n min: 1\n }\n last_abandoned_order_date: {\n min: \"LAST_7_DAYS\"\n }\n}`,\n createdOn: '2025-01-15T00:00:00Z',\n },\n ],\n };\n};\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Contextual APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Test queries in admin before shipping:** Template queries aren't validated until merchants save them. Test query syntax in the [Shopify admin segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments) before shipping to avoid merchant-facing errors.\n- **Declare all metafield dependencies:** Use both `standardMetafields` (for Shopify-defined metafields) and `customMetafields` (for app-defined metafields) in the `dependencies` object. Missing dependencies cause queries to fail when merchants lack required metafields.\n- **Use `queryToInsert` for formatted display queries:** If your `query` includes formatting or comments for readability, provide a clean executable version in `queryToInsert`. If omitting `queryToInsert`, ensure `query` has no comments that would break execution." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Query validation only occurs when merchants save. Syntax errors in queries aren't caught by the API and only surface in the admin when merchants attempt to save the segment.\n- Your extension can't programmatically create segments. Templates only provide the query and metadata. Merchants must manually save templates as segments.\n- Dependencies don't auto-create metafields. If required metafields don't exist, merchants see errors when trying to use the template. The API only declares dependencies, it doesn't create them.\n- Dynamic query generation isn't supported. Queries must be static strings. You can't parameterize queries based on merchant input or shop configuration." - } - ] - }, - { - "name": "Discount Function Settings API", - "description": "The Discount Function Settings API lets you build UI extensions that provide custom configuration interfaces for [discount functions](/docs/apps/build/discounts/build-ui-extension). Use this API to create settings pages for [Shopify Functions](/docs/apps/build/functions) that implement discount logic.", - "isVisualComponent": false, - "type": "API", - "requires": "the [function settings](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/function-settings) component.", - "defaultExample": { - "description": "Save a minimum purchase threshold to a metafield with decimal number validation. This example uses a [text field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/text-field) for input, calls `applyMetafieldChange`, and displays success or error feedback.", - "codeblock": { - "title": "Configure discount threshold", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [threshold, setThreshold] = useState('50.00');\n const [saved, setSaved] = useState(false);\n\n const handleSave = async () => {\n const result = await shopify.applyMetafieldChange({\n type: 'updateMetafield',\n namespace: 'discount-config',\n key: 'minimum_purchase',\n value: threshold,\n valueType: 'number_decimal',\n });\n\n if (result.type === 'success') {\n setSaved(true);\n } else {\n console.error('Configuration failed:', result.message);\n }\n };\n\n return (\n <s-function-settings>\n <s-text-field\n label=\"Minimum purchase amount\"\n value={threshold}\n onChange={(value) => setThreshold(value)}\n />\n <s-button onClick={handleSave}>Save Threshold</s-button>\n {saved && <s-banner status=\"success\">Threshold configured!</s-banner>}\n </s-function-settings>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "applyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration data. Accepts a change object with the operation type, key, namespace, value, and [value type](/docs/apps/build/metafields/list-of-data-types).", - "type": "ApplyMetafieldChange", - "typeDefinitions": { - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to validation settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify validation settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store validation function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_quantity'` or `'shipping_restriction'`)." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_quantity'` or `'shipping_restriction'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your validation configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - } - } - }, - { - "title": "data", - "description": "The `data` object exposed to the extension containing the discount function settings. Provides access to the discount identifier and associated [metafields](/docs/apps/build/metafields) that store function configuration values. Use this data to populate your settings UI and understand the current function configuration in the `admin.discount-details.function-settings.render` target.", - "type": "DiscountFunctionSettingsData", - "typeDefinitions": { - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - } - } - } - ], - "examples": { - "description": "Configure discount function settings", - "examples": [ - { - "description": "Save multiple discount configuration settings in a single operation. This example stores customer tags as JSON and usage limits as an integer, demonstrating how to apply multiple metafield changes sequentially.", - "codeblock": { - "title": "Configure eligibility rules", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [tags, setTags] = useState('vip, wholesale, premium');\n const [maxUses, setMaxUses] = useState('5');\n\n const handleSave = async () => {\n await shopify.applyMetafieldChange({\n type: 'updateMetafield',\n namespace: 'discount-config',\n key: 'eligible_customer_tags',\n value: JSON.stringify(tags.split(',').map((t) => t.trim())),\n valueType: 'json',\n });\n\n await shopify.applyMetafieldChange({\n type: 'updateMetafield',\n namespace: 'discount-config',\n key: 'max_uses_per_customer',\n value: maxUses,\n valueType: 'number_integer',\n });\n };\n\n return (\n <s-function-settings>\n <s-text-field\n label=\"Eligible customer tags (comma-separated)\"\n value={tags}\n onChange={(value) => setTags(value)}\n />\n <s-number-field\n label=\"Max uses per customer\"\n value={maxUses}\n onChange={(value) => setMaxUses(value)}\n />\n <s-button onClick={handleSave}>Save Eligibility Rules</s-button>\n </s-function-settings>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Load discount metafields on mount and display current configuration. This example shows reducing metafields into a settings object, checking for missing values, and applying defaults only when needed.", - "codeblock": { - "title": "Load existing settings", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useEffect} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [settings, setSettings] = useState({});\n\n useEffect(() => {\n const initializeSettings = async () => {\n const existingSettings = data.metafields.reduce((acc, field) => {\n acc[field.key] = field.value;\n return acc;\n }, {});\n\n setSettings(existingSettings);\n\n if (!existingSettings.eligible_tags) {\n await shopify.applyMetafieldChange({\n type: 'updateMetafield',\n namespace: 'discount-config',\n key: 'eligible_tags',\n value: JSON.stringify(['vip', 'wholesale']),\n valueType: 'json',\n });\n }\n };\n\n initializeSettings();\n }, [data]);\n\n return (\n <s-function-settings>\n <s-text>Current settings:</s-text>\n {Object.entries(settings).map(([key, value]) => (\n <s-text key={key}>\n {key}: {String(value)}\n </s-text>\n ))}\n </s-function-settings>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Contextual APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Check operation result type:** `applyMetafieldChange` returns `{ type: 'success' }` or `{ type: 'error', message: string }`. Errors don't throw exceptions, so always check the returned `type` property." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Metafields are subject to [size limits](/docs/apps/build/metafields/metafield-limits). Individual metafield values can't exceed 256KB, and total metafields per resource have storage limits.\n- The `applyMetafieldChange` method is sequential. Operations are processed one at a time. Rapid successive calls may lead to race conditions where later updates overwrite earlier ones.\n- Your extension can't directly modify the discount method. The automatic vs. code setting is controlled by Shopify and only readable via `discounts.method.value`.\n- Metafield changes are applied immediately. Unlike some admin forms, metafield changes persist right away without waiting for the merchant to save the discount." - } - ] - }, - { - "name": "Intents API", - "overviewPreviewDescription": "Orchestrate workflows and operations across Shopify resources", - "description": "The Intents API launches Shopify's native admin interfaces for creating and editing resources. When your extension calls an intent, merchants complete their changes using the standard admin UI, and your extension receives the result. This means you don't need to build custom forms.\n\nUse this API to build workflows like adding products to collections from bulk actions, creating multiple related resources in sequence (like a product, collection, and discount for a promotion), opening specific resources for editing from custom buttons, or launching discount creation with pre-selected types.", - "isVisualComponent": true, - "category": "Target APIs", - "subCategory": "Utility APIs", - "thumbnail": "intents.png", - "requires": "an admin UI [block or action](/docs/api/admin-extensions/{API_VERSION}#building-your-extension) extension.", - "defaultExample": { - "description": "Launch the article creation workflow from a button click. This example uses `shopify.intents.invoke()` to open the article editor, awaits the workflow completion, and displays success or cancellation feedback based on the response code.", - "image": "intents.png", - "codeblock": { - "title": "Create a new article", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [creating, setCreating] = useState(false);\n\n const handleCreate = async () => {\n setCreating(true);\n \n const activity = await shopify.intents.invoke('create:shopify/Article');\n const response = await activity.complete;\n\n setResult(response);\n setCreating(false);\n };\n\n return (\n <s-admin-block heading=\"Create Article\">\n <s-button onClick={handleCreate} disabled={creating}>\n {creating ? 'Creating...' : 'Launch Article Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Article created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Article');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Article created:', response.data);\n}\n", - "language": "js" - } - ] - } - }, - "definitions": [ - { - "title": "invoke method", - "description": "The `invoke` method launches a Shopify admin workflow for creating or editing resources. The method returns a promise that resolves to an activity handle you can await to get the workflow result.\n\nThe method accepts either:\n- **String query:** `${action}:${type},${value}` with optional second parameter (`IntentQueryOptions`)\n- **Object:** Properties for `action`, `type`, `value`, and `data`\n\n### IntentQueryOptions parameters\n\nOptional parameters for the `invoke` method when using the string query format:\n\n- **`value`** (`string`): The resource identifier for edit operations (for example, `'gid://shopify/Product/123'`). Required when editing existing resources. Omit for create operations.\n- **`data`** (`{ [key: string]: unknown }`): Additional context required by specific resource types. For example, discounts require a type, variants require a product ID, and metaobjects require a definition type.\n\n### Supported resources\n\nThe following tables show which resource types you can create or edit, and what values you need to pass for `value` and `data` for each operation.\n\n#### Article\n\n[Articles](/docs/api/admin-graphql/latest/objects/Article) are blog posts published on the Online Store. Use this to create or edit articles for merchant blogs.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Article` | — | — |\n| `edit` | `shopify/Article` | `gid://shopify/Article/{id}` | — |\n\n#### Catalog\n\n[Catalogs](/docs/api/admin-graphql/latest/interfaces/Catalog) are product groupings that organize products for different markets or channels. Use this to create or edit catalogs for B2B or multi-market selling.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Catalog` | — | — |\n| `edit` | `shopify/Catalog` | `gid://shopify/Catalog/{id}` | — |\n\n#### Collection\n\n[Collections](/docs/api/admin-graphql/latest/objects/Collection) are groups of products organized manually or by automated rules. Use this to create or edit product collections.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Collection` | — | — |\n| `edit` | `shopify/Collection` | `gid://shopify/Collection/{id}` | — |\n\n#### Customer\n\n[Customers](/docs/api/admin-graphql/latest/objects/Customer) are profiles with contact information, order history, and metadata. Use this to create or edit customer accounts.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Customer` | — | — |\n| `edit` | `shopify/Customer` | `gid://shopify/Customer/{id}` | — |\n\n#### Discount\n\n[Discounts](/docs/api/admin-graphql/latest/objects/DiscountNode) are price reductions applied to products, orders, or shipping. Use this to create or edit discount codes and automatic discounts. Creating discounts requires specifying a discount type.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Discount` | — | `{ type: 'amount-off-product' \\| 'amount-off-order' \\| 'buy-x-get-y' \\| 'free-shipping' }` |\n| `edit` | `shopify/Discount` | `gid://shopify/Discount/{id}` | — |\n\n#### Location\n\n[Locations](/docs/api/admin-graphql/latest/objects/Location) are physical or virtual places where merchants store inventory and fulfill orders. Use this to create or edit locations for managing stock and fulfillment.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Location` | — | — |\n| `edit` | `shopify/Location` | `gid://shopify/Location/{id}` | — |\n\n#### Market\n\n[Markets](/docs/api/admin-graphql/latest/objects/Market) are geographic regions with customized pricing, languages, and domains. Use this to create or edit markets for international selling.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Market` | — | — |\n| `edit` | `shopify/Market` | `gid://shopify/Market/{id}` | — |\n\n#### Menu\n\n[Menus](/docs/api/admin-graphql/latest/objects/Menu) are navigation structures for the Online Store. Use this to create or edit menu structures and links.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Menu` | — | — |\n| `edit` | `shopify/Menu` | `gid://shopify/Menu/{id}` | — |\n\n#### Metafield definition\n\n[Metafield definitions](/docs/api/admin-graphql/latest/objects/MetafieldDefinition) are schemas that define custom data fields for resources. Use this to create or edit metafield definitions that merchants can use to add structured data to products, customers, and other resources.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/MetafieldDefinition` | — | `{ ownerType: 'Product' }` |\n| `edit` | `shopify/MetafieldDefinition` | `gid://shopify/MetafieldDefinition/{id}` | `{ ownerType: 'Product' }` |\n\n#### Metaobject\n\n[Metaobjects](/docs/api/admin-graphql/latest/objects/Metaobject) are custom structured data entries based on metaobject definitions. Use this to create or edit metaobject instances that store complex custom data. Requires a definition type.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Metaobject` | — | `{ type: 'shopify--color-pattern' }` |\n| `edit` | `shopify/Metaobject` | `gid://shopify/Metaobject/{id}` | `{ type: 'shopify--color-pattern' }` |\n\n#### Metaobject definition\n\n[Metaobject definitions](/docs/api/admin-graphql/latest/objects/MetaobjectDefinition) are schemas that define the structure for metaobjects. Use this to create or edit metaobject definitions that determine the fields and data types for custom structured data.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/MetaobjectDefinition` | — | — |\n| `edit` | `shopify/MetaobjectDefinition` | — | `{ type: 'my_metaobject_definition_type' }` |\n\n#### Page\n\n[Pages](/docs/api/admin-graphql/latest/objects/Page) are static content pages for the Online Store. Use this to create or edit pages like About Us, Contact, or custom informational pages.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Page` | — | — |\n| `edit` | `shopify/Page` | `gid://shopify/Page/{id}` | — |\n\n#### Product\n\n[Products](/docs/api/admin-graphql/latest/objects/Product) are items sold in the store with pricing, inventory, and variants. Use this to create or edit products.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Product` | — | — |\n| `edit` | `shopify/Product` | `gid://shopify/Product/{id}` | — |\n\n#### Product variant\n\n[Product variants](/docs/api/admin-graphql/latest/objects/ProductVariant) are specific combinations of product options like size and color. Use this to create or edit product variants. Creating variants requires a parent product ID.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/ProductVariant` | — | `{ productId: 'gid://shopify/Product/{id}' }` |\n| `edit` | `shopify/ProductVariant` | `gid://shopify/ProductVariant/{id}` | `{ productId: 'gid://shopify/Product/{id}' }` |\n\n> Note:\n> When editing products with variants, query the [`product.hasOnlyDefaultVariant`](/docs/api/admin-graphql/latest/objects/Product#field-Product.fields.hasOnlyDefaultVariant) field first. If `true`, then use the `shopify/Product` edit intent. If `false`, then use the `shopify/ProductVariant` edit intent for specific variants.\n\n#### Settings\n\nSettings are the configuration options for the store. Use this to invoke and edit settings.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `edit` | `settings/LocationDefault` | — | — |\n| `edit` | `settings/OrderIdFormat` | — | — |\n| `edit` | `settings/OrderProcessing` | — | — |\n| `edit` | `settings/StoreDefaults` | — | — |\n| `edit` | `settings/StoreDetails` | — | — |", - "type": "IntentInvokeApi", - "typeDefinitions": { - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - } - } - }, - { - "title": "IntentResponse", - "description": "The result returned when an intent workflow completes. Check the `code` property to determine the outcome:\n- `'ok'`: The merchant completed the workflow successfully.\n- `'error'`: The workflow failed due to validation or other errors.\n- `'closed'`: The merchant cancelled without completing.", - "type": "IntentResponse", - "typeDefinitions": { - "IntentResponse": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "IntentResponse", - "value": "SuccessIntentResponse | ErrorIntentResponse | ClosedIntentResponse", - "description": "The result of an intent workflow. Check the `code` property to determine the outcome: `'ok'` for success, `'error'` for failure, or `'closed'` if the merchant cancelled.", - "isPublicDocs": true - }, - "SuccessIntentResponse": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "SuccessIntentResponse", - "description": "The response returned when a merchant successfully completes the workflow. Use this to access the created or updated resource data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "'ok'", - "description": "Indicates successful completion. When `'ok'`, the merchant completed the workflow and the resource was created or updated.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ [key: string]: unknown; }", - "description": "Additional data returned by the workflow, such as the created or updated resource information with IDs and properties.", - "isOptional": true - } - ], - "value": "export interface SuccessIntentResponse {\n /** Indicates successful completion. When `'ok'`, the merchant completed the workflow and the resource was created or updated. */\n code?: 'ok';\n /** Additional data returned by the workflow, such as the created or updated resource information with IDs and properties. */\n data?: {[key: string]: unknown};\n}" - }, - "ErrorIntentResponse": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "ErrorIntentResponse", - "description": "The response returned when the workflow fails due to validation errors or other issues. Use this to display error messages and help merchants fix problems.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "'error'", - "description": "Indicates the workflow failed. When `'error'`, the workflow encountered validation errors or other issues that prevented completion.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ path?: string[]; message?: string; code?: string; }[]", - "description": "Specific validation issues or field errors. Present when validation fails on particular fields, allowing you to show targeted error messages.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A general error message describing what went wrong. Use this to display feedback when specific field errors aren't available.", - "isOptional": true - } - ], - "value": "export interface ErrorIntentResponse {\n /** Indicates the workflow failed. When `'error'`, the workflow encountered validation errors or other issues that prevented completion. */\n code?: 'error';\n /** A general error message describing what went wrong. Use this to display feedback when specific field errors aren't available. */\n message?: string;\n /** Specific validation issues or field errors. Present when validation fails on particular fields, allowing you to show targeted error messages. */\n issues?: {\n /** The path to the field that has an error (for example, `['product', 'title']`). Use this to identify which field caused the validation failure. */\n path?: string[];\n /** A description of what's wrong with this field. Display this to help merchants understand how to fix the error. */\n message?: string;\n /** A machine-readable error code for this issue. Use this for programmatic error handling or logging. */\n code?: string;\n }[];\n}" - }, - "ClosedIntentResponse": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "ClosedIntentResponse", - "description": "The response returned when a merchant closes or cancels the workflow without completing it. Check for this response to handle cancellation gracefully in your extension.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "'closed'", - "description": "Indicates the workflow was closed without completion. When `'closed'`, the merchant exited the workflow before finishing.", - "isOptional": true - } - ], - "value": "export interface ClosedIntentResponse {\n /** Indicates the workflow was closed without completion. When `'closed'`, the merchant exited the workflow before finishing. */\n code?: 'closed';\n}" - } - } - } - ], - "examples": { - "description": "Intents for each Shopify resource type", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Open the article editor for a selected blog post. This example retrieves the article GID from extension context, passes it to the edit intent, and handles both successful updates and cancellations.", - "codeblock": { - "title": "Edit an existing article", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/Article/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/Article', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Article\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Article'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Article updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Article', {\n value: 'gid://shopify/Article/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Article updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the catalog creation workflow to set up B2B customer groups or market-specific product collections. This example invokes the create intent, manages loading state, and displays success or cancellation feedback.", - "codeblock": { - "title": "Create a new catalog", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/Catalog');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Catalog\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Catalog Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Catalog created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Catalog');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Catalog created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the catalog editor to adjust product assignments or market settings. This example retrieves the catalog GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing catalog", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/Catalog/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/Catalog', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Catalog\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Catalog'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Catalog updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Catalog', {\n value: 'gid://shopify/Catalog/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Catalog updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the collection creation workflow for organizing products on the storefront. This example invokes the create intent, tracks loading state, and displays feedback when the workflow completes.", - "codeblock": { - "title": "Create a new collection", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/Collection');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Collection\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Collection Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Collection created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Collection');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Collection created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the collection editor to modify products or automation rules. This example retrieves the collection GID, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing collection", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/Collection/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/Collection', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Collection\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Collection'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Collection updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Collection', {\n value: 'gid://shopify/Collection/987654321',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Collection updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the customer creation form to add a new profile with contact details and addresses. This example invokes the create intent, awaits completion, and displays feedback based on the result code.", - "codeblock": { - "title": "Create a new customer", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/Customer');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Customer\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Customer Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Customer created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Customer');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Customer created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the customer editor to update contact information or tags. This example retrieves the customer GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing customer", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/Customer/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/Customer', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Customer\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Customer'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Customer updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Customer', {\n value: 'gid://shopify/Customer/456789123',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Customer updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the discount creation form for setting up promotional campaigns. This example invokes the create intent, manages loading state, and displays feedback on completion.", - "codeblock": { - "title": "Create a new discount", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/Discount');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Discount\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Discount Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Discount created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Discount', {\n data: {type: 'amount-off-product'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Discount created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the discount editor to adjust values or extend active dates. This example retrieves the discount GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing discount", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/Discount/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/Discount', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Discount\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Discount'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Discount updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Discount', {\n value: 'gid://shopify/Discount/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Discount updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the location creation workflow to add a new physical or virtual fulfillment location. This example invokes the create intent, manages loading state, and displays feedback on completion.", - "codeblock": { - "title": "Create a new location", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n\n const activity = await shopify.intents.invoke('create:shopify/Location');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Location\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Location Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Location created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Location');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Location created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the location editor to update address details, fulfillment settings, or inventory tracking. This example retrieves the location GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing location", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/Location/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n\n const activity = await shopify.intents.invoke('edit:shopify/Location', {\n value: resourceId,\n });\n\n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Location\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Location'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Location updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Location', {\n value: 'gid://shopify/Location/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Location updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the market creation workflow for international selling with region-specific configurations. This example invokes the create intent, manages loading state, and displays feedback on completion.", - "codeblock": { - "title": "Create a new market", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/Market');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Market\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Market Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Market created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Market');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Market created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the market editor to adjust geographic coverage or pricing strategies. This example retrieves the market GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing market", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/Market/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/Market', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Market\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Market'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Market updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Market', {\n value: 'gid://shopify/Market/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Market updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the menu creation workflow for storefront navigation headers or footers. This example invokes the create intent, tracks loading state, and displays feedback on completion.", - "codeblock": { - "title": "Create a new menu", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/Menu');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Menu\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Menu Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Menu created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Menu');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Menu created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the menu editor to reorganize navigation structure or update links. This example retrieves the menu GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing menu", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/Menu/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/Menu', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Menu\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Menu'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Menu updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Menu', {\n value: 'gid://shopify/Menu/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Menu updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the metafield definition creator to add custom data fields to products, orders, or customers. This example invokes the create intent, manages loading state, and displays feedback on completion.", - "codeblock": { - "title": "Create a new metafield definition", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/MetafieldDefinition');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Metafield Definition\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Metafield Definition Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Metafield Definition created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/MetafieldDefinition', {\n data: {ownerType: 'product'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metafield definition created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the metafield definition editor to modify validation rules or field descriptions. This example retrieves the definition GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing metafield definition", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/MetafieldDefinition/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/MetafieldDefinition', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Metafield Definition\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Metafield Definition'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Metafield Definition updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/MetafieldDefinition', {\n value: 'gid://shopify/MetafieldDefinition/123456789',\n data: {ownerType: 'product'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metafield definition updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the metaobject creator to add a new entry to a custom content type. This example invokes the create intent, tracks loading state, and displays feedback on completion.", - "codeblock": { - "title": "Create a new metaobject", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/Metaobject');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Metaobject\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Metaobject Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Metaobject created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Metaobject', {\n data: {type: 'shopify--color-pattern'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metaobject created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the metaobject editor to modify field values or resource references. This example retrieves the metaobject GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing metaobject", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/Metaobject/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/Metaobject', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Metaobject\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Metaobject'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Metaobject updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Metaobject', {\n value: 'gid://shopify/Metaobject/123456789',\n data: {type: 'shopify--color-pattern'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metaobject updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the metaobject definition creator to build reusable content types with custom field schemas. This example invokes the create intent, manages loading state, and displays feedback on completion.", - "codeblock": { - "title": "Create a new metaobject definition", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/MetaobjectDefinition');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Metaobject Definition\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Metaobject Definition Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Metaobject Definition created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/MetaobjectDefinition');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metaobject definition created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the metaobject definition editor to add fields or update validation rules. This example retrieves the definition GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing metaobject definition", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/MetaobjectDefinition/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/MetaobjectDefinition', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Metaobject Definition\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Metaobject Definition'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Metaobject Definition updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/MetaobjectDefinition', {\n data: {type: 'my_metaobject_definition_type'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metaobject definition updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the page creator to add an informational page like About Us or Shipping Policy. This example invokes the create intent, manages loading state, and displays feedback on completion.", - "codeblock": { - "title": "Create a new page", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/Page');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Page\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Page Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Page created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Page');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Page created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the page editor to update content or SEO metadata. This example retrieves the page GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing page", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/Page/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/Page', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Page\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Page'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Page updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Page', {\n value: 'gid://shopify/Page/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Page updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the product creation workflow to add a new item to the store catalog. This example invokes the create intent, tracks loading state, and displays feedback on completion.", - "codeblock": { - "title": "Create a new product", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [creating, setCreating] = useState(false);\n\n const handleCreate = async () => {\n setCreating(true);\n \n const activity = await shopify.intents.invoke('create:shopify/Product');\n const response = await activity.complete;\n\n setResult(response);\n setCreating(false);\n };\n\n return (\n <s-admin-block heading=\"Create Product\">\n <s-button onClick={handleCreate} disabled={creating}>\n {creating ? 'Creating...' : 'Launch Product Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">\n Product created: {result.data?.product?.id}\n </s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/Product');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Product created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the product editor to update details, pricing, or images. This example retrieves the product GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing product", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [editing, setEditing] = useState(false);\n\n const productId = data.selected[0]?.id || 'gid://shopify/Product/123456789';\n\n const handleEdit = async () => {\n setEditing(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/Product', {\n value: productId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setEditing(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Product\">\n <s-text>Product: {productId}</s-text>\n <s-button onClick={handleEdit} disabled={editing}>\n {editing ? 'Opening...' : 'Edit Product'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Product updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/Product', {\n value: 'gid://shopify/Product/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Product updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch the variant creation workflow to add size, color, or material options to a product. This example invokes the create intent, manages loading state, and displays feedback on completion.", - "codeblock": { - "title": "Create a new variant", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('create:shopify/ProductVariant');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Create Product Variant\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Creating...' : 'Launch Product Variant Creator'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Product Variant created successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Creation cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('create:shopify/ProductVariant', {\n data: {productId: 'gid://shopify/Product/123456789'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Product variant created:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Open the variant editor to modify pricing, SKU, or inventory levels. This example retrieves the variant GID from extension context, invokes the edit intent, and handles the completion response.", - "codeblock": { - "title": "Edit an existing variant", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const resourceId = data.selected[0]?.id || 'gid://shopify/ProductVariant/123456789';\n\n const handleAction = async () => {\n setLoading(true);\n \n const activity = await shopify.intents.invoke('edit:shopify/ProductVariant', {\n value: resourceId,\n });\n \n const response = await activity.complete;\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Product Variant\">\n <s-text>Editing: {resourceId}</s-text>\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Opening...' : 'Edit Product Variant'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Product Variant updated!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:shopify/ProductVariant', {\n value: 'gid://shopify/ProductVariant/123456789',\n data: {productId: 'gid://shopify/Product/123456789'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Product variant updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Launch locations in Settings to update the default location of the store.", - "codeblock": { - "title": "Edit default location", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n\n const activity = await shopify.intents.invoke('edit:settings/LocationDefault');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Default Location\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Editing...' : 'Launch Default Location Editor'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Settings updated</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit default location cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const {intents} = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:settings/LocationDefault');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Settings updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Launch store details in Settings to update the store name, email, or phone number.", - "codeblock": { - "title": "Edit store details", - "tabs": [ - { - "title": "jsx", - "code": "import { render } from 'preact';\nimport { useState } from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n\n const activity = await shopify.intents.invoke('edit:settings/StoreDetails');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Store Details\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Editing...' : 'Launch Store Details Editor'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">\n Store details updated successfully!\n </s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit store details cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const { intents } = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:settings/StoreDetails');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Store details updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Launch store defaults in Settings to update the store currency, timezone, or country.", - "codeblock": { - "title": "Edit store defaults", - "tabs": [ - { - "title": "jsx", - "code": "import { render } from 'preact';\nimport { useState } from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n\n const activity = await shopify.intents.invoke('edit:settings/StoreDetails');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Store Details\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Editing...' : 'Launch Store Details Editor'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Store details updated successfully!</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit store details cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const { intents } = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:settings/StoreDefaults');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Store defaults updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Launch order ID in Settings to update the format.", - "codeblock": { - "title": "Edit Order ID Format", - "tabs": [ - { - "title": "jsx", - "code": "import { render } from 'preact';\nimport { useState } from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n\n const activity = await shopify.intents.invoke('edit:settings/OrderIdFormat');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Order ID Format\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Editing...' : 'Launch Order ID Format Editor'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Settings updated</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit order ID format cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const { intents } = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:settings/OrderIdFormat');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Settings updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - }, - { - "description": "Launch order processing in Settings to update the store order processing preferences.", - "codeblock": { - "title": "Edit order processing", - "tabs": [ - { - "title": "jsx", - "code": "import { render } from 'preact';\nimport { useState } from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [result, setResult] = useState(null);\n const [loading, setLoading] = useState(false);\n\n const handleAction = async () => {\n setLoading(true);\n\n const activity = await shopify.intents.invoke('edit:settings/OrderProcessing');\n const response = await activity.complete;\n\n setResult(response);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Edit Order Processing\">\n <s-button onClick={handleAction} disabled={loading}>\n {loading ? 'Editing...' : 'Launch Order Processing Editor'}\n </s-button>\n {result?.code === 'ok' && (\n <s-banner status=\"success\">Settings updated</s-banner>\n )}\n {result?.code === 'closed' && (\n <s-text>Edit order processing cancelled</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx", - "editable": false - }, - { - "title": "js", - "code": "const { intents } = useApi(TARGET);\n\nconst activity = await intents.invoke('edit:settings/OrderProcessing');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Settings updated:', response.data);\n}\n", - "language": "js", - "editable": false - } - ] - } - } - ] - } - ] - }, - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Parse `ErrorIntentResponse.issues` array for specific feedback:** When `code: 'error'`, the `issues` array contains structured validation errors with field paths and messages. Use this to show specific error feedback rather than generic error messages.\n- **Distinguish `closed` from `error`:** `code: 'closed'` means the merchant cancelled, while `code: 'error'` means validation or save failures. Handle these differently. Closed isn't an error state.\n- **Query `product.hasOnlyDefaultVariant` before editing:** If the value is `false`, use the `shopify/ProductVariant` edit intent instead of `shopify/Product` to edit specific variants." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Some resources require `data` for create operations. Discounts need `{ type: 'amount-off-product' }`, variants need `{ productId: 'gid://...' }`, and metaobjects need `{ type: 'definition-type' }`. Missing required data causes the intent to fail.\n- MetaobjectDefinition edit requires `{ data: { type: 'definition-type' }}` instead of passing the GID in `value`. It's the only resource with this pattern.\n- Intent workflows pause your extension until completion. You can't run other operations while an intent is open.\n- The workflow UI can't be customized. Field order, labels, and validation messages are controlled by Shopify and can't be modified.\n- Your extension only receives the final result. Intermediate workflow state and partial saves aren't communicated back to your extension." - } - ] - }, - { - "name": "Order Routing Rule API", - "description": "The Order Routing Rule API provides access to [order routing rule](/docs/apps/build/orders-fulfillment/order-routing-apps) configuration and settings management. Use this API to build custom configuration interfaces for order routing rules that determine fulfillment locations.", - "isVisualComponent": false, - "type": "API", - "requires": "the [function settings](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/function-settings) component.", - "defaultExample": { - "description": "Set preferred and fallback fulfillment locations with [text field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/text-field) inputs. This example applies two metafield changes in a single batch operation to configure location priority for order routing.", - "codeblock": { - "title": "Configure location priority", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [preferred, setPreferred] = useState('gid://shopify/Location/123456789');\n const [fallback, setFallback] = useState('gid://shopify/Location/987654321');\n\n const handleSave = () => {\n shopify.applyMetafieldsChange([\n {\n type: 'updateMetafield',\n namespace: 'routing',\n key: 'preferred_location',\n value: preferred,\n valueType: 'single_line_text_field',\n },\n {\n type: 'updateMetafield',\n namespace: 'routing',\n key: 'fallback_location',\n value: fallback,\n valueType: 'single_line_text_field',\n },\n ]);\n };\n\n return (\n <s-function-settings>\n <s-text-field\n label=\"Preferred location ID\"\n value={preferred}\n onChange={(value) => setPreferred(value)}\n />\n <s-text-field\n label=\"Fallback location ID\"\n value={fallback}\n onChange={(value) => setFallback(value)}\n />\n <s-button onClick={handleSave}>Save Location Priority</s-button>\n </s-function-settings>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `OrderRoutingRuleApi` object provides access to order routing rule data and configuration. Access the following properties on the `OrderRoutingRuleApi` object to interact with the current order routing rule context in the `admin.settings.order-routing-rule.render` target.", - "type": "OrderRoutingRuleApi", - "typeDefinitions": { - "OrderRoutingRuleApi": { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "name": "OrderRoutingRuleApi", - "description": "The `OrderRoutingRuleApi` object provides methods for configuring order routing rules. Access the following properties on the `OrderRoutingRuleApi` object to manage rule settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldsChange", - "value": "ApplyMetafieldsChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface OrderRoutingRuleApi\n extends StandardRenderingExtensionApi {\n /** Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration. */\n applyMetafieldsChange: ApplyMetafieldsChange;\n /** The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields). */\n data: Data;\n}" - }, - "ApplyMetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "ApplyMetafieldsChange", - "description": "A function that applies metafield changes to order routing rule settings. Call this function with one or more change operations to update or remove metafields in batch. Use batch operations to apply multiple configuration changes efficiently.", - "isPublicDocs": true, - "params": [ - { - "name": "changes", - "description": "", - "value": "MetafieldsChange[]", - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(changes: MetafieldsChange[]) => void" - }, - "MetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldsChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]", - "description": "One or more metafield change operations to apply to order routing rule settings. Can be a single change or an array of changes for batch operations. Use arrays to apply multiple changes at once.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store order routing rule configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'preferred_location'` or `'routing_priority'`)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'preferred_location'` or `'routing_priority'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing order routing rule configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values.", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your order routing rule configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "Auth": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "Auth", - "description": "The `Auth` object provides authentication methods for secure communication with your app backend.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "idToken", - "value": "() => Promise", - "description": "Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved." - } - ], - "value": "export interface Auth {\n /**\n * Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved.\n */\n idToken: () => Promise;\n}" - }, - "Data": { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "name": "Data", - "description": "The `data` object exposed to order routing rule extensions in the `admin.settings.order-routing-rule.render` target. Use this to access the current rule configuration and build your settings interface.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "rule", - "value": "OrderRoutingRule", - "description": "The order routing rule being configured by the merchant. Use this to access the rule's properties and populate your settings UI with existing configuration values." - } - ], - "value": "export interface Data {\n /** The order routing rule being configured by the merchant. Use this to access the rule's properties and populate your settings UI with existing configuration values. */\n rule: OrderRoutingRule;\n}" - }, - "OrderRoutingRule": { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "name": "OrderRoutingRule", - "description": "An order routing rule configuration that determines how orders are routed to fulfillment locations. Use this to access the rule's current settings and populate your configuration interface.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A description explaining the rule's purpose and how it routes orders. Use this to help merchants understand what the rule does." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for the order routing rule. Use this ID to associate configuration changes with the correct rule." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "label", - "value": "string", - "description": "The display label for the order routing rule shown to merchants in the admin. Use this to identify the rule in lists and settings pages." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the routing rule's configuration values. Use these metafields to populate your settings UI with the current rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "priority", - "value": "number", - "description": "The priority order for rule evaluation when multiple rules exist. Lower numbers are evaluated first (for example, a rule with priority 1 runs before priority 2). Use this to understand the rule's position in the evaluation sequence.", - "isOptional": true - } - ], - "value": "export interface OrderRoutingRule {\n /** The display label for the order routing rule shown to merchants in the admin. Use this to identify the rule in lists and settings pages. */\n label: string;\n /** A description explaining the rule's purpose and how it routes orders. Use this to help merchants understand what the rule does. */\n description: string;\n /** The unique global identifier (GID) for the order routing rule. Use this ID to associate configuration changes with the correct rule. */\n id: string;\n /** The priority order for rule evaluation when multiple rules exist. Lower numbers are evaluated first (for example, a rule with priority 1 runs before priority 2). Use this to understand the rule's position in the evaluation sequence. */\n priority?: number;\n /** An array of [metafields](/docs/apps/build/metafields) that store the routing rule's configuration values. Use these metafields to populate your settings UI with the current rule configuration. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) associated with an order routing rule. Use metafields to persist settings that control how your order routing function behaves, such as location preferences, routing criteria, or custom fulfillment rules.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string | null", - "description": "The unique global identifier (GID) for this metafield. Present for existing metafields, absent for new ones. Use this ID to reference the metafield in GraphQL operations.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'preferred_location'` or `'routing_priority'`)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. Use consistent namespaces to group related settings for your order routing rule.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "SupportedDefinitionType", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/data.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | null", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI.", - "isOptional": true - } - ], - "value": "export interface Metafield {\n /** The unique global identifier (GID) for this metafield. Present for existing metafields, absent for new ones. Use this ID to reference the metafield in GraphQL operations. */\n id?: string | null;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'preferred_location'` or `'routing_priority'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value?: string | null;\n /** The namespace that organizes related metafields together. Use consistent namespaces to group related settings for your order routing rule. */\n namespace?: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type?: SupportedDefinitionType;\n}" - }, - "ExtensionTarget": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionTarget", - "value": "keyof ExtensionTargets", - "description": "A string literal union of all valid extension target identifiers. Use this type to specify where your admin UI extension should render, such as `admin.product-details.block.render` for a block on product details pages or `admin.order-details.action.render` for an action on order details pages. The target determines the extension's location, available APIs, and UI components." - }, - "ExtensionTargets": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "name": "ExtensionTargets", - "description": "Maps extension target identifiers to their corresponding extension types. Each target represents a specific location or context in the Shopify admin where extensions can render or execute. Use these targets to define where your extension appears and what capabilities it has access to.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.app.tools.data", - "value": "RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >", - "description": "A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-location-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customers.segmentation-templates.data", - "value": "RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >", - "description": "A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.function-settings.render", - "value": "RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.configuration.render", - "value": "RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.reorder.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.configuration.render", - "value": "RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.internal-order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.validation.render", - "value": "RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." - } - ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" - }, - "RenderExtension": { - "filePath": "src/extension.ts", - "name": "RenderExtension", - "description": "Defines the structure of a render extension, which displays UI in the Shopify admin.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "components", - "value": "ComponentsSet", - "description": "The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "void | Promise", - "description": "The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads." - } - ], - "value": "export interface RenderExtension {\n /**\n * The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying.\n */\n api: Api;\n /**\n * The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target.\n */\n components: ComponentsSet;\n /**\n * The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads.\n */\n output: void | Promise;\n}" - }, - "ActionExtensionApi": { - "filePath": "src/surfaces/admin/api/action/action.ts", - "name": "ActionExtensionApi", - "description": "The `ActionExtensionApi` object provides methods for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ActionExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner.\n */\n close: () => void;\n\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n}" - }, - "I18n": { - "filePath": "src/api.ts", - "name": "I18n", - "description": "Internationalization utilities for formatting and translating content according to the user's locale. Use these methods to display numbers, currency, dates, and translated strings that match the merchant's language and regional preferences.", - "members": [ - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatCurrency", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatDate", - "value": "(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string", - "description": "Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatNumber", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "translate", - "value": "I18nTranslate", - "description": "Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components." - } - ], - "value": "export interface I18n {\n /**\n * Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default.\n *\n * @param number - The number to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the number format\n */\n formatNumber: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default.\n *\n * @param number - The currency amount to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the currency format, such as the currency code\n */\n formatCurrency: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style.\n *\n * @param date - The Date object to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.DateTimeFormatOptions for customizing the date format\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n */\n formatDate: (\n date: Date,\n options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,\n ) => string;\n\n /**\n * Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components.\n */\n translate: I18nTranslate;\n}" - }, - "I18nTranslate": { - "filePath": "src/api.ts", - "name": "I18nTranslate", - "description": "The translation function signature for internationalization. Use this to translate string keys defined in your locale files into localized content for the current user's language.", - "members": [], - "value": "export interface I18nTranslate {\n /**\n * Returns a translated string matching a key in a locale file. Use this to display localized text in your extension based on the merchant's language preferences. Supports interpolation with replacement values and pluralization with the `count` option. Returns a string when replacements are primitives, or an array when replacements include UI components.\n *\n * @param key - The translation key from your locale file (for example, \"banner.title\")\n * @param options - Optional replacement values for interpolation or the special `count` property for pluralization\n *\n * @example translate(\"banner.title\")\n * @example translate(\"items.count\", { count: 5 })\n */\n (\n key: string,\n options?: Record,\n ): ReplacementType extends string | number\n ? string\n : (string | ReplacementType)[];\n}" - }, - "Intents": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "Intents", - "description": "The `Intents` object provides methods for launching standardized Shopify workflows to create or edit resources. Intents enable your extension to trigger native admin interfaces for products, customers, discounts, and other resources, then receive the results when merchants complete the workflow.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "invoke", - "value": "IntentInvokeApi", - "description": "Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "launchUrl", - "value": "string | URL", - "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", - "isOptional": true - } - ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" - }, - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - }, - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result." - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - }, - "ApiVersion": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ApiVersion", - "value": "'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04'", - "description": "The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The `unstable` version provides access to the latest features but may change without notice." - }, - "ResourcePickerApi": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerApi", - "description": "Opens the resource picker modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "ResourcePickerOptions", - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "description": "", - "name": "Promise | undefined>", - "value": "Promise | undefined>" - }, - "value": "(\n options: ResourcePickerOptions,\n) => Promise | undefined>" - }, - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - }, - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - }, - "Storage": { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "name": "Storage", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: Keys) => Promise", - "description": "Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "deleteMany", - "value": "(keys: Keys[]) => Promise>", - "description": "Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "entries", - "value": "() => Promise>", - "description": "Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "get", - "value": "(key: Keys) => Promise", - "description": "Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "getMany", - "value": "(keys: Keys[]) => Promise", - "description": "Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "set", - "value": "(key: Keys, value: StorageTypes[Keys]) => Promise", - "description": "Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "setMany", - "value": "(entries: Partial) => Promise", - "description": "Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings." - } - ], - "value": "export interface Storage<\n BaseStorageTypes extends Record = Record,\n> {\n /**\n * Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports.\n *\n * @param key - The key to set the value for. Use descriptive keys to organize your stored data.\n * @param value - The value to set for the key. Can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n set<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n value: StorageTypes[Keys],\n ): Promise;\n\n /**\n * Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings.\n *\n * @param entries - An object containing key-value pairs to store. Values can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n setMany(\n entries: Partial,\n ): Promise;\n\n /**\n * Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type.\n *\n * @param key - The key to get the value for.\n * @returns The value of the key, or `undefined` if no value exists for the key.\n */\n get<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage.\n *\n * @param keys - An array of keys to get the values for.\n * @returns An array containing values for the requested keys, in the same order as the input keys.\n */\n getMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise<(StorageTypes[Keys] | undefined)[]>;\n\n /**\n * Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs.\n */\n clear(): Promise;\n\n /**\n * Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene.\n *\n * @param key - The key to delete.\n * @returns A promise that resolves to `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n delete<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings.\n *\n * @param keys - An array of keys to delete.\n * @returns A promise that resolves to an object mapping each key to a boolean value: `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n deleteMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise>;\n\n /**\n * Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples.\n *\n * @returns A promise that resolves to an iterator containing all key-value pairs in the storage.\n */\n entries<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(): Promise>;\n}" - }, - "ActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/ActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionExtensionComponents", - "value": "StandardComponents | 'AdminAction'", - "description": "The components available for building action extensions. Includes all standard components plus the admin action component required for action extension setup." - }, - "StandardComponents": { - "filePath": "src/surfaces/admin/components/StandardComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "StandardComponents", - "value": "'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField'", - "description": "The standard set of UI components available in most admin extensions. These components provide the building blocks for creating extension interfaces including layout elements, form inputs, data display, navigation, and interactive controls. Use these components to build consistent, accessible UIs that match the Shopify admin design system." - }, - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred." - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - }, - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "OrderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedList", - "description": "Configure the following properties on the ordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OrderedList\n extends PreactCustomElement\n implements OrderedListProps\n{\n constructor();\n}" - }, - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)" - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "Tooltip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Tooltip", - "description": "Configure the following properties on the tooltip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Tooltip extends PreactOverlayElement implements TooltipProps {\n constructor();\n}" - }, - "UnorderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedList", - "description": "Configure the following properties on the unordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class UnorderedList\n extends PreactCustomElement\n implements UnorderedListProps\n{\n constructor();\n}" - }, - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "AdminAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminAction", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text to use as the Action modal's title. If not provided, the name of the extension will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminAction\n extends PreactCustomElement\n implements AdminActionProps\n{\n /**\n * The text to use as the Action modal's title. If not provided, the name of the extension will be used.\n */\n heading: string;\n /**\n * Whether the action is in a loading state, such as during initial page load or when the action is being opened.\n * When `true`, the action might be in an inert state that prevents user interaction.\n */\n loading: boolean;\n constructor();\n}" - }, - "RunnableExtension": { - "filePath": "src/extension.ts", - "name": "RunnableExtension", - "description": "Defines the structure of a runnable extension, which executes logic and returns data without rendering UI.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "Output | Promise", - "description": "The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case." - } - ], - "value": "export interface RunnableExtension {\n /**\n * The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension.\n */\n api: Api;\n /**\n * The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case.\n */\n output: Output | Promise;\n}" - }, - "ShouldRenderApi": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderApi", - "description": "The `ShouldRenderApi` object provides methods for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ShouldRenderApi\n extends StandardApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.\n */\n data: Data;\n}" - }, - "ShouldRenderOutput": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderOutput", - "description": "The output returned by `should-render` extensions to control visibility.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "boolean", - "description": "Whether to display the associated action extension. Return `true` to show the action, `false` to hide it." - } - ], - "value": "export interface ShouldRenderOutput {\n /** Whether to display the associated action extension. Return `true` to show the action, `false` to hide it. */\n display: boolean;\n}" - }, - "BlockExtensionApi": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "BlockExtensionApi", - "description": "The `BlockExtensionApi` object provides methods for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface BlockExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n\n /**\n * Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`).\n */\n navigation: Navigation;\n}" - }, - "Navigation": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "Navigation", - "description": "The `Navigation` object provides methods for navigating between extensions and admin pages.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigate", - "value": "(url: string | URL) => void", - "description": "Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "navigation.navigate('extension://my-admin-action-extension-handle')", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface Navigation {\n /**\n * Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.\n *\n * @param url - The destination URL, typically in the format 'extension://extension-handle' for other extensions\n * @example navigation.navigate('extension://my-admin-action-extension-handle')\n */\n navigate: (url: string | URL) => void;\n}" - }, - "BlockExtensionComponents": { - "filePath": "src/surfaces/admin/components/BlockExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BlockExtensionComponents", - "value": "StandardComponents | 'AdminBlock' | 'Form'", - "description": "The components available for building block extensions. Includes all standard components plus the admin block component required for block extension setup and the form component for creating forms." - }, - "AdminBlock": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlock", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminBlock\n extends PreactCustomElement\n implements AdminBlockProps\n{\n /**\n * The text displayed as the block's title in the header. If not provided, the extension name will be used.\n */\n heading: string;\n /**\n * The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.\n */\n collapsedSummary: string;\n constructor();\n}" - }, - "Form": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Form", - "description": "Configure the following properties on the form component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" - }, - "StandardApi": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "StandardApi", - "description": "The `StandardApi` object provides core methods available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface StandardApi {\n /**\n * The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.\n */\n extension: {\n target: ExtensionTarget;\n };\n\n /**\n * Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.\n */\n auth: Auth;\n\n /**\n * Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.\n */\n i18n: I18n;\n\n /**\n * Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.\n */\n intents: Intents;\n\n /**\n * Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension.\n */\n storage: Storage;\n\n /**\n * Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.\n */\n query: (\n query: string,\n options?: {variables?: Variables; version?: Omit},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n}" - }, - "GraphQLError": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "GraphQLError", - "description": "The GraphQL error returned by the [GraphQL Admin API](/docs/api/admin-graphql).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "locations", - "value": "{ line: number; column: string; }", - "description": "The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query." - } - ], - "value": "export interface GraphQLError {\n /**\n * A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query.\n */\n message: string;\n /**\n * The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string.\n */\n locations: {\n /** The line number in the GraphQL query where the error occurred. */\n line: number;\n /** The column position in the GraphQL query where the error occurred. */\n column: string;\n };\n}" - }, - "CustomerSegmentTemplateApi": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplateApi", - "description": "The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "__enabledFeatures", - "value": "string[]", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating template content into the merchant's language." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface CustomerSegmentTemplateApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardApi {\n /** Utilities for translating template content into the merchant's language. */\n i18n: I18n;\n /** @private */\n __enabledFeatures: string[];\n}" - }, - "CustomerSegmentTemplate": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplate", - "description": "Defines a customer segment template that merchants can use to create targeted customer groups.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "createdOn", - "value": "string", - "description": "The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "dependencies", - "value": "{ standardMetafields?: \"facts.birth_date\"[]; customMetafields?: string[]; }", - "description": "Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string | string[]", - "description": "The template description in the merchant's language. Use an array for multiple paragraphs." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "queryToInsert", - "value": "string", - "description": "The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The template title in the merchant's language." - } - ], - "value": "export interface CustomerSegmentTemplate {\n /**\n * The template title in the merchant's language.\n */\n title: string;\n /**\n * The template description in the merchant's language. Use an array for multiple paragraphs.\n */\n description: string | string[];\n /**\n * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n query: string;\n /**\n * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n queryToInsert: string;\n /**\n * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.\n */\n dependencies?: {\n /** Standard Shopify customer metafields used in the query. */\n standardMetafields?: CustomerStandardMetafieldDependency[];\n /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */\n customMetafields?: string[];\n };\n /**\n * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge.\n */\n createdOn: string;\n}" - }, - "DiscountFunctionSettingsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "name": "DiscountFunctionSettingsApi", - "description": "The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DiscountFunctionSettingsData", - "description": "The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "DiscountsApi", - "description": "The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface DiscountFunctionSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends Omit, 'data'> {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: DiscountFunctionSettingsData;\n /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */\n discounts: DiscountsApi;\n}" - }, - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - }, - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "DiscountsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountsApi", - "description": "The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountClasses", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountMethod", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "updateDiscountClasses", - "value": "UpdateSignalFunction", - "description": "A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects." - } - ], - "value": "export interface DiscountsApi {\n /**\n * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.\n */\n discountClasses: ReadonlySignalLike;\n /**\n * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.\n */\n updateDiscountClasses: UpdateSignalFunction;\n /**\n * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.\n */\n discountMethod: ReadonlySignalLike;\n}" - }, - "ReadonlySignalLike": { - "filePath": "src/shared.ts", - "name": "ReadonlySignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface ReadonlySignalLike {\n /**\n * The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.\n */\n readonly value: T;\n /**\n * Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.\n */\n subscribe(fn: (value: T) => void): () => void;\n}" - }, - "DiscountClass": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountClass", - "value": "'product' | 'order' | 'shipping'", - "description": "The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).", - "isPublicDocs": true - }, - "DiscountMethod": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountMethod", - "value": "'automatic' | 'code'", - "description": "The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.", - "isPublicDocs": true - }, - "UpdateSignalFunction": { - "filePath": "src/shared.ts", - "name": "UpdateSignalFunction", - "description": "A function that updates a signal and returns a result indicating success or failure. The function is typically used along with a `ReadonlySignalLike` object.", - "params": [ - { - "name": "value", - "description": "", - "value": "T", - "filePath": "src/shared.ts" - } - ], - "returns": { - "filePath": "src/shared.ts", - "description": "", - "name": "Result", - "value": "Result" - }, - "value": "(value: T) => Result" - }, - "Result": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Result", - "value": "{success: true; value: T} | {success: false; errors: ValidationError[]}", - "description": "A result type that indicates the success or failure of an operation." - }, - "ValidationError": { - "filePath": "src/shared.ts", - "name": "ValidationError", - "description": "A validation error object that is returned when an operation fails.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "A code identifier for the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ message: string; path: string[]; }[]", - "description": "Field-level validation issues", - "isOptional": true - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message describing the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "" - } - ], - "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" - }, - "FunctionSettingsComponents": { - "filePath": "src/surfaces/admin/components/FunctionSettingsComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FunctionSettingsComponents", - "value": "FormExtensionComponents | 'FunctionSettings'", - "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." - }, - "FormExtensionComponents": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - }, - "FunctionSettings": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FunctionSettings", - "description": "Configure the following properties on the function settings component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class FunctionSettings\n extends PreactCustomElement\n implements FunctionSettingsProps\n{\n constructor();\n}" - }, - "PrintActionExtensionApi": { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "name": "PrintActionExtensionApi", - "description": "The `PrintActionExtensionApi` object provides methods for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PrintActionExtensionApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products.\n */\n data: Data;\n}" - }, - "PrintActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/PrintActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PrintActionExtensionComponents", - "value": "StandardComponents | 'AdminPrintAction'", - "description": "The components available for building print action extensions. Includes all standard components plus the admin print action component required for print action setup." - }, - "AdminPrintAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintAction", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The `src` URL of the preview and the document to print. If not provided, the preview will show an empty state and the print button will be disabled. HTML, PDFs, and images are supported." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminPrintAction\n extends PreactCustomElement\n implements AdminPrintActionProps\n{\n /**\n * The `src` URL of the preview and the document to print.\n * If not provided, the preview will show an empty state and the print button will be disabled.\n * HTML, PDFs, and images are supported.\n */\n src: string;\n constructor();\n}" - }, - "ProductDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductDetailsConfigurationApi", - "description": "The `ProductDetailsConfigurationApi` object provides methods for configuring product bundles and relationships. Access the following properties on the `ProductDetailsConfigurationApi` object to build product configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product currently being viewed in the admin.\n * @deprecated\n */\n product: Product;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Product": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "Product", - "description": "A product configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "onlineStoreUrl", - "value": "string", - "description": "The URL to view this product on the online store. Use this to create \"View in store\" links.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productCategory", - "value": "string", - "description": "The standardized product category taxonomy. Use this for product classification in search and organization.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productComponents", - "value": "ProductComponent[]", - "description": "An array of component products that make up this bundle. Each component represents a product included in the bundle configuration." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "'ACTIVE' | 'ARCHIVED' | 'DRAFT'", - "description": "The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name shown to merchants and customers." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "The total available inventory summed across all variants and locations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this product has." - } - ], - "value": "export interface Product {\n /** The product's unique global identifier (GID). */\n id: string;\n /** The product's display name shown to merchants and customers. */\n title: string;\n /** The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`). */\n handle: string;\n /** The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished). */\n status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';\n /** The total number of variants this product has. */\n totalVariants: number;\n /** The total available inventory summed across all variants and locations. */\n totalInventory: number;\n /** Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations. */\n hasOnlyDefaultVariant: boolean;\n /** The URL to view this product on the online store. Use this to create \"View in store\" links. */\n onlineStoreUrl?: string;\n /** Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values. */\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n /** The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\"). */\n productType: string;\n /** The standardized product category taxonomy. Use this for product classification in search and organization. */\n productCategory?: string;\n /** An array of component products that make up this bundle. Each component represents a product included in the bundle configuration. */\n productComponents: ProductComponent[];\n}" - }, - "ProductComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductComponent", - "description": "A component product that is part of a bundle. Represents an individual product included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "componentVariantsCount", - "value": "number", - "description": "The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "featuredImage", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "nonComponentVariantsCount", - "value": "number", - "description": "The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productUrl", - "value": "string", - "description": "The admin URL for this component product. Use this to create links to the product's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name. Use this to show which product is included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this component product has. Use this to determine if variant selection is needed for this component." - } - ], - "value": "export interface ProductComponent {\n /** The component product's unique global identifier (GID). */\n id: string;\n /** The product's display name. Use this to show which product is included in the bundle. */\n title: string;\n /** The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n featuredImage?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The total number of variants this component product has. Use this to determine if variant selection is needed for this component. */\n totalVariants: number;\n /** The admin URL for this component product. Use this to create links to the product's details page in the admin. */\n productUrl: string;\n /** The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles. */\n componentVariantsCount: number;\n /** The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations. */\n nonComponentVariantsCount: number;\n}" - }, - "PurchaseOptionsCardConfigurationApi": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "name": "PurchaseOptionsCardConfigurationApi", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ selected: { id: string; sellingPlanId?: string; }[]; }", - "description": "Selected purchase option data including product and selling plan identifiers." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PurchaseOptionsCardConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends ActionExtensionApi {\n /** Selected purchase option data including product and selling plan identifiers. */\n data: {\n /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */\n selected: {\n /** The product or variant identifier. */\n id: string;\n /** The associated selling plan identifier, if a subscription option is selected. */\n sellingPlanId?: string;\n }[];\n };\n}" - }, - "ProductVariantDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantDetailsConfigurationApi", - "description": "The `ProductVariantDetailsConfigurationApi` object provides methods for configuring product variant bundles and relationships. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to build variant configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductVariantDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product variant currently being viewed in the admin.\n * @deprecated\n */\n variant: ProductVariant;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "ProductVariant": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariant", - "description": "A product variant configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string", - "description": "The barcode, UPC, or ISBN number for the variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "string", - "description": "The original price before any discounts or markdowns." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "string", - "description": "The current selling price for this variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantComponents", - "value": "ProductVariantComponent[]", - "description": "An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for inventory tracking." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxCode", - "value": "string", - "description": "The harmonized system (HS) tax code for international shipping and customs." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number", - "description": "The physical weight of the variant as a number." - } - ], - "value": "export interface ProductVariant {\n /** The variant's unique global identifier (GID). */\n id: string;\n /** The Stock Keeping Unit (SKU) identifier for inventory tracking. */\n sku: string;\n /** The barcode, UPC, or ISBN number for the variant. */\n barcode: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The current selling price for this variant. */\n price: string;\n /** The original price before any discounts or markdowns. */\n compareAtPrice: string;\n /** Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout. */\n taxable: boolean;\n /** The harmonized system (HS) tax code for international shipping and customs. */\n taxCode: string;\n /** The physical weight of the variant as a number. */\n weight: number;\n /** The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n /** An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle. */\n productVariantComponents: ProductVariantComponent[];\n}" - }, - "ProductVariantComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantComponent", - "description": "A component variant that is part of a product bundle. Represents an individual product variant included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantUrl", - "value": "string", - "description": "The admin URL for this product variant. Use this to create links to the variant's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for this component variant.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - } - ], - "value": "export interface ProductVariantComponent {\n /** The component variant's unique global identifier (GID). */\n id: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** The Stock Keeping Unit (SKU) identifier for this component variant. */\n sku?: string;\n /** The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n image?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The admin URL for this product variant. Use this to create links to the variant's details page in the admin. */\n productVariantUrl: string;\n /** The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n}" - }, - "ValidationSettingsApi": { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "name": "ValidationSettingsApi", - "description": "The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "ValidationData", - "description": "The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ValidationSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: ValidationData;\n}" - }, - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - } - } - } - ], - "examples": { - "description": "Configure order routing rules", - "examples": [ - { - "description": "Batch remove outdated metafields from routing configuration. This example maps deprecated keys to removal operations, displays current rule stats, and shows a success banner after cleanup.", - "codeblock": { - "title": "Remove deprecated settings", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [removed, setRemoved] = useState(false);\n\n const handleRemove = () => {\n const deprecatedKeys = ['old_setting', 'legacy_config'];\n\n const changes = deprecatedKeys.map((key) => ({\n type: 'removeMetafield',\n namespace: 'routing',\n key,\n }));\n\n shopify.applyMetafieldsChange(changes);\n setRemoved(true);\n };\n\n return (\n <s-function-settings>\n <s-stack direction=\"block\">\n <s-text>Rule priority: {data.rule.priority}</s-text>\n <s-text>Current settings: {data.rule.metafields.length}</s-text>\n <s-button onClick={handleRemove}>Remove Deprecated Settings</s-button>\n {removed && <s-banner status=\"success\">Deprecated settings removed</s-banner>}\n </s-stack>\n </s-function-settings>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Configure maximum distance, inventory checking, and excluded zip codes in one save. This example demonstrates using number fields, checkboxes, and JSON storage for complex routing criteria.", - "codeblock": { - "title": "Set routing criteria", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [distance, setDistance] = useState('50');\n const [enableInventory, setEnableInventory] = useState(true);\n\n const handleSave = () => {\n shopify.applyMetafieldsChange([\n {\n type: 'updateMetafield',\n namespace: 'routing',\n key: 'max_distance_km',\n value: distance,\n valueType: 'number_integer',\n },\n {\n type: 'updateMetafield',\n namespace: 'routing',\n key: 'enable_inventory_check',\n value: String(enableInventory),\n valueType: 'boolean',\n },\n {\n type: 'updateMetafield',\n namespace: 'routing',\n key: 'excluded_zip_codes',\n value: JSON.stringify(['10001', '90210']),\n valueType: 'json',\n },\n ]);\n };\n\n return (\n <s-function-settings>\n <s-stack direction=\"block\">\n <s-number-field\n label=\"Maximum distance (km)\"\n value={distance}\n onChange={(value) => setDistance(value)}\n />\n <s-checkbox\n checked={enableInventory}\n onChange={(checked) => setEnableInventory(checked)}\n >\n Enable inventory check\n </s-checkbox>\n <s-button onClick={handleSave}>Save Routing Criteria</s-button>\n </s-stack>\n </s-function-settings>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Contextual APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Batch metafield changes for atomic updates:** `applyMetafieldsChange` accepts an array of change objects. Pass multiple changes in a single call to ensure all changes succeed or all fail together.\n- **Check operation result type:** `applyMetafieldsChange` returns `{ type: 'success' }` or `{ type: 'error', message: string }`. Errors don't throw, so always check the returned `type`." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Metafields have [size limits](/docs/apps/build/metafields/metafield-limits). Individual values can't exceed 256KB, and total metafield storage per rule is limited.\n- Rule priority is read-only. Evaluation order can't be modified through the settings interface. Merchants manage priority through the main rules interface.\n- Batch operations are all-or-nothing. If any metafield change in the array fails validation, the entire batch fails and no changes apply.\n- Metafield changes apply immediately. They persist right away without waiting for merchants to save the rule." - } - ] - }, - { - "name": "Picker API", - "overviewPreviewDescription": "Opens a Picker in your app", - "description": "The Picker API lets merchants search for and select items from your app-specific data, such as product reviews, email templates, or subscription options. Use this API to build custom selection dialogs with your own data structure, badges, and thumbnails. The picker returns the IDs of selected items.\n\n> Tip:\n> If you need to pick Shopify products, variants, or collections, use the [Resource Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) instead.", - "isVisualComponent": true, - "category": "Target APIs", - "subCategory": "Utility APIs", - "thumbnail": "picker.png", - "requires": "an admin UI [block, action, or print](/docs/api/admin-extensions/{API_VERSION}#building-your-extension) extension.", - "defaultExample": { - "description": "Build a custom picker for email templates with multiple columns and status badges. This example shows defining column headers, populating items with searchable data fields, adding visual status indicators, and handling the selection promise. Use this pattern for app-specific resources like templates, product reviews, or subscription options where you need custom data structures beyond standard Shopify resources.", - "image": "picker.png", - "codeblock": { - "title": "Select email templates", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [selected, setSelected] = useState(null);\n\n const handlePickTemplate = async () => {\n const pickerInstance = await shopify.picker({\n heading: 'Select a template',\n multiple: false,\n headers: [\n {title: 'Templates'},\n {title: 'Created by'},\n {title: 'Times used', type: 'number'},\n ],\n items: [\n {\n id: '1',\n heading: 'Full width, 1 column',\n data: ['Karine Ruby', '0'],\n badges: [{content: 'Draft', tone: 'info'}, {content: 'Marketing'}],\n },\n {\n id: '2',\n heading: 'Large graphic, 3 column',\n data: ['Russell Winfield', '5'],\n badges: [\n {content: 'Published', tone: 'success'},\n {content: 'New feature'},\n ],\n selected: true,\n },\n {\n id: '3',\n heading: 'Promo header, 2 column',\n data: ['Russel Winfield', '10'],\n badges: [{content: 'Published', tone: 'success'}],\n },\n ],\n });\n\n const result = await pickerInstance.selected;\n setSelected(result);\n };\n\n return (\n <s-admin-block heading=\"Template Selector\">\n <s-button onClick={handlePickTemplate}>Choose Template</s-button>\n {selected && selected.length > 0 && (\n <s-text>Selected template: {selected[0]}</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "picker", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "type": "PickerApi", - "typeDefinitions": { - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.", - "isOptional": true - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - } - } - } - ], - "examples": { - "description": "Examples that demonstrate how to use the Picker API.", - "examples": [ - { - "description": "Disable specific picker items to prevent selection while keeping them visible for context. This example shows setting `disabled: true` on individual items to mark them as non-selectable. This is useful for showing all available options while preventing selection of incompatible resources, templates currently being edited by others, or deprecated features that require upgrades.", - "codeblock": { - "title": "Disable specific items", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const handlePick = async () => {\n await shopify.picker({\n heading: 'Select items',\n items: [\n {id: '1', heading: 'Available item'},\n {id: '2', heading: 'Disabled item', disabled: true},\n ],\n });\n };\n\n return (\n <s-admin-block heading=\"Picker with Disabled Items\">\n <s-button onClick={handlePick}>Open Picker</s-button>\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Limit selection to a maximum number of items by setting `multiple: 2` in the picker options. This example shows restricting selection to exactly 2 items. Use this when your feature has hard constraints, such as A/B test variants needing exactly two options, comparison views with fixed slots, or integration mappings that support a specific connection count.", - "codeblock": { - "title": "Limit selection count", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const handlePick = async () => {\n await shopify.picker({\n heading: 'Select items (up to 2)',\n multiple: 2,\n headers: [{title: 'Main heading'}],\n items: [\n {id: '1', heading: 'Item 1'},\n {id: '2', heading: 'Item 2'},\n {id: '3', heading: 'Item 3'},\n ],\n });\n };\n\n return (\n <s-admin-block heading=\"Limited Selection Picker\">\n <s-button onClick={handlePick}>Open Picker</s-button>\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Open the picker with items already selected by setting `selected: true` on individual items. This example shows pre-marking items as selected when the picker opens. Use this for edit workflows where you need to show what resources are already associated with a configuration, such as automation rule triggers or notification recipients. Merchants can modify the selection before confirming.", - "codeblock": { - "title": "Preselect items", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const handlePick = async () => {\n await shopify.picker({\n heading: 'Select items',\n items: [\n {id: '1', heading: 'Item 1', selected: true},\n {id: '2', heading: 'Item 2'},\n ],\n });\n };\n\n return (\n <s-admin-block heading=\"Picker with Preselection\">\n <s-button onClick={handlePick}>Open Picker</s-button>\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Allow unlimited selection by setting `multiple: true` without a numeric limit. This example shows enabling flexible multi-selection where merchants control how many items to choose. This is useful for bulk operations, mass notification sending, export tools, or tag management where selection quantity depends on merchant needs without artificial constraints.", - "codeblock": { - "title": "Select unlimited items", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const handlePick = async () => {\n await shopify.picker({\n heading: 'Select items',\n multiple: true,\n items: [\n {id: '1', heading: 'Item 1'},\n {id: '2', heading: 'Item 2'},\n {id: '3', heading: 'Item 3'},\n ],\n });\n };\n\n return (\n <s-admin-block heading=\"Unlimited Selection Picker\">\n <s-button onClick={handlePick}>Open Picker</s-button>\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Populate the picker with data from the [GraphQL Admin API](/docs/api/admin-graphql). This example fetches order data when the button is clicked, maps results to picker items, and opens the picker with the returned data. Use this pattern for Shopify data that isn't available through the Resource Picker API, such as orders, draft orders, or fulfillments.", - "codeblock": { - "title": "Use GraphQL data", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const handlePick = async () => {\n const r = await fetch('shopify:admin/api/graphql.json', {\n method: 'POST',\n body: JSON.stringify({\n query: `query GetOrders($first: Int!) {\n orders(first: $first) {\n edges {\n node {\n id\n name\n }\n }\n }\n }`,\n variables: {first: 10},\n }),\n });\n \n const {data} = await r.json();\n \n await shopify.picker({\n heading: 'Select orders',\n items: data.orders.edges.map((edge) => ({\n id: edge.node.id,\n heading: edge.node.name,\n })),\n });\n };\n\n return (\n <s-admin-block heading=\"Picker with GraphQL Data\">\n <s-button onClick={handlePick}>Open Order Picker</s-button>\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Handle undefined return on cancellation:** When merchants cancel or close the picker, it returns `undefined` rather than an empty array. Check for `undefined` explicitly to distinguish cancellation from empty selection.\n- **Disable items to prevent modification:** Use the `disabled` property on items combined with `initialSelectionIds` to create preselected items that merchants can't deselect." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- The Picker API only supports app-specific data. It can't display Shopify resources like products or variants. Use [Resource Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) for Shopify resources.\n- Picker items don't support hierarchical or nested structures. All items appear in a flat list.\n- The picker can't be customized with additional filters, search operators, or sorting beyond what merchants type in the search field." - } - ] - }, - { - "name": "Print Action Extension API", - "description": "The Print Action Extension API lets you [build print action extensions](/docs/apps/build/admin/actions-blocks/build-admin-print-action) that generate custom printable documents for orders, products, and other resources. Use this API to create branded labels, packing slips, custom invoices, or specialty documents.", - "isVisualComponent": false, - "type": "API", - "requires": "the [admin print action](/docs/api/admin-extensions/{API_VERSION}/web-components/settings-and-templates/admin-print-action) component.", - "defaultExample": { - "description": "Generate a packing slip PDF for selected orders by calling your app's backend service. This example shows extracting order IDs from the selected resources, making an API call to your backend to generate the PDF, and setting the printable URL as the `src` prop to display the document.", - "codeblock": { - "title": "Generate packing slip", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useEffect} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [printUrl, setPrintUrl] = useState(null);\n\n useEffect(() => {\n const generateSlip = async () => {\n const orderIds = data.selected.map((item) => item.id);\n\n const response = await fetch('/api/generate-packing-slip', {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify({orderIds}),\n });\n\n const {printUrl: url} = await response.json();\n setPrintUrl(url);\n };\n\n generateSlip();\n }, [data]);\n\n return (\n <s-admin-print-action src={printUrl}>\n <s-text>Packing slip for {data.selected.length} orders</s-text>\n </s-admin-print-action>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `PrintActionExtensionApi` object provides properties for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "type": "PrintActionExtensionApi", - "typeDefinitions": { - "PrintActionExtensionApi": { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "name": "PrintActionExtensionApi", - "description": "The `PrintActionExtensionApi` object provides methods for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PrintActionExtensionApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products.\n */\n data: Data;\n}" - }, - "Auth": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "Auth", - "description": "The `Auth` object provides authentication methods for secure communication with your app backend.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "idToken", - "value": "() => Promise", - "description": "Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved." - } - ], - "value": "export interface Auth {\n /**\n * Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved.\n */\n idToken: () => Promise;\n}" - }, - "Data": { - "filePath": "src/surfaces/admin/api/shared.ts", - "name": "Data", - "description": "The `Data` object provides access to currently viewed or selected resources in the admin context.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "{ id: string; }[]", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - } - ], - "value": "export interface Data {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n selected: {id: string}[];\n}" - }, - "ExtensionTarget": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionTarget", - "value": "keyof ExtensionTargets", - "description": "A string literal union of all valid extension target identifiers. Use this type to specify where your admin UI extension should render, such as `admin.product-details.block.render` for a block on product details pages or `admin.order-details.action.render` for an action on order details pages. The target determines the extension's location, available APIs, and UI components." - }, - "ExtensionTargets": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "name": "ExtensionTargets", - "description": "Maps extension target identifiers to their corresponding extension types. Each target represents a specific location or context in the Shopify admin where extensions can render or execute. Use these targets to define where your extension appears and what capabilities it has access to.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.app.tools.data", - "value": "RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >", - "description": "A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-location-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customers.segmentation-templates.data", - "value": "RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >", - "description": "A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.function-settings.render", - "value": "RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.configuration.render", - "value": "RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.reorder.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.configuration.render", - "value": "RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.internal-order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.validation.render", - "value": "RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." - } - ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" - }, - "RenderExtension": { - "filePath": "src/extension.ts", - "name": "RenderExtension", - "description": "Defines the structure of a render extension, which displays UI in the Shopify admin.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "components", - "value": "ComponentsSet", - "description": "The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "void | Promise", - "description": "The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads." - } - ], - "value": "export interface RenderExtension {\n /**\n * The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying.\n */\n api: Api;\n /**\n * The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target.\n */\n components: ComponentsSet;\n /**\n * The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads.\n */\n output: void | Promise;\n}" - }, - "ActionExtensionApi": { - "filePath": "src/surfaces/admin/api/action/action.ts", - "name": "ActionExtensionApi", - "description": "The `ActionExtensionApi` object provides methods for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ActionExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner.\n */\n close: () => void;\n\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n}" - }, - "I18n": { - "filePath": "src/api.ts", - "name": "I18n", - "description": "Internationalization utilities for formatting and translating content according to the user's locale. Use these methods to display numbers, currency, dates, and translated strings that match the merchant's language and regional preferences.", - "members": [ - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatCurrency", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatDate", - "value": "(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string", - "description": "Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatNumber", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "translate", - "value": "I18nTranslate", - "description": "Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components." - } - ], - "value": "export interface I18n {\n /**\n * Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default.\n *\n * @param number - The number to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the number format\n */\n formatNumber: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default.\n *\n * @param number - The currency amount to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the currency format, such as the currency code\n */\n formatCurrency: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style.\n *\n * @param date - The Date object to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.DateTimeFormatOptions for customizing the date format\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n */\n formatDate: (\n date: Date,\n options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,\n ) => string;\n\n /**\n * Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components.\n */\n translate: I18nTranslate;\n}" - }, - "I18nTranslate": { - "filePath": "src/api.ts", - "name": "I18nTranslate", - "description": "The translation function signature for internationalization. Use this to translate string keys defined in your locale files into localized content for the current user's language.", - "members": [], - "value": "export interface I18nTranslate {\n /**\n * Returns a translated string matching a key in a locale file. Use this to display localized text in your extension based on the merchant's language preferences. Supports interpolation with replacement values and pluralization with the `count` option. Returns a string when replacements are primitives, or an array when replacements include UI components.\n *\n * @param key - The translation key from your locale file (for example, \"banner.title\")\n * @param options - Optional replacement values for interpolation or the special `count` property for pluralization\n *\n * @example translate(\"banner.title\")\n * @example translate(\"items.count\", { count: 5 })\n */\n (\n key: string,\n options?: Record,\n ): ReplacementType extends string | number\n ? string\n : (string | ReplacementType)[];\n}" - }, - "Intents": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "Intents", - "description": "The `Intents` object provides methods for launching standardized Shopify workflows to create or edit resources. Intents enable your extension to trigger native admin interfaces for products, customers, discounts, and other resources, then receive the results when merchants complete the workflow.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "invoke", - "value": "IntentInvokeApi", - "description": "Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "launchUrl", - "value": "string | URL", - "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", - "isOptional": true - } - ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" - }, - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - }, - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result." - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - }, - "ApiVersion": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ApiVersion", - "value": "'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04'", - "description": "The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The `unstable` version provides access to the latest features but may change without notice." - }, - "ResourcePickerApi": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerApi", - "description": "Opens the resource picker modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "ResourcePickerOptions", - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "description": "", - "name": "Promise | undefined>", - "value": "Promise | undefined>" - }, - "value": "(\n options: ResourcePickerOptions,\n) => Promise | undefined>" - }, - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - }, - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - }, - "Storage": { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "name": "Storage", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: Keys) => Promise", - "description": "Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "deleteMany", - "value": "(keys: Keys[]) => Promise>", - "description": "Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "entries", - "value": "() => Promise>", - "description": "Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "get", - "value": "(key: Keys) => Promise", - "description": "Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "getMany", - "value": "(keys: Keys[]) => Promise", - "description": "Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "set", - "value": "(key: Keys, value: StorageTypes[Keys]) => Promise", - "description": "Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "setMany", - "value": "(entries: Partial) => Promise", - "description": "Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings." - } - ], - "value": "export interface Storage<\n BaseStorageTypes extends Record = Record,\n> {\n /**\n * Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports.\n *\n * @param key - The key to set the value for. Use descriptive keys to organize your stored data.\n * @param value - The value to set for the key. Can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n set<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n value: StorageTypes[Keys],\n ): Promise;\n\n /**\n * Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings.\n *\n * @param entries - An object containing key-value pairs to store. Values can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n setMany(\n entries: Partial,\n ): Promise;\n\n /**\n * Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type.\n *\n * @param key - The key to get the value for.\n * @returns The value of the key, or `undefined` if no value exists for the key.\n */\n get<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage.\n *\n * @param keys - An array of keys to get the values for.\n * @returns An array containing values for the requested keys, in the same order as the input keys.\n */\n getMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise<(StorageTypes[Keys] | undefined)[]>;\n\n /**\n * Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs.\n */\n clear(): Promise;\n\n /**\n * Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene.\n *\n * @param key - The key to delete.\n * @returns A promise that resolves to `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n delete<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings.\n *\n * @param keys - An array of keys to delete.\n * @returns A promise that resolves to an object mapping each key to a boolean value: `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n deleteMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise>;\n\n /**\n * Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples.\n *\n * @returns A promise that resolves to an iterator containing all key-value pairs in the storage.\n */\n entries<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(): Promise>;\n}" - }, - "ActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/ActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionExtensionComponents", - "value": "StandardComponents | 'AdminAction'", - "description": "The components available for building action extensions. Includes all standard components plus the admin action component required for action extension setup." - }, - "StandardComponents": { - "filePath": "src/surfaces/admin/components/StandardComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "StandardComponents", - "value": "'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField'", - "description": "The standard set of UI components available in most admin extensions. These components provide the building blocks for creating extension interfaces including layout elements, form inputs, data display, navigation, and interactive controls. Use these components to build consistent, accessible UIs that match the Shopify admin design system." - }, - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred." - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - }, - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "OrderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedList", - "description": "Configure the following properties on the ordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OrderedList\n extends PreactCustomElement\n implements OrderedListProps\n{\n constructor();\n}" - }, - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)" - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "Tooltip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Tooltip", - "description": "Configure the following properties on the tooltip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Tooltip extends PreactOverlayElement implements TooltipProps {\n constructor();\n}" - }, - "UnorderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedList", - "description": "Configure the following properties on the unordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class UnorderedList\n extends PreactCustomElement\n implements UnorderedListProps\n{\n constructor();\n}" - }, - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "AdminAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminAction", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text to use as the Action modal's title. If not provided, the name of the extension will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminAction\n extends PreactCustomElement\n implements AdminActionProps\n{\n /**\n * The text to use as the Action modal's title. If not provided, the name of the extension will be used.\n */\n heading: string;\n /**\n * Whether the action is in a loading state, such as during initial page load or when the action is being opened.\n * When `true`, the action might be in an inert state that prevents user interaction.\n */\n loading: boolean;\n constructor();\n}" - }, - "RunnableExtension": { - "filePath": "src/extension.ts", - "name": "RunnableExtension", - "description": "Defines the structure of a runnable extension, which executes logic and returns data without rendering UI.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "Output | Promise", - "description": "The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case." - } - ], - "value": "export interface RunnableExtension {\n /**\n * The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension.\n */\n api: Api;\n /**\n * The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case.\n */\n output: Output | Promise;\n}" - }, - "ShouldRenderApi": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderApi", - "description": "The `ShouldRenderApi` object provides methods for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ShouldRenderApi\n extends StandardApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.\n */\n data: Data;\n}" - }, - "ShouldRenderOutput": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderOutput", - "description": "The output returned by `should-render` extensions to control visibility.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "boolean", - "description": "Whether to display the associated action extension. Return `true` to show the action, `false` to hide it." - } - ], - "value": "export interface ShouldRenderOutput {\n /** Whether to display the associated action extension. Return `true` to show the action, `false` to hide it. */\n display: boolean;\n}" - }, - "BlockExtensionApi": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "BlockExtensionApi", - "description": "The `BlockExtensionApi` object provides methods for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface BlockExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n\n /**\n * Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`).\n */\n navigation: Navigation;\n}" - }, - "Navigation": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "Navigation", - "description": "The `Navigation` object provides methods for navigating between extensions and admin pages.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigate", - "value": "(url: string | URL) => void", - "description": "Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "navigation.navigate('extension://my-admin-action-extension-handle')", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface Navigation {\n /**\n * Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.\n *\n * @param url - The destination URL, typically in the format 'extension://extension-handle' for other extensions\n * @example navigation.navigate('extension://my-admin-action-extension-handle')\n */\n navigate: (url: string | URL) => void;\n}" - }, - "BlockExtensionComponents": { - "filePath": "src/surfaces/admin/components/BlockExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BlockExtensionComponents", - "value": "StandardComponents | 'AdminBlock' | 'Form'", - "description": "The components available for building block extensions. Includes all standard components plus the admin block component required for block extension setup and the form component for creating forms." - }, - "AdminBlock": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlock", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminBlock\n extends PreactCustomElement\n implements AdminBlockProps\n{\n /**\n * The text displayed as the block's title in the header. If not provided, the extension name will be used.\n */\n heading: string;\n /**\n * The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.\n */\n collapsedSummary: string;\n constructor();\n}" - }, - "Form": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Form", - "description": "Configure the following properties on the form component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" - }, - "StandardApi": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "StandardApi", - "description": "The `StandardApi` object provides core methods available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface StandardApi {\n /**\n * The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.\n */\n extension: {\n target: ExtensionTarget;\n };\n\n /**\n * Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.\n */\n auth: Auth;\n\n /**\n * Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.\n */\n i18n: I18n;\n\n /**\n * Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.\n */\n intents: Intents;\n\n /**\n * Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension.\n */\n storage: Storage;\n\n /**\n * Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.\n */\n query: (\n query: string,\n options?: {variables?: Variables; version?: Omit},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n}" - }, - "GraphQLError": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "GraphQLError", - "description": "The GraphQL error returned by the [GraphQL Admin API](/docs/api/admin-graphql).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "locations", - "value": "{ line: number; column: string; }", - "description": "The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query." - } - ], - "value": "export interface GraphQLError {\n /**\n * A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query.\n */\n message: string;\n /**\n * The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string.\n */\n locations: {\n /** The line number in the GraphQL query where the error occurred. */\n line: number;\n /** The column position in the GraphQL query where the error occurred. */\n column: string;\n };\n}" - }, - "CustomerSegmentTemplateApi": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplateApi", - "description": "The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "__enabledFeatures", - "value": "string[]", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating template content into the merchant's language." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface CustomerSegmentTemplateApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardApi {\n /** Utilities for translating template content into the merchant's language. */\n i18n: I18n;\n /** @private */\n __enabledFeatures: string[];\n}" - }, - "CustomerSegmentTemplate": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplate", - "description": "Defines a customer segment template that merchants can use to create targeted customer groups.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "createdOn", - "value": "string", - "description": "The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "dependencies", - "value": "{ standardMetafields?: \"facts.birth_date\"[]; customMetafields?: string[]; }", - "description": "Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string | string[]", - "description": "The template description in the merchant's language. Use an array for multiple paragraphs." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "queryToInsert", - "value": "string", - "description": "The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The template title in the merchant's language." - } - ], - "value": "export interface CustomerSegmentTemplate {\n /**\n * The template title in the merchant's language.\n */\n title: string;\n /**\n * The template description in the merchant's language. Use an array for multiple paragraphs.\n */\n description: string | string[];\n /**\n * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n query: string;\n /**\n * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n queryToInsert: string;\n /**\n * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.\n */\n dependencies?: {\n /** Standard Shopify customer metafields used in the query. */\n standardMetafields?: CustomerStandardMetafieldDependency[];\n /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */\n customMetafields?: string[];\n };\n /**\n * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge.\n */\n createdOn: string;\n}" - }, - "DiscountFunctionSettingsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "name": "DiscountFunctionSettingsApi", - "description": "The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DiscountFunctionSettingsData", - "description": "The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "DiscountsApi", - "description": "The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface DiscountFunctionSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends Omit, 'data'> {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: DiscountFunctionSettingsData;\n /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */\n discounts: DiscountsApi;\n}" - }, - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store discount function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your discount configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - }, - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - }, - "DiscountsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountsApi", - "description": "The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountClasses", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountMethod", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "updateDiscountClasses", - "value": "UpdateSignalFunction", - "description": "A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects." - } - ], - "value": "export interface DiscountsApi {\n /**\n * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.\n */\n discountClasses: ReadonlySignalLike;\n /**\n * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.\n */\n updateDiscountClasses: UpdateSignalFunction;\n /**\n * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.\n */\n discountMethod: ReadonlySignalLike;\n}" - }, - "ReadonlySignalLike": { - "filePath": "src/shared.ts", - "name": "ReadonlySignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface ReadonlySignalLike {\n /**\n * The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.\n */\n readonly value: T;\n /**\n * Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.\n */\n subscribe(fn: (value: T) => void): () => void;\n}" - }, - "DiscountClass": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountClass", - "value": "'product' | 'order' | 'shipping'", - "description": "The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).", - "isPublicDocs": true - }, - "DiscountMethod": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountMethod", - "value": "'automatic' | 'code'", - "description": "The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.", - "isPublicDocs": true - }, - "UpdateSignalFunction": { - "filePath": "src/shared.ts", - "name": "UpdateSignalFunction", - "description": "A function that updates a signal and returns a result indicating success or failure. The function is typically used along with a `ReadonlySignalLike` object.", - "params": [ - { - "name": "value", - "description": "", - "value": "T", - "filePath": "src/shared.ts" - } - ], - "returns": { - "filePath": "src/shared.ts", - "description": "", - "name": "Result", - "value": "Result" - }, - "value": "(value: T) => Result" - }, - "Result": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Result", - "value": "{success: true; value: T} | {success: false; errors: ValidationError[]}", - "description": "A result type that indicates the success or failure of an operation." - }, - "ValidationError": { - "filePath": "src/shared.ts", - "name": "ValidationError", - "description": "A validation error object that is returned when an operation fails.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "A code identifier for the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ message: string; path: string[]; }[]", - "description": "Field-level validation issues", - "isOptional": true - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message describing the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "" - } - ], - "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" - }, - "FunctionSettingsComponents": { - "filePath": "src/surfaces/admin/components/FunctionSettingsComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FunctionSettingsComponents", - "value": "FormExtensionComponents | 'FunctionSettings'", - "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." - }, - "FormExtensionComponents": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - }, - "FunctionSettings": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FunctionSettings", - "description": "Configure the following properties on the function settings component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class FunctionSettings\n extends PreactCustomElement\n implements FunctionSettingsProps\n{\n constructor();\n}" - }, - "PrintActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/PrintActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PrintActionExtensionComponents", - "value": "StandardComponents | 'AdminPrintAction'", - "description": "The components available for building print action extensions. Includes all standard components plus the admin print action component required for print action setup." - }, - "AdminPrintAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintAction", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The `src` URL of the preview and the document to print. If not provided, the preview will show an empty state and the print button will be disabled. HTML, PDFs, and images are supported." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminPrintAction\n extends PreactCustomElement\n implements AdminPrintActionProps\n{\n /**\n * The `src` URL of the preview and the document to print.\n * If not provided, the preview will show an empty state and the print button will be disabled.\n * HTML, PDFs, and images are supported.\n */\n src: string;\n constructor();\n}" - }, - "ProductDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductDetailsConfigurationApi", - "description": "The `ProductDetailsConfigurationApi` object provides methods for configuring product bundles and relationships. Access the following properties on the `ProductDetailsConfigurationApi` object to build product configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product currently being viewed in the admin.\n * @deprecated\n */\n product: Product;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Product": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "Product", - "description": "A product configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "onlineStoreUrl", - "value": "string", - "description": "The URL to view this product on the online store. Use this to create \"View in store\" links.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productCategory", - "value": "string", - "description": "The standardized product category taxonomy. Use this for product classification in search and organization.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productComponents", - "value": "ProductComponent[]", - "description": "An array of component products that make up this bundle. Each component represents a product included in the bundle configuration." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "'ACTIVE' | 'ARCHIVED' | 'DRAFT'", - "description": "The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name shown to merchants and customers." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "The total available inventory summed across all variants and locations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this product has." - } - ], - "value": "export interface Product {\n /** The product's unique global identifier (GID). */\n id: string;\n /** The product's display name shown to merchants and customers. */\n title: string;\n /** The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`). */\n handle: string;\n /** The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished). */\n status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';\n /** The total number of variants this product has. */\n totalVariants: number;\n /** The total available inventory summed across all variants and locations. */\n totalInventory: number;\n /** Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations. */\n hasOnlyDefaultVariant: boolean;\n /** The URL to view this product on the online store. Use this to create \"View in store\" links. */\n onlineStoreUrl?: string;\n /** Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values. */\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n /** The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\"). */\n productType: string;\n /** The standardized product category taxonomy. Use this for product classification in search and organization. */\n productCategory?: string;\n /** An array of component products that make up this bundle. Each component represents a product included in the bundle configuration. */\n productComponents: ProductComponent[];\n}" - }, - "ProductComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductComponent", - "description": "A component product that is part of a bundle. Represents an individual product included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "componentVariantsCount", - "value": "number", - "description": "The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "featuredImage", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "nonComponentVariantsCount", - "value": "number", - "description": "The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productUrl", - "value": "string", - "description": "The admin URL for this component product. Use this to create links to the product's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name. Use this to show which product is included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this component product has. Use this to determine if variant selection is needed for this component." - } - ], - "value": "export interface ProductComponent {\n /** The component product's unique global identifier (GID). */\n id: string;\n /** The product's display name. Use this to show which product is included in the bundle. */\n title: string;\n /** The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n featuredImage?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The total number of variants this component product has. Use this to determine if variant selection is needed for this component. */\n totalVariants: number;\n /** The admin URL for this component product. Use this to create links to the product's details page in the admin. */\n productUrl: string;\n /** The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles. */\n componentVariantsCount: number;\n /** The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations. */\n nonComponentVariantsCount: number;\n}" - }, - "PurchaseOptionsCardConfigurationApi": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "name": "PurchaseOptionsCardConfigurationApi", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ selected: { id: string; sellingPlanId?: string; }[]; }", - "description": "Selected purchase option data including product and selling plan identifiers." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PurchaseOptionsCardConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends ActionExtensionApi {\n /** Selected purchase option data including product and selling plan identifiers. */\n data: {\n /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */\n selected: {\n /** The product or variant identifier. */\n id: string;\n /** The associated selling plan identifier, if a subscription option is selected. */\n sellingPlanId?: string;\n }[];\n };\n}" - }, - "ProductVariantDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantDetailsConfigurationApi", - "description": "The `ProductVariantDetailsConfigurationApi` object provides methods for configuring product variant bundles and relationships. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to build variant configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductVariantDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product variant currently being viewed in the admin.\n * @deprecated\n */\n variant: ProductVariant;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "ProductVariant": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariant", - "description": "A product variant configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string", - "description": "The barcode, UPC, or ISBN number for the variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "string", - "description": "The original price before any discounts or markdowns." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "string", - "description": "The current selling price for this variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantComponents", - "value": "ProductVariantComponent[]", - "description": "An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for inventory tracking." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxCode", - "value": "string", - "description": "The harmonized system (HS) tax code for international shipping and customs." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number", - "description": "The physical weight of the variant as a number." - } - ], - "value": "export interface ProductVariant {\n /** The variant's unique global identifier (GID). */\n id: string;\n /** The Stock Keeping Unit (SKU) identifier for inventory tracking. */\n sku: string;\n /** The barcode, UPC, or ISBN number for the variant. */\n barcode: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The current selling price for this variant. */\n price: string;\n /** The original price before any discounts or markdowns. */\n compareAtPrice: string;\n /** Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout. */\n taxable: boolean;\n /** The harmonized system (HS) tax code for international shipping and customs. */\n taxCode: string;\n /** The physical weight of the variant as a number. */\n weight: number;\n /** The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n /** An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle. */\n productVariantComponents: ProductVariantComponent[];\n}" - }, - "ProductVariantComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantComponent", - "description": "A component variant that is part of a product bundle. Represents an individual product variant included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantUrl", - "value": "string", - "description": "The admin URL for this product variant. Use this to create links to the variant's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for this component variant.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - } - ], - "value": "export interface ProductVariantComponent {\n /** The component variant's unique global identifier (GID). */\n id: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** The Stock Keeping Unit (SKU) identifier for this component variant. */\n sku?: string;\n /** The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n image?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The admin URL for this product variant. Use this to create links to the variant's details page in the admin. */\n productVariantUrl: string;\n /** The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n}" - }, - "OrderRoutingRuleApi": { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "name": "OrderRoutingRuleApi", - "description": "The `OrderRoutingRuleApi` object provides methods for configuring order routing rules. Access the following properties on the `OrderRoutingRuleApi` object to manage rule settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldsChange", - "value": "ApplyMetafieldsChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface OrderRoutingRuleApi\n extends StandardRenderingExtensionApi {\n /** Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration. */\n applyMetafieldsChange: ApplyMetafieldsChange;\n /** The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields). */\n data: Data;\n}" - }, - "ApplyMetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "ApplyMetafieldsChange", - "description": "A function that applies metafield changes to order routing rule settings. Call this function with one or more change operations to update or remove metafields in batch. Use batch operations to apply multiple configuration changes efficiently.", - "isPublicDocs": true, - "params": [ - { - "name": "changes", - "description": "", - "value": "MetafieldsChange[]", - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(changes: MetafieldsChange[]) => void" - }, - "MetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldsChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]", - "description": "One or more metafield change operations to apply to order routing rule settings. Can be a single change or an array of changes for batch operations. Use arrays to apply multiple changes at once.", - "isPublicDocs": true - }, - "ValidationSettingsApi": { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "name": "ValidationSettingsApi", - "description": "The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "ValidationData", - "description": "The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ValidationSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: ValidationData;\n}" - }, - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - } - } - } - ], - "examples": { - "description": "Generate custom printable documents", - "examples": [ - { - "description": "Generate product labels with an option to add additional products beyond the initial selection. This example demonstrates using the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) within a print action and tracking the additional product count.", - "codeblock": { - "title": "Generate custom product labels", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useCallback} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [additionalProducts, setAdditionalProducts] = useState([]);\n const [printUrl, setPrintUrl] = useState(null);\n\n const handleSelectMore = async () => {\n const picked = await shopify.resourcePicker({\n type: 'product',\n multiple: 10,\n action: 'add',\n });\n\n if (picked) {\n setAdditionalProducts((prev) => [...prev, ...picked]);\n }\n };\n\n const handleGenerate = useCallback(async () => {\n const selectedIds = data.selected.map((item) => item.id);\n const additionalIds = additionalProducts.map((item) => item.id);\n const productIds = [...selectedIds, ...additionalIds];\n\n const response = await fetch('/api/generate-labels', {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify({productIds}),\n });\n\n const {printUrl: url} = await response.json();\n setPrintUrl(url);\n }, [data, additionalProducts]);\n\n return (\n <s-admin-print-action src={printUrl}>\n <s-text>{data.selected.length + additionalProducts.length} products selected</s-text>\n <s-button onClick={handleSelectMore}>Add More Products</s-button>\n <s-button onClick={handleGenerate}>Generate Labels</s-button>\n </s-admin-print-action>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Query order details using the [GraphQL Admin API](/docs/api/admin-graphql/) and then generate a shipping manifest PDF. This example shows fetching order data in `useEffect`, displaying the order list, and passing the data to your print service.", - "codeblock": { - "title": "Generate shipping manifest", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useEffect} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [orders, setOrders] = useState([]);\n const [printUrl, setPrintUrl] = useState(null);\n\n useEffect(() => {\n const fetchOrders = async () => {\n const orderIds = data.selected.map((item) => item.id);\n\n const {data: ordersData} = await shopify.query(\n `query GetOrders($ids: [ID!]!) {\n nodes(ids: $ids) {\n ... on Order {\n id\n name\n shippingAddress {\n address1\n city\n country\n }\n }\n }\n }`,\n {variables: {ids: orderIds}},\n );\n\n setOrders(ordersData.nodes);\n\n const response = await fetch('/api/generate-shipping-manifest', {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify({orders: ordersData.nodes}),\n });\n\n const {printUrl: url} = await response.json();\n setPrintUrl(url);\n };\n\n fetchOrders();\n }, [data]);\n\n return (\n <s-admin-print-action src={printUrl}>\n <s-text>Shipping manifest for {orders.length} orders</s-text>\n {orders.map((order) => (\n <s-text key={order.id}>{order.name}</s-text>\n ))}\n </s-admin-print-action>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Core APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Use `@media print` CSS for print-optimized styling:** Apply print-specific styles with `@media print` queries to control page breaks, hide UI elements, and optimize for paper output. The print preview shows the screen styles until printing.\n- **Set document MIME type correctly:** Return `Content-Type: application/pdf` for PDFs, `image/png` for images, or `text/html` for HTML documents. Incorrect MIME types may cause browser download instead of preview.\n- **Test `window.print()` behavior:** If generating HTML, test that `window.print()` works correctly. Some CSS frameworks or scripts may interfere with browser print dialogs." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Print action extensions must provide a URL string through the `src` prop. You can't render the print UI directly within the extension or control the print preview appearance.\n- URLs must be publicly accessible with CORS headers allowing the Shopify admin origin. Authentication tokens in URLs can expire while merchants have the preview open.\n- Extensions don't have access to printer settings. You can't configure print options like page orientation, margins, or paper size. Merchants control these through browser print dialogs." - } - ] - }, - { - "name": "Product Details Configuration API", - "description": "The Product Details Configuration API lets you [build product configuration extensions for bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) that define product relationships and manage [bundle](/docs/apps/build/product-merchandising/bundles) compositions. Use this API to build configuration interfaces for bundle and component product experiences.", - "isVisualComponent": false, - "type": "API", - "requires": "the [admin block](/docs/api/admin-extensions/{API_VERSION}/web-components/settings-and-templates/admin-block) component.", - "defaultExample": { - "description": "Open the product [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) to select up to five components for a [bundle](/docs/apps/build/product-merchandising/bundles). This example filters out draft and archived products, saves the bundle configuration to your backend, and tracks the selection count.", - "codeblock": { - "title": "Select bundle components", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [selected, setSelected] = useState([]);\n\n const parentProductId = data.selected[0]?.id;\n\n const handleSelectComponents = async () => {\n const componentProducts = await shopify.resourcePicker({\n type: 'product',\n multiple: 5,\n action: 'select',\n filter: {\n draft: false,\n archived: false,\n },\n });\n\n if (componentProducts) {\n setSelected(componentProducts);\n \n await fetch('/api/bundles/configure', {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify({\n bundleProductId: parentProductId,\n components: componentProducts.map((p) => ({\n productId: p.id,\n quantity: 1,\n })),\n }),\n });\n }\n };\n\n return (\n <s-admin-block heading=\"Bundle Configuration\">\n <s-button onClick={handleSelectComponents}>Select Components</s-button>\n {selected.length > 0 && (\n <s-text>{selected.length} components selected</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `ProductDetailsConfigurationApi` object provides access to product configuration data. Access the following properties on the `ProductDetailsConfigurationApi` object to interact with the current product context, navigate within the admin, and select resources in the `admin.product-details.configuration.render` target.", - "type": "ProductDetailsConfigurationApi", - "typeDefinitions": { - "ProductDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductDetailsConfigurationApi", - "description": "The `ProductDetailsConfigurationApi` object provides methods for configuring product bundles and relationships. Access the following properties on the `ProductDetailsConfigurationApi` object to build product configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product currently being viewed in the admin.\n * @deprecated\n */\n product: Product;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Auth": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "Auth", - "description": "The `Auth` object provides authentication methods for secure communication with your app backend.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "idToken", - "value": "() => Promise", - "description": "Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved." - } - ], - "value": "export interface Auth {\n /**\n * Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved.\n */\n idToken: () => Promise;\n}" - }, - "Data": { - "filePath": "src/surfaces/admin/api/shared.ts", - "name": "Data", - "description": "The `Data` object provides access to currently viewed or selected resources in the admin context.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "{ id: string; }[]", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - } - ], - "value": "export interface Data {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n selected: {id: string}[];\n}" - }, - "Product": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "Product", - "description": "A product configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "onlineStoreUrl", - "value": "string", - "description": "The URL to view this product on the online store. Use this to create \"View in store\" links.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productCategory", - "value": "string", - "description": "The standardized product category taxonomy. Use this for product classification in search and organization.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productComponents", - "value": "ProductComponent[]", - "description": "An array of component products that make up this bundle. Each component represents a product included in the bundle configuration." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "'ACTIVE' | 'ARCHIVED' | 'DRAFT'", - "description": "The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name shown to merchants and customers." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "The total available inventory summed across all variants and locations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this product has." - } - ], - "value": "export interface Product {\n /** The product's unique global identifier (GID). */\n id: string;\n /** The product's display name shown to merchants and customers. */\n title: string;\n /** The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`). */\n handle: string;\n /** The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished). */\n status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';\n /** The total number of variants this product has. */\n totalVariants: number;\n /** The total available inventory summed across all variants and locations. */\n totalInventory: number;\n /** Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations. */\n hasOnlyDefaultVariant: boolean;\n /** The URL to view this product on the online store. Use this to create \"View in store\" links. */\n onlineStoreUrl?: string;\n /** Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values. */\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n /** The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\"). */\n productType: string;\n /** The standardized product category taxonomy. Use this for product classification in search and organization. */\n productCategory?: string;\n /** An array of component products that make up this bundle. Each component represents a product included in the bundle configuration. */\n productComponents: ProductComponent[];\n}" - }, - "ProductComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductComponent", - "description": "A component product that is part of a bundle. Represents an individual product included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "componentVariantsCount", - "value": "number", - "description": "The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "featuredImage", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "nonComponentVariantsCount", - "value": "number", - "description": "The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productUrl", - "value": "string", - "description": "The admin URL for this component product. Use this to create links to the product's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name. Use this to show which product is included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this component product has. Use this to determine if variant selection is needed for this component." - } - ], - "value": "export interface ProductComponent {\n /** The component product's unique global identifier (GID). */\n id: string;\n /** The product's display name. Use this to show which product is included in the bundle. */\n title: string;\n /** The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n featuredImage?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The total number of variants this component product has. Use this to determine if variant selection is needed for this component. */\n totalVariants: number;\n /** The admin URL for this component product. Use this to create links to the product's details page in the admin. */\n productUrl: string;\n /** The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles. */\n componentVariantsCount: number;\n /** The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations. */\n nonComponentVariantsCount: number;\n}" - }, - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred." - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - }, - "ExtensionTarget": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionTarget", - "value": "keyof ExtensionTargets", - "description": "A string literal union of all valid extension target identifiers. Use this type to specify where your admin UI extension should render, such as `admin.product-details.block.render` for a block on product details pages or `admin.order-details.action.render` for an action on order details pages. The target determines the extension's location, available APIs, and UI components." - }, - "ExtensionTargets": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "name": "ExtensionTargets", - "description": "Maps extension target identifiers to their corresponding extension types. Each target represents a specific location or context in the Shopify admin where extensions can render or execute. Use these targets to define where your extension appears and what capabilities it has access to.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.app.tools.data", - "value": "RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >", - "description": "A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-location-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customers.segmentation-templates.data", - "value": "RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >", - "description": "A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.function-settings.render", - "value": "RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.configuration.render", - "value": "RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.reorder.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.configuration.render", - "value": "RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.internal-order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.validation.render", - "value": "RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." - } - ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" - }, - "RenderExtension": { - "filePath": "src/extension.ts", - "name": "RenderExtension", - "description": "Defines the structure of a render extension, which displays UI in the Shopify admin.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "components", - "value": "ComponentsSet", - "description": "The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "void | Promise", - "description": "The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads." - } - ], - "value": "export interface RenderExtension {\n /**\n * The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying.\n */\n api: Api;\n /**\n * The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target.\n */\n components: ComponentsSet;\n /**\n * The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads.\n */\n output: void | Promise;\n}" - }, - "ActionExtensionApi": { - "filePath": "src/surfaces/admin/api/action/action.ts", - "name": "ActionExtensionApi", - "description": "The `ActionExtensionApi` object provides methods for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ActionExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner.\n */\n close: () => void;\n\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n}" - }, - "I18n": { - "filePath": "src/api.ts", - "name": "I18n", - "description": "Internationalization utilities for formatting and translating content according to the user's locale. Use these methods to display numbers, currency, dates, and translated strings that match the merchant's language and regional preferences.", - "members": [ - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatCurrency", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatDate", - "value": "(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string", - "description": "Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatNumber", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "translate", - "value": "I18nTranslate", - "description": "Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components." - } - ], - "value": "export interface I18n {\n /**\n * Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default.\n *\n * @param number - The number to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the number format\n */\n formatNumber: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default.\n *\n * @param number - The currency amount to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the currency format, such as the currency code\n */\n formatCurrency: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style.\n *\n * @param date - The Date object to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.DateTimeFormatOptions for customizing the date format\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n */\n formatDate: (\n date: Date,\n options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,\n ) => string;\n\n /**\n * Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components.\n */\n translate: I18nTranslate;\n}" - }, - "I18nTranslate": { - "filePath": "src/api.ts", - "name": "I18nTranslate", - "description": "The translation function signature for internationalization. Use this to translate string keys defined in your locale files into localized content for the current user's language.", - "members": [], - "value": "export interface I18nTranslate {\n /**\n * Returns a translated string matching a key in a locale file. Use this to display localized text in your extension based on the merchant's language preferences. Supports interpolation with replacement values and pluralization with the `count` option. Returns a string when replacements are primitives, or an array when replacements include UI components.\n *\n * @param key - The translation key from your locale file (for example, \"banner.title\")\n * @param options - Optional replacement values for interpolation or the special `count` property for pluralization\n *\n * @example translate(\"banner.title\")\n * @example translate(\"items.count\", { count: 5 })\n */\n (\n key: string,\n options?: Record,\n ): ReplacementType extends string | number\n ? string\n : (string | ReplacementType)[];\n}" - }, - "Intents": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "Intents", - "description": "The `Intents` object provides methods for launching standardized Shopify workflows to create or edit resources. Intents enable your extension to trigger native admin interfaces for products, customers, discounts, and other resources, then receive the results when merchants complete the workflow.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "invoke", - "value": "IntentInvokeApi", - "description": "Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "launchUrl", - "value": "string | URL", - "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", - "isOptional": true - } - ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" - }, - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - }, - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result." - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - }, - "ApiVersion": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ApiVersion", - "value": "'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04'", - "description": "The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The `unstable` version provides access to the latest features but may change without notice." - }, - "ResourcePickerApi": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerApi", - "description": "Opens the resource picker modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "ResourcePickerOptions", - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "description": "", - "name": "Promise | undefined>", - "value": "Promise | undefined>" - }, - "value": "(\n options: ResourcePickerOptions,\n) => Promise | undefined>" - }, - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - }, - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - }, - "Storage": { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "name": "Storage", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: Keys) => Promise", - "description": "Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "deleteMany", - "value": "(keys: Keys[]) => Promise>", - "description": "Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "entries", - "value": "() => Promise>", - "description": "Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "get", - "value": "(key: Keys) => Promise", - "description": "Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "getMany", - "value": "(keys: Keys[]) => Promise", - "description": "Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "set", - "value": "(key: Keys, value: StorageTypes[Keys]) => Promise", - "description": "Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "setMany", - "value": "(entries: Partial) => Promise", - "description": "Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings." - } - ], - "value": "export interface Storage<\n BaseStorageTypes extends Record = Record,\n> {\n /**\n * Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports.\n *\n * @param key - The key to set the value for. Use descriptive keys to organize your stored data.\n * @param value - The value to set for the key. Can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n set<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n value: StorageTypes[Keys],\n ): Promise;\n\n /**\n * Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings.\n *\n * @param entries - An object containing key-value pairs to store. Values can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n setMany(\n entries: Partial,\n ): Promise;\n\n /**\n * Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type.\n *\n * @param key - The key to get the value for.\n * @returns The value of the key, or `undefined` if no value exists for the key.\n */\n get<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage.\n *\n * @param keys - An array of keys to get the values for.\n * @returns An array containing values for the requested keys, in the same order as the input keys.\n */\n getMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise<(StorageTypes[Keys] | undefined)[]>;\n\n /**\n * Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs.\n */\n clear(): Promise;\n\n /**\n * Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene.\n *\n * @param key - The key to delete.\n * @returns A promise that resolves to `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n delete<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings.\n *\n * @param keys - An array of keys to delete.\n * @returns A promise that resolves to an object mapping each key to a boolean value: `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n deleteMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise>;\n\n /**\n * Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples.\n *\n * @returns A promise that resolves to an iterator containing all key-value pairs in the storage.\n */\n entries<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(): Promise>;\n}" - }, - "ActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/ActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionExtensionComponents", - "value": "StandardComponents | 'AdminAction'", - "description": "The components available for building action extensions. Includes all standard components plus the admin action component required for action extension setup." - }, - "StandardComponents": { - "filePath": "src/surfaces/admin/components/StandardComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "StandardComponents", - "value": "'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField'", - "description": "The standard set of UI components available in most admin extensions. These components provide the building blocks for creating extension interfaces including layout elements, form inputs, data display, navigation, and interactive controls. Use these components to build consistent, accessible UIs that match the Shopify admin design system." - }, - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "OrderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedList", - "description": "Configure the following properties on the ordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OrderedList\n extends PreactCustomElement\n implements OrderedListProps\n{\n constructor();\n}" - }, - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)" - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "Tooltip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Tooltip", - "description": "Configure the following properties on the tooltip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Tooltip extends PreactOverlayElement implements TooltipProps {\n constructor();\n}" - }, - "UnorderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedList", - "description": "Configure the following properties on the unordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class UnorderedList\n extends PreactCustomElement\n implements UnorderedListProps\n{\n constructor();\n}" - }, - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "AdminAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminAction", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text to use as the Action modal's title. If not provided, the name of the extension will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminAction\n extends PreactCustomElement\n implements AdminActionProps\n{\n /**\n * The text to use as the Action modal's title. If not provided, the name of the extension will be used.\n */\n heading: string;\n /**\n * Whether the action is in a loading state, such as during initial page load or when the action is being opened.\n * When `true`, the action might be in an inert state that prevents user interaction.\n */\n loading: boolean;\n constructor();\n}" - }, - "RunnableExtension": { - "filePath": "src/extension.ts", - "name": "RunnableExtension", - "description": "Defines the structure of a runnable extension, which executes logic and returns data without rendering UI.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "Output | Promise", - "description": "The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case." - } - ], - "value": "export interface RunnableExtension {\n /**\n * The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension.\n */\n api: Api;\n /**\n * The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case.\n */\n output: Output | Promise;\n}" - }, - "ShouldRenderApi": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderApi", - "description": "The `ShouldRenderApi` object provides methods for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ShouldRenderApi\n extends StandardApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.\n */\n data: Data;\n}" - }, - "ShouldRenderOutput": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderOutput", - "description": "The output returned by `should-render` extensions to control visibility.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "boolean", - "description": "Whether to display the associated action extension. Return `true` to show the action, `false` to hide it." - } - ], - "value": "export interface ShouldRenderOutput {\n /** Whether to display the associated action extension. Return `true` to show the action, `false` to hide it. */\n display: boolean;\n}" - }, - "BlockExtensionApi": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "BlockExtensionApi", - "description": "The `BlockExtensionApi` object provides methods for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface BlockExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n\n /**\n * Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`).\n */\n navigation: Navigation;\n}" - }, - "Navigation": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "Navigation", - "description": "The `Navigation` object provides methods for navigating between extensions and admin pages.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigate", - "value": "(url: string | URL) => void", - "description": "Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "navigation.navigate('extension://my-admin-action-extension-handle')", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface Navigation {\n /**\n * Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.\n *\n * @param url - The destination URL, typically in the format 'extension://extension-handle' for other extensions\n * @example navigation.navigate('extension://my-admin-action-extension-handle')\n */\n navigate: (url: string | URL) => void;\n}" - }, - "BlockExtensionComponents": { - "filePath": "src/surfaces/admin/components/BlockExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BlockExtensionComponents", - "value": "StandardComponents | 'AdminBlock' | 'Form'", - "description": "The components available for building block extensions. Includes all standard components plus the admin block component required for block extension setup and the form component for creating forms." - }, - "AdminBlock": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlock", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminBlock\n extends PreactCustomElement\n implements AdminBlockProps\n{\n /**\n * The text displayed as the block's title in the header. If not provided, the extension name will be used.\n */\n heading: string;\n /**\n * The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.\n */\n collapsedSummary: string;\n constructor();\n}" - }, - "Form": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Form", - "description": "Configure the following properties on the form component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" - }, - "StandardApi": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "StandardApi", - "description": "The `StandardApi` object provides core methods available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface StandardApi {\n /**\n * The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.\n */\n extension: {\n target: ExtensionTarget;\n };\n\n /**\n * Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.\n */\n auth: Auth;\n\n /**\n * Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.\n */\n i18n: I18n;\n\n /**\n * Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.\n */\n intents: Intents;\n\n /**\n * Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension.\n */\n storage: Storage;\n\n /**\n * Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.\n */\n query: (\n query: string,\n options?: {variables?: Variables; version?: Omit},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n}" - }, - "GraphQLError": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "GraphQLError", - "description": "The GraphQL error returned by the [GraphQL Admin API](/docs/api/admin-graphql).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "locations", - "value": "{ line: number; column: string; }", - "description": "The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query." - } - ], - "value": "export interface GraphQLError {\n /**\n * A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query.\n */\n message: string;\n /**\n * The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string.\n */\n locations: {\n /** The line number in the GraphQL query where the error occurred. */\n line: number;\n /** The column position in the GraphQL query where the error occurred. */\n column: string;\n };\n}" - }, - "CustomerSegmentTemplateApi": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplateApi", - "description": "The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "__enabledFeatures", - "value": "string[]", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating template content into the merchant's language." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface CustomerSegmentTemplateApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardApi {\n /** Utilities for translating template content into the merchant's language. */\n i18n: I18n;\n /** @private */\n __enabledFeatures: string[];\n}" - }, - "CustomerSegmentTemplate": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplate", - "description": "Defines a customer segment template that merchants can use to create targeted customer groups.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "createdOn", - "value": "string", - "description": "The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "dependencies", - "value": "{ standardMetafields?: \"facts.birth_date\"[]; customMetafields?: string[]; }", - "description": "Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string | string[]", - "description": "The template description in the merchant's language. Use an array for multiple paragraphs." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "queryToInsert", - "value": "string", - "description": "The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The template title in the merchant's language." - } - ], - "value": "export interface CustomerSegmentTemplate {\n /**\n * The template title in the merchant's language.\n */\n title: string;\n /**\n * The template description in the merchant's language. Use an array for multiple paragraphs.\n */\n description: string | string[];\n /**\n * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n query: string;\n /**\n * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n queryToInsert: string;\n /**\n * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.\n */\n dependencies?: {\n /** Standard Shopify customer metafields used in the query. */\n standardMetafields?: CustomerStandardMetafieldDependency[];\n /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */\n customMetafields?: string[];\n };\n /**\n * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge.\n */\n createdOn: string;\n}" - }, - "DiscountFunctionSettingsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "name": "DiscountFunctionSettingsApi", - "description": "The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DiscountFunctionSettingsData", - "description": "The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "DiscountsApi", - "description": "The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface DiscountFunctionSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends Omit, 'data'> {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: DiscountFunctionSettingsData;\n /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */\n discounts: DiscountsApi;\n}" - }, - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store discount function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your discount configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - }, - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - }, - "DiscountsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountsApi", - "description": "The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountClasses", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountMethod", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "updateDiscountClasses", - "value": "UpdateSignalFunction", - "description": "A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects." - } - ], - "value": "export interface DiscountsApi {\n /**\n * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.\n */\n discountClasses: ReadonlySignalLike;\n /**\n * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.\n */\n updateDiscountClasses: UpdateSignalFunction;\n /**\n * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.\n */\n discountMethod: ReadonlySignalLike;\n}" - }, - "ReadonlySignalLike": { - "filePath": "src/shared.ts", - "name": "ReadonlySignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface ReadonlySignalLike {\n /**\n * The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.\n */\n readonly value: T;\n /**\n * Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.\n */\n subscribe(fn: (value: T) => void): () => void;\n}" - }, - "DiscountClass": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountClass", - "value": "'product' | 'order' | 'shipping'", - "description": "The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).", - "isPublicDocs": true - }, - "DiscountMethod": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountMethod", - "value": "'automatic' | 'code'", - "description": "The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.", - "isPublicDocs": true - }, - "UpdateSignalFunction": { - "filePath": "src/shared.ts", - "name": "UpdateSignalFunction", - "description": "A function that updates a signal and returns a result indicating success or failure. The function is typically used along with a `ReadonlySignalLike` object.", - "params": [ - { - "name": "value", - "description": "", - "value": "T", - "filePath": "src/shared.ts" - } - ], - "returns": { - "filePath": "src/shared.ts", - "description": "", - "name": "Result", - "value": "Result" - }, - "value": "(value: T) => Result" - }, - "Result": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Result", - "value": "{success: true; value: T} | {success: false; errors: ValidationError[]}", - "description": "A result type that indicates the success or failure of an operation." - }, - "ValidationError": { - "filePath": "src/shared.ts", - "name": "ValidationError", - "description": "A validation error object that is returned when an operation fails.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "A code identifier for the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ message: string; path: string[]; }[]", - "description": "Field-level validation issues", - "isOptional": true - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message describing the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "" - } - ], - "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" - }, - "FunctionSettingsComponents": { - "filePath": "src/surfaces/admin/components/FunctionSettingsComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FunctionSettingsComponents", - "value": "FormExtensionComponents | 'FunctionSettings'", - "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." - }, - "FormExtensionComponents": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - }, - "FunctionSettings": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FunctionSettings", - "description": "Configure the following properties on the function settings component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class FunctionSettings\n extends PreactCustomElement\n implements FunctionSettingsProps\n{\n constructor();\n}" - }, - "PrintActionExtensionApi": { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "name": "PrintActionExtensionApi", - "description": "The `PrintActionExtensionApi` object provides methods for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PrintActionExtensionApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products.\n */\n data: Data;\n}" - }, - "PrintActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/PrintActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PrintActionExtensionComponents", - "value": "StandardComponents | 'AdminPrintAction'", - "description": "The components available for building print action extensions. Includes all standard components plus the admin print action component required for print action setup." - }, - "AdminPrintAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintAction", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The `src` URL of the preview and the document to print. If not provided, the preview will show an empty state and the print button will be disabled. HTML, PDFs, and images are supported." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminPrintAction\n extends PreactCustomElement\n implements AdminPrintActionProps\n{\n /**\n * The `src` URL of the preview and the document to print.\n * If not provided, the preview will show an empty state and the print button will be disabled.\n * HTML, PDFs, and images are supported.\n */\n src: string;\n constructor();\n}" - }, - "PurchaseOptionsCardConfigurationApi": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "name": "PurchaseOptionsCardConfigurationApi", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ selected: { id: string; sellingPlanId?: string; }[]; }", - "description": "Selected purchase option data including product and selling plan identifiers." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PurchaseOptionsCardConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends ActionExtensionApi {\n /** Selected purchase option data including product and selling plan identifiers. */\n data: {\n /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */\n selected: {\n /** The product or variant identifier. */\n id: string;\n /** The associated selling plan identifier, if a subscription option is selected. */\n sellingPlanId?: string;\n }[];\n };\n}" - }, - "ProductVariantDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantDetailsConfigurationApi", - "description": "The `ProductVariantDetailsConfigurationApi` object provides methods for configuring product variant bundles and relationships. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to build variant configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductVariantDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product variant currently being viewed in the admin.\n * @deprecated\n */\n variant: ProductVariant;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "ProductVariant": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariant", - "description": "A product variant configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string", - "description": "The barcode, UPC, or ISBN number for the variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "string", - "description": "The original price before any discounts or markdowns." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "string", - "description": "The current selling price for this variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantComponents", - "value": "ProductVariantComponent[]", - "description": "An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for inventory tracking." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxCode", - "value": "string", - "description": "The harmonized system (HS) tax code for international shipping and customs." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number", - "description": "The physical weight of the variant as a number." - } - ], - "value": "export interface ProductVariant {\n /** The variant's unique global identifier (GID). */\n id: string;\n /** The Stock Keeping Unit (SKU) identifier for inventory tracking. */\n sku: string;\n /** The barcode, UPC, or ISBN number for the variant. */\n barcode: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The current selling price for this variant. */\n price: string;\n /** The original price before any discounts or markdowns. */\n compareAtPrice: string;\n /** Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout. */\n taxable: boolean;\n /** The harmonized system (HS) tax code for international shipping and customs. */\n taxCode: string;\n /** The physical weight of the variant as a number. */\n weight: number;\n /** The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n /** An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle. */\n productVariantComponents: ProductVariantComponent[];\n}" - }, - "ProductVariantComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantComponent", - "description": "A component variant that is part of a product bundle. Represents an individual product variant included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantUrl", - "value": "string", - "description": "The admin URL for this product variant. Use this to create links to the variant's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for this component variant.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - } - ], - "value": "export interface ProductVariantComponent {\n /** The component variant's unique global identifier (GID). */\n id: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** The Stock Keeping Unit (SKU) identifier for this component variant. */\n sku?: string;\n /** The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n image?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The admin URL for this product variant. Use this to create links to the variant's details page in the admin. */\n productVariantUrl: string;\n /** The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n}" - }, - "OrderRoutingRuleApi": { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "name": "OrderRoutingRuleApi", - "description": "The `OrderRoutingRuleApi` object provides methods for configuring order routing rules. Access the following properties on the `OrderRoutingRuleApi` object to manage rule settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldsChange", - "value": "ApplyMetafieldsChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface OrderRoutingRuleApi\n extends StandardRenderingExtensionApi {\n /** Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration. */\n applyMetafieldsChange: ApplyMetafieldsChange;\n /** The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields). */\n data: Data;\n}" - }, - "ApplyMetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "ApplyMetafieldsChange", - "description": "A function that applies metafield changes to order routing rule settings. Call this function with one or more change operations to update or remove metafields in batch. Use batch operations to apply multiple configuration changes efficiently.", - "isPublicDocs": true, - "params": [ - { - "name": "changes", - "description": "", - "value": "MetafieldsChange[]", - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(changes: MetafieldsChange[]) => void" - }, - "MetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldsChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]", - "description": "One or more metafield change operations to apply to order routing rule settings. Can be a single change or an array of changes for batch operations. Use arrays to apply multiple changes at once.", - "isPublicDocs": true - }, - "ValidationSettingsApi": { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "name": "ValidationSettingsApi", - "description": "The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "ValidationData", - "description": "The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ValidationSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: ValidationData;\n}" - }, - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - } - } - } - ], - "examples": { - "description": "Configure product bundles", - "examples": [ - { - "description": "Query a product's bundle metafield and parse the JSON components array. This example fetches bundle data in `useEffect`, parses the stored configuration, and displays the component count.", - "codeblock": { - "title": "Load bundle configuration", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useEffect} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [components, setComponents] = useState([]);\n\n useEffect(() => {\n const loadConfig = async () => {\n const productId = data.selected[0]?.id;\n\n const {data: bundleData} = await shopify.query(\n `query GetBundleComponents($id: ID!) {\n product(id: $id) {\n id\n title\n metafield(namespace: \"bundle\", key: \"components\") {\n value\n }\n }\n }`,\n {variables: {id: productId}},\n );\n\n const comps = bundleData.product.metafield\n ? JSON.parse(bundleData.product.metafield.value)\n : [];\n\n setComponents(comps);\n };\n\n loadConfig();\n }, [data]);\n\n return (\n <s-admin-block heading=\"Current Bundle\">\n <s-text>{components.length} components configured</s-text>\n {components.map((comp, i) => (\n <s-text key={i}>Component {i + 1}</s-text>\n ))}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Launch the product creation workflow using [intents](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api) and capture the new product ID. This example invokes the `create` intent, waits for completion, and displays the created product ID from the response data.", - "codeblock": { - "title": "Create bundle component", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [created, setCreated] = useState(null);\n\n const handleCreate = async () => {\n const activity = await shopify.intents.invoke('create:shopify/Product');\n const response = await activity.complete;\n\n if (response.code === 'ok') {\n const newProductId = response.data?.product?.id;\n setCreated(newProductId);\n }\n };\n\n return (\n <s-admin-block heading=\"Add Component\">\n <s-button onClick={handleCreate}>Create New Component Product</s-button>\n {created && <s-text>Component created: {created}</s-text>}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Contextual APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Design for products with multiple variants:** Products in `api.data.selected` may have multiple variants. Design your bundle configuration to either apply to all variants or allow variant-level configuration.\n- **Use the Resource Picker to select components:** Use the [Resource Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) to let merchants select component products for bundle configurations.\n- **Implement cart transforms to enforce bundles:** Configuration only defines relationships in admin. Use Shopify Functions [cart transforms](/docs/api/functions/latest/cart-transform) to actually bundle products at checkout based on your saved configuration." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Configuration extensions only render in the admin. They don't affect storefront display or checkout behavior. You must implement storefront and checkout logic separately.\n- Bundles aren't enforced automatically. Saving configuration doesn't automatically create bundles. You must implement [cart transforms](/docs/api/functions/latest/cart-transform) or other mechanisms to enforce bundling at purchase time.\n- Your extension can't directly modify product properties. The API is read-only for product data. Use GraphQL mutations like [`productUpdate`](/docs/api/admin-graphql/latest/mutations/productUpdate) to update products if needed." - } - ] - }, - { - "name": "Product Variant Details Configuration API", - "description": "The Product Variant Details Configuration API lets you [build product configuration extensions for bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) that define variant relationships and manage [bundle](/docs/apps/build/product-merchandising/bundles) compositions. Use this API to build configuration interfaces for bundle and component product experiences at the variant level.", - "isVisualComponent": false, - "type": "API", - "requires": "the [admin block](/docs/api/admin-extensions/{API_VERSION}/web-components/settings-and-templates/admin-block) component.", - "defaultExample": { - "description": "Use the product variant [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) to select component variants for a [bundle](/docs/apps/build/product-merchandising/bundles). This example picks product variants, tracks selections, and posts the product variant IDs to configure the bundle.", - "codeblock": { - "title": "Select product variant components", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [selected, setSelected] = useState([]);\n\n const parentVariantId = data.selected[0]?.id;\n\n const handleSelectComponents = async () => {\n const componentVariants = await shopify.resourcePicker({\n type: 'variant',\n multiple: 5,\n action: 'select',\n filter: {\n draft: false,\n archived: false,\n },\n });\n\n if (componentVariants) {\n setSelected(componentVariants);\n \n await fetch('/api/bundles/configure-variant', {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify({\n bundleVariantId: parentVariantId,\n componentVariants: componentVariants.map((v) => ({\n variantId: v.id,\n quantity: 1,\n })),\n }),\n });\n }\n };\n\n return (\n <s-admin-block heading=\"Variant Bundle Configuration\">\n <s-button onClick={handleSelectComponents}>Select Variant Components</s-button>\n {selected.length > 0 && (\n <s-text>{selected.length} variant components selected</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `ProductVariantDetailsConfigurationApi` object provides access to product variant configuration data. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to interact with the current product variant context, navigate within the admin, and select resources in the `admin.product-variant-details.configuration.render` target.", - "type": "ProductVariantDetailsConfigurationApi", - "typeDefinitions": { - "ProductVariantDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantDetailsConfigurationApi", - "description": "The `ProductVariantDetailsConfigurationApi` object provides methods for configuring product variant bundles and relationships. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to build variant configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductVariantDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product variant currently being viewed in the admin.\n * @deprecated\n */\n variant: ProductVariant;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Auth": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "Auth", - "description": "The `Auth` object provides authentication methods for secure communication with your app backend.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "idToken", - "value": "() => Promise", - "description": "Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved." - } - ], - "value": "export interface Auth {\n /**\n * Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved.\n */\n idToken: () => Promise;\n}" - }, - "Data": { - "filePath": "src/surfaces/admin/api/shared.ts", - "name": "Data", - "description": "The `Data` object provides access to currently viewed or selected resources in the admin context.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "{ id: string; }[]", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - } - ], - "value": "export interface Data {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n selected: {id: string}[];\n}" - }, - "ProductVariant": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariant", - "description": "A product variant configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string", - "description": "The barcode, UPC, or ISBN number for the variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "string", - "description": "The original price before any discounts or markdowns." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "string", - "description": "The current selling price for this variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantComponents", - "value": "ProductVariantComponent[]", - "description": "An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for inventory tracking." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxCode", - "value": "string", - "description": "The harmonized system (HS) tax code for international shipping and customs." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number", - "description": "The physical weight of the variant as a number." - } - ], - "value": "export interface ProductVariant {\n /** The variant's unique global identifier (GID). */\n id: string;\n /** The Stock Keeping Unit (SKU) identifier for inventory tracking. */\n sku: string;\n /** The barcode, UPC, or ISBN number for the variant. */\n barcode: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The current selling price for this variant. */\n price: string;\n /** The original price before any discounts or markdowns. */\n compareAtPrice: string;\n /** Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout. */\n taxable: boolean;\n /** The harmonized system (HS) tax code for international shipping and customs. */\n taxCode: string;\n /** The physical weight of the variant as a number. */\n weight: number;\n /** The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n /** An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle. */\n productVariantComponents: ProductVariantComponent[];\n}" - }, - "ProductVariantComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantComponent", - "description": "A component variant that is part of a product bundle. Represents an individual product variant included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantUrl", - "value": "string", - "description": "The admin URL for this product variant. Use this to create links to the variant's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for this component variant.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - } - ], - "value": "export interface ProductVariantComponent {\n /** The component variant's unique global identifier (GID). */\n id: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** The Stock Keeping Unit (SKU) identifier for this component variant. */\n sku?: string;\n /** The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n image?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The admin URL for this product variant. Use this to create links to the variant's details page in the admin. */\n productVariantUrl: string;\n /** The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n}" - }, - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred." - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - }, - "ExtensionTarget": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionTarget", - "value": "keyof ExtensionTargets", - "description": "A string literal union of all valid extension target identifiers. Use this type to specify where your admin UI extension should render, such as `admin.product-details.block.render` for a block on product details pages or `admin.order-details.action.render` for an action on order details pages. The target determines the extension's location, available APIs, and UI components." - }, - "ExtensionTargets": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "name": "ExtensionTargets", - "description": "Maps extension target identifiers to their corresponding extension types. Each target represents a specific location or context in the Shopify admin where extensions can render or execute. Use these targets to define where your extension appears and what capabilities it has access to.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.app.tools.data", - "value": "RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >", - "description": "A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-location-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customers.segmentation-templates.data", - "value": "RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >", - "description": "A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.function-settings.render", - "value": "RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.configuration.render", - "value": "RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.reorder.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.configuration.render", - "value": "RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.internal-order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.validation.render", - "value": "RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." - } - ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" - }, - "RenderExtension": { - "filePath": "src/extension.ts", - "name": "RenderExtension", - "description": "Defines the structure of a render extension, which displays UI in the Shopify admin.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "components", - "value": "ComponentsSet", - "description": "The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "void | Promise", - "description": "The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads." - } - ], - "value": "export interface RenderExtension {\n /**\n * The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying.\n */\n api: Api;\n /**\n * The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target.\n */\n components: ComponentsSet;\n /**\n * The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads.\n */\n output: void | Promise;\n}" - }, - "ActionExtensionApi": { - "filePath": "src/surfaces/admin/api/action/action.ts", - "name": "ActionExtensionApi", - "description": "The `ActionExtensionApi` object provides methods for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ActionExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner.\n */\n close: () => void;\n\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n}" - }, - "I18n": { - "filePath": "src/api.ts", - "name": "I18n", - "description": "Internationalization utilities for formatting and translating content according to the user's locale. Use these methods to display numbers, currency, dates, and translated strings that match the merchant's language and regional preferences.", - "members": [ - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatCurrency", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatDate", - "value": "(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string", - "description": "Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatNumber", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "translate", - "value": "I18nTranslate", - "description": "Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components." - } - ], - "value": "export interface I18n {\n /**\n * Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default.\n *\n * @param number - The number to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the number format\n */\n formatNumber: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default.\n *\n * @param number - The currency amount to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the currency format, such as the currency code\n */\n formatCurrency: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style.\n *\n * @param date - The Date object to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.DateTimeFormatOptions for customizing the date format\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n */\n formatDate: (\n date: Date,\n options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,\n ) => string;\n\n /**\n * Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components.\n */\n translate: I18nTranslate;\n}" - }, - "I18nTranslate": { - "filePath": "src/api.ts", - "name": "I18nTranslate", - "description": "The translation function signature for internationalization. Use this to translate string keys defined in your locale files into localized content for the current user's language.", - "members": [], - "value": "export interface I18nTranslate {\n /**\n * Returns a translated string matching a key in a locale file. Use this to display localized text in your extension based on the merchant's language preferences. Supports interpolation with replacement values and pluralization with the `count` option. Returns a string when replacements are primitives, or an array when replacements include UI components.\n *\n * @param key - The translation key from your locale file (for example, \"banner.title\")\n * @param options - Optional replacement values for interpolation or the special `count` property for pluralization\n *\n * @example translate(\"banner.title\")\n * @example translate(\"items.count\", { count: 5 })\n */\n (\n key: string,\n options?: Record,\n ): ReplacementType extends string | number\n ? string\n : (string | ReplacementType)[];\n}" - }, - "Intents": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "Intents", - "description": "The `Intents` object provides methods for launching standardized Shopify workflows to create or edit resources. Intents enable your extension to trigger native admin interfaces for products, customers, discounts, and other resources, then receive the results when merchants complete the workflow.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "invoke", - "value": "IntentInvokeApi", - "description": "Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "launchUrl", - "value": "string | URL", - "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", - "isOptional": true - } - ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" - }, - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - }, - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result." - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - }, - "ApiVersion": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ApiVersion", - "value": "'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04'", - "description": "The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The `unstable` version provides access to the latest features but may change without notice." - }, - "ResourcePickerApi": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerApi", - "description": "Opens the resource picker modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "ResourcePickerOptions", - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "description": "", - "name": "Promise | undefined>", - "value": "Promise | undefined>" - }, - "value": "(\n options: ResourcePickerOptions,\n) => Promise | undefined>" - }, - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - }, - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - }, - "Storage": { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "name": "Storage", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: Keys) => Promise", - "description": "Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "deleteMany", - "value": "(keys: Keys[]) => Promise>", - "description": "Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "entries", - "value": "() => Promise>", - "description": "Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "get", - "value": "(key: Keys) => Promise", - "description": "Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "getMany", - "value": "(keys: Keys[]) => Promise", - "description": "Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "set", - "value": "(key: Keys, value: StorageTypes[Keys]) => Promise", - "description": "Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "setMany", - "value": "(entries: Partial) => Promise", - "description": "Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings." - } - ], - "value": "export interface Storage<\n BaseStorageTypes extends Record = Record,\n> {\n /**\n * Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports.\n *\n * @param key - The key to set the value for. Use descriptive keys to organize your stored data.\n * @param value - The value to set for the key. Can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n set<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n value: StorageTypes[Keys],\n ): Promise;\n\n /**\n * Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings.\n *\n * @param entries - An object containing key-value pairs to store. Values can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n setMany(\n entries: Partial,\n ): Promise;\n\n /**\n * Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type.\n *\n * @param key - The key to get the value for.\n * @returns The value of the key, or `undefined` if no value exists for the key.\n */\n get<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage.\n *\n * @param keys - An array of keys to get the values for.\n * @returns An array containing values for the requested keys, in the same order as the input keys.\n */\n getMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise<(StorageTypes[Keys] | undefined)[]>;\n\n /**\n * Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs.\n */\n clear(): Promise;\n\n /**\n * Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene.\n *\n * @param key - The key to delete.\n * @returns A promise that resolves to `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n delete<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings.\n *\n * @param keys - An array of keys to delete.\n * @returns A promise that resolves to an object mapping each key to a boolean value: `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n deleteMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise>;\n\n /**\n * Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples.\n *\n * @returns A promise that resolves to an iterator containing all key-value pairs in the storage.\n */\n entries<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(): Promise>;\n}" - }, - "ActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/ActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionExtensionComponents", - "value": "StandardComponents | 'AdminAction'", - "description": "The components available for building action extensions. Includes all standard components plus the admin action component required for action extension setup." - }, - "StandardComponents": { - "filePath": "src/surfaces/admin/components/StandardComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "StandardComponents", - "value": "'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField'", - "description": "The standard set of UI components available in most admin extensions. These components provide the building blocks for creating extension interfaces including layout elements, form inputs, data display, navigation, and interactive controls. Use these components to build consistent, accessible UIs that match the Shopify admin design system." - }, - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "OrderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedList", - "description": "Configure the following properties on the ordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OrderedList\n extends PreactCustomElement\n implements OrderedListProps\n{\n constructor();\n}" - }, - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)" - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "Tooltip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Tooltip", - "description": "Configure the following properties on the tooltip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Tooltip extends PreactOverlayElement implements TooltipProps {\n constructor();\n}" - }, - "UnorderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedList", - "description": "Configure the following properties on the unordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class UnorderedList\n extends PreactCustomElement\n implements UnorderedListProps\n{\n constructor();\n}" - }, - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "AdminAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminAction", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text to use as the Action modal's title. If not provided, the name of the extension will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminAction\n extends PreactCustomElement\n implements AdminActionProps\n{\n /**\n * The text to use as the Action modal's title. If not provided, the name of the extension will be used.\n */\n heading: string;\n /**\n * Whether the action is in a loading state, such as during initial page load or when the action is being opened.\n * When `true`, the action might be in an inert state that prevents user interaction.\n */\n loading: boolean;\n constructor();\n}" - }, - "RunnableExtension": { - "filePath": "src/extension.ts", - "name": "RunnableExtension", - "description": "Defines the structure of a runnable extension, which executes logic and returns data without rendering UI.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "Output | Promise", - "description": "The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case." - } - ], - "value": "export interface RunnableExtension {\n /**\n * The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension.\n */\n api: Api;\n /**\n * The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case.\n */\n output: Output | Promise;\n}" - }, - "ShouldRenderApi": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderApi", - "description": "The `ShouldRenderApi` object provides methods for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ShouldRenderApi\n extends StandardApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.\n */\n data: Data;\n}" - }, - "ShouldRenderOutput": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderOutput", - "description": "The output returned by `should-render` extensions to control visibility.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "boolean", - "description": "Whether to display the associated action extension. Return `true` to show the action, `false` to hide it." - } - ], - "value": "export interface ShouldRenderOutput {\n /** Whether to display the associated action extension. Return `true` to show the action, `false` to hide it. */\n display: boolean;\n}" - }, - "BlockExtensionApi": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "BlockExtensionApi", - "description": "The `BlockExtensionApi` object provides methods for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface BlockExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n\n /**\n * Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`).\n */\n navigation: Navigation;\n}" - }, - "Navigation": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "Navigation", - "description": "The `Navigation` object provides methods for navigating between extensions and admin pages.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigate", - "value": "(url: string | URL) => void", - "description": "Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "navigation.navigate('extension://my-admin-action-extension-handle')", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface Navigation {\n /**\n * Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.\n *\n * @param url - The destination URL, typically in the format 'extension://extension-handle' for other extensions\n * @example navigation.navigate('extension://my-admin-action-extension-handle')\n */\n navigate: (url: string | URL) => void;\n}" - }, - "BlockExtensionComponents": { - "filePath": "src/surfaces/admin/components/BlockExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BlockExtensionComponents", - "value": "StandardComponents | 'AdminBlock' | 'Form'", - "description": "The components available for building block extensions. Includes all standard components plus the admin block component required for block extension setup and the form component for creating forms." - }, - "AdminBlock": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlock", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminBlock\n extends PreactCustomElement\n implements AdminBlockProps\n{\n /**\n * The text displayed as the block's title in the header. If not provided, the extension name will be used.\n */\n heading: string;\n /**\n * The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.\n */\n collapsedSummary: string;\n constructor();\n}" - }, - "Form": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Form", - "description": "Configure the following properties on the form component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" - }, - "StandardApi": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "StandardApi", - "description": "The `StandardApi` object provides core methods available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface StandardApi {\n /**\n * The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.\n */\n extension: {\n target: ExtensionTarget;\n };\n\n /**\n * Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.\n */\n auth: Auth;\n\n /**\n * Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.\n */\n i18n: I18n;\n\n /**\n * Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.\n */\n intents: Intents;\n\n /**\n * Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension.\n */\n storage: Storage;\n\n /**\n * Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.\n */\n query: (\n query: string,\n options?: {variables?: Variables; version?: Omit},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n}" - }, - "GraphQLError": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "GraphQLError", - "description": "The GraphQL error returned by the [GraphQL Admin API](/docs/api/admin-graphql).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "locations", - "value": "{ line: number; column: string; }", - "description": "The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query." - } - ], - "value": "export interface GraphQLError {\n /**\n * A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query.\n */\n message: string;\n /**\n * The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string.\n */\n locations: {\n /** The line number in the GraphQL query where the error occurred. */\n line: number;\n /** The column position in the GraphQL query where the error occurred. */\n column: string;\n };\n}" - }, - "CustomerSegmentTemplateApi": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplateApi", - "description": "The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "__enabledFeatures", - "value": "string[]", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating template content into the merchant's language." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface CustomerSegmentTemplateApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardApi {\n /** Utilities for translating template content into the merchant's language. */\n i18n: I18n;\n /** @private */\n __enabledFeatures: string[];\n}" - }, - "CustomerSegmentTemplate": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplate", - "description": "Defines a customer segment template that merchants can use to create targeted customer groups.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "createdOn", - "value": "string", - "description": "The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "dependencies", - "value": "{ standardMetafields?: \"facts.birth_date\"[]; customMetafields?: string[]; }", - "description": "Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string | string[]", - "description": "The template description in the merchant's language. Use an array for multiple paragraphs." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "queryToInsert", - "value": "string", - "description": "The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The template title in the merchant's language." - } - ], - "value": "export interface CustomerSegmentTemplate {\n /**\n * The template title in the merchant's language.\n */\n title: string;\n /**\n * The template description in the merchant's language. Use an array for multiple paragraphs.\n */\n description: string | string[];\n /**\n * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n query: string;\n /**\n * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n queryToInsert: string;\n /**\n * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.\n */\n dependencies?: {\n /** Standard Shopify customer metafields used in the query. */\n standardMetafields?: CustomerStandardMetafieldDependency[];\n /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */\n customMetafields?: string[];\n };\n /**\n * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge.\n */\n createdOn: string;\n}" - }, - "DiscountFunctionSettingsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "name": "DiscountFunctionSettingsApi", - "description": "The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DiscountFunctionSettingsData", - "description": "The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "DiscountsApi", - "description": "The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface DiscountFunctionSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends Omit, 'data'> {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: DiscountFunctionSettingsData;\n /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */\n discounts: DiscountsApi;\n}" - }, - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store discount function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your discount configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - }, - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - }, - "DiscountsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountsApi", - "description": "The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountClasses", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountMethod", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "updateDiscountClasses", - "value": "UpdateSignalFunction", - "description": "A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects." - } - ], - "value": "export interface DiscountsApi {\n /**\n * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.\n */\n discountClasses: ReadonlySignalLike;\n /**\n * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.\n */\n updateDiscountClasses: UpdateSignalFunction;\n /**\n * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.\n */\n discountMethod: ReadonlySignalLike;\n}" - }, - "ReadonlySignalLike": { - "filePath": "src/shared.ts", - "name": "ReadonlySignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface ReadonlySignalLike {\n /**\n * The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.\n */\n readonly value: T;\n /**\n * Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.\n */\n subscribe(fn: (value: T) => void): () => void;\n}" - }, - "DiscountClass": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountClass", - "value": "'product' | 'order' | 'shipping'", - "description": "The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).", - "isPublicDocs": true - }, - "DiscountMethod": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountMethod", - "value": "'automatic' | 'code'", - "description": "The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.", - "isPublicDocs": true - }, - "UpdateSignalFunction": { - "filePath": "src/shared.ts", - "name": "UpdateSignalFunction", - "description": "A function that updates a signal and returns a result indicating success or failure. The function is typically used along with a `ReadonlySignalLike` object.", - "params": [ - { - "name": "value", - "description": "", - "value": "T", - "filePath": "src/shared.ts" - } - ], - "returns": { - "filePath": "src/shared.ts", - "description": "", - "name": "Result", - "value": "Result" - }, - "value": "(value: T) => Result" - }, - "Result": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Result", - "value": "{success: true; value: T} | {success: false; errors: ValidationError[]}", - "description": "A result type that indicates the success or failure of an operation." - }, - "ValidationError": { - "filePath": "src/shared.ts", - "name": "ValidationError", - "description": "A validation error object that is returned when an operation fails.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "A code identifier for the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ message: string; path: string[]; }[]", - "description": "Field-level validation issues", - "isOptional": true - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message describing the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "" - } - ], - "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" - }, - "FunctionSettingsComponents": { - "filePath": "src/surfaces/admin/components/FunctionSettingsComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FunctionSettingsComponents", - "value": "FormExtensionComponents | 'FunctionSettings'", - "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." - }, - "FormExtensionComponents": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - }, - "FunctionSettings": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FunctionSettings", - "description": "Configure the following properties on the function settings component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class FunctionSettings\n extends PreactCustomElement\n implements FunctionSettingsProps\n{\n constructor();\n}" - }, - "PrintActionExtensionApi": { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "name": "PrintActionExtensionApi", - "description": "The `PrintActionExtensionApi` object provides methods for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PrintActionExtensionApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products.\n */\n data: Data;\n}" - }, - "PrintActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/PrintActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PrintActionExtensionComponents", - "value": "StandardComponents | 'AdminPrintAction'", - "description": "The components available for building print action extensions. Includes all standard components plus the admin print action component required for print action setup." - }, - "AdminPrintAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintAction", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The `src` URL of the preview and the document to print. If not provided, the preview will show an empty state and the print button will be disabled. HTML, PDFs, and images are supported." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminPrintAction\n extends PreactCustomElement\n implements AdminPrintActionProps\n{\n /**\n * The `src` URL of the preview and the document to print.\n * If not provided, the preview will show an empty state and the print button will be disabled.\n * HTML, PDFs, and images are supported.\n */\n src: string;\n constructor();\n}" - }, - "ProductDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductDetailsConfigurationApi", - "description": "The `ProductDetailsConfigurationApi` object provides methods for configuring product bundles and relationships. Access the following properties on the `ProductDetailsConfigurationApi` object to build product configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product currently being viewed in the admin.\n * @deprecated\n */\n product: Product;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Product": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "Product", - "description": "A product configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "onlineStoreUrl", - "value": "string", - "description": "The URL to view this product on the online store. Use this to create \"View in store\" links.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productCategory", - "value": "string", - "description": "The standardized product category taxonomy. Use this for product classification in search and organization.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productComponents", - "value": "ProductComponent[]", - "description": "An array of component products that make up this bundle. Each component represents a product included in the bundle configuration." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "'ACTIVE' | 'ARCHIVED' | 'DRAFT'", - "description": "The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name shown to merchants and customers." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "The total available inventory summed across all variants and locations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this product has." - } - ], - "value": "export interface Product {\n /** The product's unique global identifier (GID). */\n id: string;\n /** The product's display name shown to merchants and customers. */\n title: string;\n /** The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`). */\n handle: string;\n /** The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished). */\n status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';\n /** The total number of variants this product has. */\n totalVariants: number;\n /** The total available inventory summed across all variants and locations. */\n totalInventory: number;\n /** Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations. */\n hasOnlyDefaultVariant: boolean;\n /** The URL to view this product on the online store. Use this to create \"View in store\" links. */\n onlineStoreUrl?: string;\n /** Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values. */\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n /** The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\"). */\n productType: string;\n /** The standardized product category taxonomy. Use this for product classification in search and organization. */\n productCategory?: string;\n /** An array of component products that make up this bundle. Each component represents a product included in the bundle configuration. */\n productComponents: ProductComponent[];\n}" - }, - "ProductComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductComponent", - "description": "A component product that is part of a bundle. Represents an individual product included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "componentVariantsCount", - "value": "number", - "description": "The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "featuredImage", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "nonComponentVariantsCount", - "value": "number", - "description": "The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productUrl", - "value": "string", - "description": "The admin URL for this component product. Use this to create links to the product's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name. Use this to show which product is included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this component product has. Use this to determine if variant selection is needed for this component." - } - ], - "value": "export interface ProductComponent {\n /** The component product's unique global identifier (GID). */\n id: string;\n /** The product's display name. Use this to show which product is included in the bundle. */\n title: string;\n /** The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n featuredImage?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The total number of variants this component product has. Use this to determine if variant selection is needed for this component. */\n totalVariants: number;\n /** The admin URL for this component product. Use this to create links to the product's details page in the admin. */\n productUrl: string;\n /** The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles. */\n componentVariantsCount: number;\n /** The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations. */\n nonComponentVariantsCount: number;\n}" - }, - "PurchaseOptionsCardConfigurationApi": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "name": "PurchaseOptionsCardConfigurationApi", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ selected: { id: string; sellingPlanId?: string; }[]; }", - "description": "Selected purchase option data including product and selling plan identifiers." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PurchaseOptionsCardConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends ActionExtensionApi {\n /** Selected purchase option data including product and selling plan identifiers. */\n data: {\n /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */\n selected: {\n /** The product or variant identifier. */\n id: string;\n /** The associated selling plan identifier, if a subscription option is selected. */\n sellingPlanId?: string;\n }[];\n };\n}" - }, - "OrderRoutingRuleApi": { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "name": "OrderRoutingRuleApi", - "description": "The `OrderRoutingRuleApi` object provides methods for configuring order routing rules. Access the following properties on the `OrderRoutingRuleApi` object to manage rule settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldsChange", - "value": "ApplyMetafieldsChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface OrderRoutingRuleApi\n extends StandardRenderingExtensionApi {\n /** Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration. */\n applyMetafieldsChange: ApplyMetafieldsChange;\n /** The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields). */\n data: Data;\n}" - }, - "ApplyMetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "ApplyMetafieldsChange", - "description": "A function that applies metafield changes to order routing rule settings. Call this function with one or more change operations to update or remove metafields in batch. Use batch operations to apply multiple configuration changes efficiently.", - "isPublicDocs": true, - "params": [ - { - "name": "changes", - "description": "", - "value": "MetafieldsChange[]", - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(changes: MetafieldsChange[]) => void" - }, - "MetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldsChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]", - "description": "One or more metafield change operations to apply to order routing rule settings. Can be a single change or an array of changes for batch operations. Use arrays to apply multiple changes at once.", - "isPublicDocs": true - }, - "ValidationSettingsApi": { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "name": "ValidationSettingsApi", - "description": "The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "ValidationData", - "description": "The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ValidationSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: ValidationData;\n}" - }, - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - } - } - } - ], - "examples": { - "description": "Configure product variant-level bundles", - "examples": [ - { - "description": "Query the parent product ID then launch the variant creation workflow. This example fetches the parent product using GraphQL, passes it as context data to the variant intent, and shows success feedback.", - "codeblock": { - "title": "Create component variant", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useEffect} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [created, setCreated] = useState(null);\n const [productId, setProductId] = useState(null);\n\n useEffect(() => {\n const getParentProduct = async () => {\n const variantId = data.selected[0]?.id;\n\n const {data: parentData} = await shopify.query(\n `query GetParentProduct($id: ID!) {\n productVariant(id: $id) {\n product {\n id\n }\n }\n }`,\n {variables: {id: variantId}},\n );\n\n setProductId(parentData.productVariant.product.id);\n };\n\n getParentProduct();\n }, [data]);\n\n const handleCreate = async () => {\n const activity = await shopify.intents.invoke('create:shopify/ProductVariant', {\n data: {productId},\n });\n\n const response = await activity.complete;\n\n if (response.code === 'ok') {\n setCreated(true);\n }\n };\n\n return (\n <s-admin-block heading=\"Add Variant Component\">\n {productId && (\n <>\n <s-button onClick={handleCreate}>Create Component Variant</s-button>\n {created && <s-banner status=\"success\">Component variant created</s-banner>}\n </>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Fetch variant bundle data including SKU and display name from metafields. This example queries variant-specific details, parses the component configuration, and displays variant information in the UI.", - "codeblock": { - "title": "Load variant bundle configuration", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useEffect} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [components, setComponents] = useState([]);\n const [variantInfo, setVariantInfo] = useState(null);\n\n useEffect(() => {\n const loadConfig = async () => {\n const variantId = data.selected[0]?.id;\n\n const {data: variantData} = await shopify.query(\n `query GetVariantBundleComponents($id: ID!) {\n productVariant(id: $id) {\n id\n displayName\n sku\n metafield(namespace: \"bundle\", key: \"variant_components\") {\n value\n }\n }\n }`,\n {variables: {id: variantId}},\n );\n\n setVariantInfo(variantData.productVariant);\n \n const comps = variantData.productVariant.metafield\n ? JSON.parse(variantData.productVariant.metafield.value)\n : [];\n\n setComponents(comps);\n };\n\n loadConfig();\n }, [data]);\n\n return (\n <s-admin-block heading=\"Variant Bundle\">\n {variantInfo && (\n <>\n <s-text>{variantInfo.displayName}</s-text>\n <s-text>SKU: {variantInfo.sku}</s-text>\n <s-text>{components.length} variant components configured</s-text>\n </>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Contextual APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Store configuration keyed by variant GID:** Save bundle relationships in metafields on the variant or in your app database using the variant GID as the key for precise variant-level configuration.\n- **Use `type: \"variant\"` in Resource Picker for precision:** When selecting component variants, use `type: \"variant\"` in the [Resource Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) for precise variant selection rather than product-level selection.\n- **Implement cart transforms to enforce bundles:** Configuration only defines relationships. Use Shopify Functions [cart transforms](/docs/api/functions/latest/cart-transform) to enforce variant-level bundling at checkout based on saved configuration." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Configuration extensions only render in the admin. They don't affect storefront or checkout behavior. You must implement separate logic for storefront bundle display and checkout enforcement.\n- Bundles aren't enforced automatically. Configuration doesn't automatically create bundles. You must implement [cart transforms](/docs/api/functions/latest/cart-transform) to enforce bundling when variants are added to cart.\n- Your extension can't directly modify variant properties. The API is read-only for variant data. Use GraphQL mutations like [`productVariantsBulkUpdate`](/docs/api/admin-graphql/latest/mutations/productVariantsBulkUpdate) if you need to update variants." - } - ] - }, - { - "name": "Purchase Options Card Configuration API", - "description": "The Purchase Options Card Configuration API provides access to purchase option selection data for products with [subscription](/docs/apps/build/purchase-options/subscriptions) and [selling plan](/docs/apps/build/purchase-options/subscriptions/selling-plans) configurations. Use this API to build action extensions that interact with selected [purchase options](/docs/apps/build/purchase-options) on product and product variant details pages.", - "isVisualComponent": false, - "type": "API", - "requires": "the [admin action](/docs/api/admin-extensions/{API_VERSION}/web-components/settings-and-templates/admin-action) component.", - "defaultExample": { - "description": "Update a subscription by sending product and selling plan IDs to your backend. This example checks for selling plan presence, posts the update request, and shows a success banner before auto-closing the modal.", - "codeblock": { - "title": "Manage a subscription", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [updated, setUpdated] = useState(false);\n\n const {id: productId, sellingPlanId} = data.selected[0];\n\n const handleUpdate = async () => {\n if (!sellingPlanId) {\n console.error('No selling plan selected');\n shopify.close();\n return;\n }\n\n const response = await fetch('/api/subscriptions/update', {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify({\n productId,\n sellingPlanId,\n action: 'modify',\n }),\n });\n\n if (response.ok) {\n setUpdated(true);\n setTimeout(() => shopify.close(), 1500);\n }\n };\n\n return (\n <s-admin-action title=\"Manage Subscription\">\n <s-text>Product: {productId}</s-text>\n <s-text>Selling Plan: {sellingPlanId}</s-text>\n <s-button onClick={handleUpdate}>Update Subscription</s-button>\n {updated && <s-banner status=\"success\">Subscription updated!</s-banner>}\n </s-admin-action>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides access to selected purchase option data. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to interact with currently selected products and selling plans in the `admin.product-purchase-option.action.render` and `admin.product-variant-purchase-option.action.render` targets.", - "type": "PurchaseOptionsCardConfigurationApi", - "typeDefinitions": { - "PurchaseOptionsCardConfigurationApi": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "name": "PurchaseOptionsCardConfigurationApi", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ selected: { id: string; sellingPlanId?: string; }[]; }", - "description": "Selected purchase option data including product and selling plan identifiers." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PurchaseOptionsCardConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends ActionExtensionApi {\n /** Selected purchase option data including product and selling plan identifiers. */\n data: {\n /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */\n selected: {\n /** The product or variant identifier. */\n id: string;\n /** The associated selling plan identifier, if a subscription option is selected. */\n sellingPlanId?: string;\n }[];\n };\n}" - }, - "Auth": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "Auth", - "description": "The `Auth` object provides authentication methods for secure communication with your app backend.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "idToken", - "value": "() => Promise", - "description": "Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved." - } - ], - "value": "export interface Auth {\n /**\n * Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved.\n */\n idToken: () => Promise;\n}" - }, - "ExtensionTarget": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionTarget", - "value": "keyof ExtensionTargets", - "description": "A string literal union of all valid extension target identifiers. Use this type to specify where your admin UI extension should render, such as `admin.product-details.block.render` for a block on product details pages or `admin.order-details.action.render` for an action on order details pages. The target determines the extension's location, available APIs, and UI components." - }, - "ExtensionTargets": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "name": "ExtensionTargets", - "description": "Maps extension target identifiers to their corresponding extension types. Each target represents a specific location or context in the Shopify admin where extensions can render or execute. Use these targets to define where your extension appears and what capabilities it has access to.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.app.tools.data", - "value": "RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >", - "description": "A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-location-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customers.segmentation-templates.data", - "value": "RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >", - "description": "A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.function-settings.render", - "value": "RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.configuration.render", - "value": "RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.reorder.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.configuration.render", - "value": "RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.internal-order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.validation.render", - "value": "RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." - } - ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" - }, - "RenderExtension": { - "filePath": "src/extension.ts", - "name": "RenderExtension", - "description": "Defines the structure of a render extension, which displays UI in the Shopify admin.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "components", - "value": "ComponentsSet", - "description": "The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "void | Promise", - "description": "The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads." - } - ], - "value": "export interface RenderExtension {\n /**\n * The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying.\n */\n api: Api;\n /**\n * The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target.\n */\n components: ComponentsSet;\n /**\n * The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads.\n */\n output: void | Promise;\n}" - }, - "ActionExtensionApi": { - "filePath": "src/surfaces/admin/api/action/action.ts", - "name": "ActionExtensionApi", - "description": "The `ActionExtensionApi` object provides methods for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ActionExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner.\n */\n close: () => void;\n\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n}" - }, - "Data": { - "filePath": "src/surfaces/admin/api/shared.ts", - "name": "Data", - "description": "The `Data` object provides access to currently viewed or selected resources in the admin context.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "{ id: string; }[]", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - } - ], - "value": "export interface Data {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n selected: {id: string}[];\n}" - }, - "I18n": { - "filePath": "src/api.ts", - "name": "I18n", - "description": "Internationalization utilities for formatting and translating content according to the user's locale. Use these methods to display numbers, currency, dates, and translated strings that match the merchant's language and regional preferences.", - "members": [ - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatCurrency", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatDate", - "value": "(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string", - "description": "Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatNumber", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "translate", - "value": "I18nTranslate", - "description": "Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components." - } - ], - "value": "export interface I18n {\n /**\n * Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default.\n *\n * @param number - The number to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the number format\n */\n formatNumber: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default.\n *\n * @param number - The currency amount to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the currency format, such as the currency code\n */\n formatCurrency: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style.\n *\n * @param date - The Date object to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.DateTimeFormatOptions for customizing the date format\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n */\n formatDate: (\n date: Date,\n options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,\n ) => string;\n\n /**\n * Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components.\n */\n translate: I18nTranslate;\n}" - }, - "I18nTranslate": { - "filePath": "src/api.ts", - "name": "I18nTranslate", - "description": "The translation function signature for internationalization. Use this to translate string keys defined in your locale files into localized content for the current user's language.", - "members": [], - "value": "export interface I18nTranslate {\n /**\n * Returns a translated string matching a key in a locale file. Use this to display localized text in your extension based on the merchant's language preferences. Supports interpolation with replacement values and pluralization with the `count` option. Returns a string when replacements are primitives, or an array when replacements include UI components.\n *\n * @param key - The translation key from your locale file (for example, \"banner.title\")\n * @param options - Optional replacement values for interpolation or the special `count` property for pluralization\n *\n * @example translate(\"banner.title\")\n * @example translate(\"items.count\", { count: 5 })\n */\n (\n key: string,\n options?: Record,\n ): ReplacementType extends string | number\n ? string\n : (string | ReplacementType)[];\n}" - }, - "Intents": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "Intents", - "description": "The `Intents` object provides methods for launching standardized Shopify workflows to create or edit resources. Intents enable your extension to trigger native admin interfaces for products, customers, discounts, and other resources, then receive the results when merchants complete the workflow.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "invoke", - "value": "IntentInvokeApi", - "description": "Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "launchUrl", - "value": "string | URL", - "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", - "isOptional": true - } - ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" - }, - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - }, - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result." - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - }, - "ApiVersion": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ApiVersion", - "value": "'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04'", - "description": "The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The `unstable` version provides access to the latest features but may change without notice." - }, - "ResourcePickerApi": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerApi", - "description": "Opens the resource picker modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "ResourcePickerOptions", - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "description": "", - "name": "Promise | undefined>", - "value": "Promise | undefined>" - }, - "value": "(\n options: ResourcePickerOptions,\n) => Promise | undefined>" - }, - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - }, - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - }, - "Storage": { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "name": "Storage", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: Keys) => Promise", - "description": "Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "deleteMany", - "value": "(keys: Keys[]) => Promise>", - "description": "Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "entries", - "value": "() => Promise>", - "description": "Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "get", - "value": "(key: Keys) => Promise", - "description": "Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "getMany", - "value": "(keys: Keys[]) => Promise", - "description": "Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "set", - "value": "(key: Keys, value: StorageTypes[Keys]) => Promise", - "description": "Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "setMany", - "value": "(entries: Partial) => Promise", - "description": "Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings." - } - ], - "value": "export interface Storage<\n BaseStorageTypes extends Record = Record,\n> {\n /**\n * Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports.\n *\n * @param key - The key to set the value for. Use descriptive keys to organize your stored data.\n * @param value - The value to set for the key. Can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n set<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n value: StorageTypes[Keys],\n ): Promise;\n\n /**\n * Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings.\n *\n * @param entries - An object containing key-value pairs to store. Values can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n setMany(\n entries: Partial,\n ): Promise;\n\n /**\n * Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type.\n *\n * @param key - The key to get the value for.\n * @returns The value of the key, or `undefined` if no value exists for the key.\n */\n get<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage.\n *\n * @param keys - An array of keys to get the values for.\n * @returns An array containing values for the requested keys, in the same order as the input keys.\n */\n getMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise<(StorageTypes[Keys] | undefined)[]>;\n\n /**\n * Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs.\n */\n clear(): Promise;\n\n /**\n * Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene.\n *\n * @param key - The key to delete.\n * @returns A promise that resolves to `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n delete<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings.\n *\n * @param keys - An array of keys to delete.\n * @returns A promise that resolves to an object mapping each key to a boolean value: `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n deleteMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise>;\n\n /**\n * Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples.\n *\n * @returns A promise that resolves to an iterator containing all key-value pairs in the storage.\n */\n entries<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(): Promise>;\n}" - }, - "ActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/ActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionExtensionComponents", - "value": "StandardComponents | 'AdminAction'", - "description": "The components available for building action extensions. Includes all standard components plus the admin action component required for action extension setup." - }, - "StandardComponents": { - "filePath": "src/surfaces/admin/components/StandardComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "StandardComponents", - "value": "'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField'", - "description": "The standard set of UI components available in most admin extensions. These components provide the building blocks for creating extension interfaces including layout elements, form inputs, data display, navigation, and interactive controls. Use these components to build consistent, accessible UIs that match the Shopify admin design system." - }, - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred." - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - }, - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "OrderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedList", - "description": "Configure the following properties on the ordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OrderedList\n extends PreactCustomElement\n implements OrderedListProps\n{\n constructor();\n}" - }, - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)" - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "Tooltip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Tooltip", - "description": "Configure the following properties on the tooltip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Tooltip extends PreactOverlayElement implements TooltipProps {\n constructor();\n}" - }, - "UnorderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedList", - "description": "Configure the following properties on the unordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class UnorderedList\n extends PreactCustomElement\n implements UnorderedListProps\n{\n constructor();\n}" - }, - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "AdminAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminAction", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text to use as the Action modal's title. If not provided, the name of the extension will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminAction\n extends PreactCustomElement\n implements AdminActionProps\n{\n /**\n * The text to use as the Action modal's title. If not provided, the name of the extension will be used.\n */\n heading: string;\n /**\n * Whether the action is in a loading state, such as during initial page load or when the action is being opened.\n * When `true`, the action might be in an inert state that prevents user interaction.\n */\n loading: boolean;\n constructor();\n}" - }, - "RunnableExtension": { - "filePath": "src/extension.ts", - "name": "RunnableExtension", - "description": "Defines the structure of a runnable extension, which executes logic and returns data without rendering UI.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "Output | Promise", - "description": "The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case." - } - ], - "value": "export interface RunnableExtension {\n /**\n * The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension.\n */\n api: Api;\n /**\n * The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case.\n */\n output: Output | Promise;\n}" - }, - "ShouldRenderApi": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderApi", - "description": "The `ShouldRenderApi` object provides methods for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ShouldRenderApi\n extends StandardApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.\n */\n data: Data;\n}" - }, - "ShouldRenderOutput": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderOutput", - "description": "The output returned by `should-render` extensions to control visibility.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "boolean", - "description": "Whether to display the associated action extension. Return `true` to show the action, `false` to hide it." - } - ], - "value": "export interface ShouldRenderOutput {\n /** Whether to display the associated action extension. Return `true` to show the action, `false` to hide it. */\n display: boolean;\n}" - }, - "BlockExtensionApi": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "BlockExtensionApi", - "description": "The `BlockExtensionApi` object provides methods for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface BlockExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n\n /**\n * Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`).\n */\n navigation: Navigation;\n}" - }, - "Navigation": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "Navigation", - "description": "The `Navigation` object provides methods for navigating between extensions and admin pages.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigate", - "value": "(url: string | URL) => void", - "description": "Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "navigation.navigate('extension://my-admin-action-extension-handle')", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface Navigation {\n /**\n * Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.\n *\n * @param url - The destination URL, typically in the format 'extension://extension-handle' for other extensions\n * @example navigation.navigate('extension://my-admin-action-extension-handle')\n */\n navigate: (url: string | URL) => void;\n}" - }, - "BlockExtensionComponents": { - "filePath": "src/surfaces/admin/components/BlockExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BlockExtensionComponents", - "value": "StandardComponents | 'AdminBlock' | 'Form'", - "description": "The components available for building block extensions. Includes all standard components plus the admin block component required for block extension setup and the form component for creating forms." - }, - "AdminBlock": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlock", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminBlock\n extends PreactCustomElement\n implements AdminBlockProps\n{\n /**\n * The text displayed as the block's title in the header. If not provided, the extension name will be used.\n */\n heading: string;\n /**\n * The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.\n */\n collapsedSummary: string;\n constructor();\n}" - }, - "Form": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Form", - "description": "Configure the following properties on the form component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" - }, - "StandardApi": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "StandardApi", - "description": "The `StandardApi` object provides core methods available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface StandardApi {\n /**\n * The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.\n */\n extension: {\n target: ExtensionTarget;\n };\n\n /**\n * Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.\n */\n auth: Auth;\n\n /**\n * Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.\n */\n i18n: I18n;\n\n /**\n * Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.\n */\n intents: Intents;\n\n /**\n * Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension.\n */\n storage: Storage;\n\n /**\n * Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.\n */\n query: (\n query: string,\n options?: {variables?: Variables; version?: Omit},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n}" - }, - "GraphQLError": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "GraphQLError", - "description": "The GraphQL error returned by the [GraphQL Admin API](/docs/api/admin-graphql).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "locations", - "value": "{ line: number; column: string; }", - "description": "The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query." - } - ], - "value": "export interface GraphQLError {\n /**\n * A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query.\n */\n message: string;\n /**\n * The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string.\n */\n locations: {\n /** The line number in the GraphQL query where the error occurred. */\n line: number;\n /** The column position in the GraphQL query where the error occurred. */\n column: string;\n };\n}" - }, - "CustomerSegmentTemplateApi": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplateApi", - "description": "The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "__enabledFeatures", - "value": "string[]", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating template content into the merchant's language." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface CustomerSegmentTemplateApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardApi {\n /** Utilities for translating template content into the merchant's language. */\n i18n: I18n;\n /** @private */\n __enabledFeatures: string[];\n}" - }, - "CustomerSegmentTemplate": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplate", - "description": "Defines a customer segment template that merchants can use to create targeted customer groups.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "createdOn", - "value": "string", - "description": "The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "dependencies", - "value": "{ standardMetafields?: \"facts.birth_date\"[]; customMetafields?: string[]; }", - "description": "Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string | string[]", - "description": "The template description in the merchant's language. Use an array for multiple paragraphs." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "queryToInsert", - "value": "string", - "description": "The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The template title in the merchant's language." - } - ], - "value": "export interface CustomerSegmentTemplate {\n /**\n * The template title in the merchant's language.\n */\n title: string;\n /**\n * The template description in the merchant's language. Use an array for multiple paragraphs.\n */\n description: string | string[];\n /**\n * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n query: string;\n /**\n * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n queryToInsert: string;\n /**\n * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.\n */\n dependencies?: {\n /** Standard Shopify customer metafields used in the query. */\n standardMetafields?: CustomerStandardMetafieldDependency[];\n /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */\n customMetafields?: string[];\n };\n /**\n * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge.\n */\n createdOn: string;\n}" - }, - "DiscountFunctionSettingsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "name": "DiscountFunctionSettingsApi", - "description": "The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DiscountFunctionSettingsData", - "description": "The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "DiscountsApi", - "description": "The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface DiscountFunctionSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends Omit, 'data'> {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: DiscountFunctionSettingsData;\n /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */\n discounts: DiscountsApi;\n}" - }, - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store discount function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your discount configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - }, - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - }, - "DiscountsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountsApi", - "description": "The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountClasses", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountMethod", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "updateDiscountClasses", - "value": "UpdateSignalFunction", - "description": "A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects." - } - ], - "value": "export interface DiscountsApi {\n /**\n * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.\n */\n discountClasses: ReadonlySignalLike;\n /**\n * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.\n */\n updateDiscountClasses: UpdateSignalFunction;\n /**\n * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.\n */\n discountMethod: ReadonlySignalLike;\n}" - }, - "ReadonlySignalLike": { - "filePath": "src/shared.ts", - "name": "ReadonlySignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface ReadonlySignalLike {\n /**\n * The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.\n */\n readonly value: T;\n /**\n * Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.\n */\n subscribe(fn: (value: T) => void): () => void;\n}" - }, - "DiscountClass": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountClass", - "value": "'product' | 'order' | 'shipping'", - "description": "The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).", - "isPublicDocs": true - }, - "DiscountMethod": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountMethod", - "value": "'automatic' | 'code'", - "description": "The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.", - "isPublicDocs": true - }, - "UpdateSignalFunction": { - "filePath": "src/shared.ts", - "name": "UpdateSignalFunction", - "description": "A function that updates a signal and returns a result indicating success or failure. The function is typically used along with a `ReadonlySignalLike` object.", - "params": [ - { - "name": "value", - "description": "", - "value": "T", - "filePath": "src/shared.ts" - } - ], - "returns": { - "filePath": "src/shared.ts", - "description": "", - "name": "Result", - "value": "Result" - }, - "value": "(value: T) => Result" - }, - "Result": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Result", - "value": "{success: true; value: T} | {success: false; errors: ValidationError[]}", - "description": "A result type that indicates the success or failure of an operation." - }, - "ValidationError": { - "filePath": "src/shared.ts", - "name": "ValidationError", - "description": "A validation error object that is returned when an operation fails.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "A code identifier for the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ message: string; path: string[]; }[]", - "description": "Field-level validation issues", - "isOptional": true - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message describing the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "" - } - ], - "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" - }, - "FunctionSettingsComponents": { - "filePath": "src/surfaces/admin/components/FunctionSettingsComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FunctionSettingsComponents", - "value": "FormExtensionComponents | 'FunctionSettings'", - "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." - }, - "FormExtensionComponents": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - }, - "FunctionSettings": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FunctionSettings", - "description": "Configure the following properties on the function settings component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class FunctionSettings\n extends PreactCustomElement\n implements FunctionSettingsProps\n{\n constructor();\n}" - }, - "PrintActionExtensionApi": { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "name": "PrintActionExtensionApi", - "description": "The `PrintActionExtensionApi` object provides methods for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PrintActionExtensionApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products.\n */\n data: Data;\n}" - }, - "PrintActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/PrintActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PrintActionExtensionComponents", - "value": "StandardComponents | 'AdminPrintAction'", - "description": "The components available for building print action extensions. Includes all standard components plus the admin print action component required for print action setup." - }, - "AdminPrintAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintAction", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The `src` URL of the preview and the document to print. If not provided, the preview will show an empty state and the print button will be disabled. HTML, PDFs, and images are supported." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminPrintAction\n extends PreactCustomElement\n implements AdminPrintActionProps\n{\n /**\n * The `src` URL of the preview and the document to print.\n * If not provided, the preview will show an empty state and the print button will be disabled.\n * HTML, PDFs, and images are supported.\n */\n src: string;\n constructor();\n}" - }, - "ProductDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductDetailsConfigurationApi", - "description": "The `ProductDetailsConfigurationApi` object provides methods for configuring product bundles and relationships. Access the following properties on the `ProductDetailsConfigurationApi` object to build product configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product currently being viewed in the admin.\n * @deprecated\n */\n product: Product;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Product": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "Product", - "description": "A product configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "onlineStoreUrl", - "value": "string", - "description": "The URL to view this product on the online store. Use this to create \"View in store\" links.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productCategory", - "value": "string", - "description": "The standardized product category taxonomy. Use this for product classification in search and organization.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productComponents", - "value": "ProductComponent[]", - "description": "An array of component products that make up this bundle. Each component represents a product included in the bundle configuration." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "'ACTIVE' | 'ARCHIVED' | 'DRAFT'", - "description": "The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name shown to merchants and customers." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "The total available inventory summed across all variants and locations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this product has." - } - ], - "value": "export interface Product {\n /** The product's unique global identifier (GID). */\n id: string;\n /** The product's display name shown to merchants and customers. */\n title: string;\n /** The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`). */\n handle: string;\n /** The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished). */\n status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';\n /** The total number of variants this product has. */\n totalVariants: number;\n /** The total available inventory summed across all variants and locations. */\n totalInventory: number;\n /** Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations. */\n hasOnlyDefaultVariant: boolean;\n /** The URL to view this product on the online store. Use this to create \"View in store\" links. */\n onlineStoreUrl?: string;\n /** Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values. */\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n /** The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\"). */\n productType: string;\n /** The standardized product category taxonomy. Use this for product classification in search and organization. */\n productCategory?: string;\n /** An array of component products that make up this bundle. Each component represents a product included in the bundle configuration. */\n productComponents: ProductComponent[];\n}" - }, - "ProductComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductComponent", - "description": "A component product that is part of a bundle. Represents an individual product included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "componentVariantsCount", - "value": "number", - "description": "The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "featuredImage", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "nonComponentVariantsCount", - "value": "number", - "description": "The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productUrl", - "value": "string", - "description": "The admin URL for this component product. Use this to create links to the product's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name. Use this to show which product is included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this component product has. Use this to determine if variant selection is needed for this component." - } - ], - "value": "export interface ProductComponent {\n /** The component product's unique global identifier (GID). */\n id: string;\n /** The product's display name. Use this to show which product is included in the bundle. */\n title: string;\n /** The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n featuredImage?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The total number of variants this component product has. Use this to determine if variant selection is needed for this component. */\n totalVariants: number;\n /** The admin URL for this component product. Use this to create links to the product's details page in the admin. */\n productUrl: string;\n /** The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles. */\n componentVariantsCount: number;\n /** The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations. */\n nonComponentVariantsCount: number;\n}" - }, - "ProductVariantDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantDetailsConfigurationApi", - "description": "The `ProductVariantDetailsConfigurationApi` object provides methods for configuring product variant bundles and relationships. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to build variant configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductVariantDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product variant currently being viewed in the admin.\n * @deprecated\n */\n variant: ProductVariant;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "ProductVariant": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariant", - "description": "A product variant configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string", - "description": "The barcode, UPC, or ISBN number for the variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "string", - "description": "The original price before any discounts or markdowns." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "string", - "description": "The current selling price for this variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantComponents", - "value": "ProductVariantComponent[]", - "description": "An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for inventory tracking." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxCode", - "value": "string", - "description": "The harmonized system (HS) tax code for international shipping and customs." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number", - "description": "The physical weight of the variant as a number." - } - ], - "value": "export interface ProductVariant {\n /** The variant's unique global identifier (GID). */\n id: string;\n /** The Stock Keeping Unit (SKU) identifier for inventory tracking. */\n sku: string;\n /** The barcode, UPC, or ISBN number for the variant. */\n barcode: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The current selling price for this variant. */\n price: string;\n /** The original price before any discounts or markdowns. */\n compareAtPrice: string;\n /** Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout. */\n taxable: boolean;\n /** The harmonized system (HS) tax code for international shipping and customs. */\n taxCode: string;\n /** The physical weight of the variant as a number. */\n weight: number;\n /** The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n /** An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle. */\n productVariantComponents: ProductVariantComponent[];\n}" - }, - "ProductVariantComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantComponent", - "description": "A component variant that is part of a product bundle. Represents an individual product variant included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantUrl", - "value": "string", - "description": "The admin URL for this product variant. Use this to create links to the variant's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for this component variant.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - } - ], - "value": "export interface ProductVariantComponent {\n /** The component variant's unique global identifier (GID). */\n id: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** The Stock Keeping Unit (SKU) identifier for this component variant. */\n sku?: string;\n /** The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n image?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The admin URL for this product variant. Use this to create links to the variant's details page in the admin. */\n productVariantUrl: string;\n /** The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n}" - }, - "OrderRoutingRuleApi": { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "name": "OrderRoutingRuleApi", - "description": "The `OrderRoutingRuleApi` object provides methods for configuring order routing rules. Access the following properties on the `OrderRoutingRuleApi` object to manage rule settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldsChange", - "value": "ApplyMetafieldsChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface OrderRoutingRuleApi\n extends StandardRenderingExtensionApi {\n /** Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration. */\n applyMetafieldsChange: ApplyMetafieldsChange;\n /** The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields). */\n data: Data;\n}" - }, - "ApplyMetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "ApplyMetafieldsChange", - "description": "A function that applies metafield changes to order routing rule settings. Call this function with one or more change operations to update or remove metafields in batch. Use batch operations to apply multiple configuration changes efficiently.", - "isPublicDocs": true, - "params": [ - { - "name": "changes", - "description": "", - "value": "MetafieldsChange[]", - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(changes: MetafieldsChange[]) => void" - }, - "MetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldsChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]", - "description": "One or more metafield change operations to apply to order routing rule settings. Can be a single change or an array of changes for batch operations. Use arrays to apply multiple changes at once.", - "isPublicDocs": true - }, - "ValidationSettingsApi": { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "name": "ValidationSettingsApi", - "description": "The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "ValidationData", - "description": "The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ValidationSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: ValidationData;\n}" - }, - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - } - } - } - ], - "examples": { - "description": "Work with purchase options and selling plans", - "examples": [ - { - "description": "Show a confirmation dialog before removing a product from a selling plan. This example demonstrates two-step confirmation with cancel option and success feedback after removal.", - "codeblock": { - "title": "Remove from selling plan", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [confirming, setConfirming] = useState(false);\n const [removed, setRemoved] = useState(false);\n\n const {id: productId, sellingPlanId} = data.selected[0];\n\n const handleRemove = async () => {\n setConfirming(false);\n \n await fetch('/api/selling-plans/remove-product', {\n method: 'POST',\n headers: {'Content-Type': 'application/json'},\n body: JSON.stringify({productId, sellingPlanId}),\n });\n\n setRemoved(true);\n setTimeout(() => shopify.close(), 1500);\n };\n\n return (\n <s-admin-action title=\"Remove from Selling Plan\">\n {!confirming ? (\n <s-button onClick={() => setConfirming(true)}>\n Remove Product\n </s-button>\n ) : (\n <>\n <s-text>Are you sure you want to remove this product?</s-text>\n <s-button onClick={handleRemove}>Confirm Remove</s-button>\n <s-button onClick={() => setConfirming(false)}>Cancel</s-button>\n </>\n )}\n {removed && <s-banner status=\"success\">Product removed from plan</s-banner>}\n </s-admin-action>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Fetch selling plan name and options using the [GraphQL Admin API](/docs/api/admin-graphql) to validate the configuration. This example queries plan details, stores them in state, displays the information, and auto-closes after two seconds.", - "codeblock": { - "title": "Validate selling plan", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const {data} = shopify;\n const [plan, setPlan] = useState(null);\n\n const {sellingPlanId} = data.selected[0];\n\n const handleValidate = async () => {\n const {data: planData} = await shopify.query(\n `query GetSellingPlan($id: ID!) {\n sellingPlanGroup(id: $id) {\n sellingPlans(first: 1) {\n edges {\n node {\n id\n name\n options\n }\n }\n }\n }\n }`,\n {variables: {id: sellingPlanId}},\n );\n\n setPlan(planData.sellingPlanGroup.sellingPlans.edges[0]?.node);\n setTimeout(() => shopify.close(), 2000);\n };\n\n return (\n <s-admin-action title=\"Validate Selling Plan\">\n <s-button onClick={handleValidate}>Check Plan Details</s-button>\n {plan && (\n <>\n <s-text>Plan: {plan.name}</s-text>\n <s-text>Options: {plan.options.length}</s-text>\n </>\n )}\n </s-admin-action>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Contextual APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Handle operations based on selling plan selection:** Items in `api.data.selected` have an optional `sellingPlanId` property. When present, perform subscription-specific operations. When absent, treat it as a one-time purchase." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- The action only appears when selling plan groups exist on the product or variant. The action is hidden for products without subscription options, even if your extension is installed.\n- Items in `api.data.selected` have an optional `sellingPlanId` property. When present, the merchant selected a specific selling plan. When absent, they selected the product/variant without a specific plan.\n- Your extension can't modify selling plan configurations. The API is read-only for selling plan data. Use GraphQL mutations to update selling plans if needed.\n- Selection data only includes IDs. You must query GraphQL for full product, variant, and selling plan details like billing policy and pricing adjustments. Selling plan group data is also unavailable. Your extension only receives individual selling plan IDs but not the parent selling plan group structure." - } - ] - }, - { - "name": "Resource Picker API", - "overviewPreviewDescription": "Opens a Resource Picker in your app", - "description": "The Resource Picker API lets merchants search for and select products, collections, or product variants. Use this API when your extension needs merchants to choose Shopify resources to work with. The resource picker returns detailed resource information including IDs, titles, images, and metadata.\n\n> Tip:\n> If you need to pick app-specific resources like product reviews, email templates, or subscription options, use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) instead.\n", - "isVisualComponent": true, - "category": "Target APIs", - "subCategory": "Utility APIs", - "thumbnail": "resource-picker.png", - "requires": "an admin UI [block, action, or print](/docs/api/admin-extensions/{API_VERSION}#building-your-extension) extension.", - "defaultExample": { - "description": "Open the product resource picker to select items from the store catalog. This example invokes `shopify.resourcePicker` with `type: \"product\"`, handles the async selection, and displays the count of selected products. When merchants confirm their selection, the resource picker returns an array of product objects with GIDs, titles, and handles for use in your extension.", - "image": "resource-picker.png", - "codeblock": { - "title": "Select products", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [selected, setSelected] = useState(null);\n\n const handlePick = async () => {\n const result = await shopify.resourcePicker({type: 'product'});\n setSelected(result);\n };\n\n return (\n <s-admin-block heading=\"Resource Picker\">\n <s-button onClick={handlePick}>Select Products</s-button>\n {selected && <s-text>{selected.length} products selected</s-text>}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "examples": { - "description": "Examples that demonstrate how to use the Resource Picker API.", - "examples": [ - { - "description": "Filter the picker to show only published products using the `filter` option with `published_status: \"published\"`. This example shows restricting the picker to live, customer-visible products. Use this for promotional campaigns, product recommendations, or any feature that should only work with active inventory, preventing accidental selection of draft or archived products.", - "codeblock": { - "title": "Filter to published products", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [selected, setSelected] = useState(null);\n\n const handlePick = async () => {\n const result = await shopify.resourcePicker({\n type: 'product',\n filter: {\n published_status: 'published',\n },\n });\n setSelected(result);\n };\n\n return (\n <s-admin-block heading=\"Resource Picker\">\n <s-button onClick={handlePick}>Select Published Products</s-button>\n {selected && <s-text>{selected.length} products selected</s-text>}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Limit selection to a maximum of five products by setting `multiple: 5`. This example shows restricting how many products merchants can choose. This is useful for bundle builders with item limits, featured product sections with fixed display slots, or promotional campaigns with maximum product counts. The resource picker automatically prevents selection beyond the limit.", - "codeblock": { - "title": "Limit selection count", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [selected, setSelected] = useState(null);\n\n const handlePick = async () => {\n const result = await shopify.resourcePicker({\n type: 'product',\n multiple: 5,\n });\n setSelected(result);\n };\n\n return (\n <s-admin-block heading=\"Resource Picker\">\n <s-button onClick={handlePick}>Select Products</s-button>\n {selected && <s-text>{selected.length} products selected</s-text>}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Open the resource picker with products already selected by passing GIDs to the `selectionIds` option. This example shows pre-populating the resource picker with current selections for edit workflows. Use this for showing what products are already in a bundle, collection, or promotional set. Merchants can see current selections and modify them by adding or removing products before confirming.", - "codeblock": { - "title": "Preselect products", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [selected, setSelected] = useState(null);\n\n const handlePick = async () => {\n const result = await shopify.resourcePicker({\n type: 'product',\n selectionIds: [\n 'gid://shopify/Product/123',\n 'gid://shopify/Product/456',\n ],\n });\n setSelected(result);\n };\n\n return (\n <s-admin-block heading=\"Resource Picker\">\n <s-button onClick={handlePick}>Select Products</s-button>\n {selected && <s-text>{selected.length} products selected</s-text>}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Select collections instead of individual products by setting `type: \"collection\"`. This example shows switching the resource picker to collection mode for choosing product groupings. This is useful for homepage featured collection carousels, navigation menu builders, bulk collection operations, or promotional campaigns targeting entire product categories rather than individual items.", - "codeblock": { - "title": "Select collections", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [selected, setSelected] = useState(null);\n\n const handlePick = async () => {\n const result = await shopify.resourcePicker({type: 'collection'});\n setSelected(result);\n };\n\n return (\n <s-admin-block heading=\"Resource Picker\">\n <s-button onClick={handlePick}>Select Collections</s-button>\n {selected && <s-text>{selected.length} collections selected</s-text>}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Allow unlimited product selection by setting `multiple: true` without a numeric limit. This example shows enabling flexible multi-selection where merchants control the quantity. Use this for mass product taggers, bulk inventory tools, category managers, or export utilities where selection count depends on merchant needs without artificial constraints.", - "codeblock": { - "title": "Select unlimited products", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [selected, setSelected] = useState(null);\n\n const handlePick = async () => {\n const result = await shopify.resourcePicker({\n type: 'product',\n multiple: true,\n });\n setSelected(result);\n };\n\n return (\n <s-admin-block heading=\"Resource Picker\">\n <s-button onClick={handlePick}>Select Products</s-button>\n {selected && <s-text>{selected.length} products selected</s-text>}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Select specific product variants instead of entire products by setting `type: \"variant\"`. This example shows switching to variant-level selection for choosing individual SKUs. Use this for inventory transfer tools, variant-specific promotions, wholesale pricing sheets, or shipment builders where you need granular control over size, color, and individual SKU tracking.", - "codeblock": { - "title": "Select product variants", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [selected, setSelected] = useState(null);\n\n const handlePick = async () => {\n const result = await shopify.resourcePicker({type: 'variant'});\n setSelected(result);\n };\n\n return (\n <s-admin-block heading=\"Resource Picker\">\n <s-button onClick={handlePick}>Select Variants</s-button>\n {selected && <s-text>{selected.length} variants selected</s-text>}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Customize the resource picker button text by setting the `action` option to \"add\" or \"select\". This example shows changing the action verb to provide workflow context. \"Add\" suggests appending to an existing list, while \"select\" implies choosing for a specific purpose or replacing selections. This subtle language difference improves clarity for different workflow contexts.", - "codeblock": { - "title": "Set action verb", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [selected, setSelected] = useState(null);\n\n const handlePick = async () => {\n const result = await shopify.resourcePicker({\n type: 'product',\n action: 'add',\n });\n setSelected(result);\n };\n\n return (\n <s-admin-block heading=\"Resource Picker\">\n <s-button onClick={handlePick}>Select Products</s-button>\n {selected && <s-text>{selected.length} products selected</s-text>}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Start the resource picker with a pre-filled search query by passing the `query` option. This example shows initializing the picker with a search term already entered. This is helpful when you know what merchants are likely looking for, such as products from a specific vendor, tag, or product type. Merchants can modify the query, but starting with relevant results saves time in large catalogs.", - "codeblock": { - "title": "Start with search query", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [selected, setSelected] = useState(null);\n\n const handlePick = async () => {\n const result = await shopify.resourcePicker({\n type: 'product',\n query: 'shirt',\n });\n setSelected(result);\n };\n\n return (\n <s-admin-block heading=\"Resource Picker\">\n <s-button onClick={handlePick}>Select Products</s-button>\n {selected && <s-text>{selected.length} products selected</s-text>}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "definitions": [ - { - "title": "Properties", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "type": "ResourcePickerOptions", - "typeDefinitions": { - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.", - "isOptional": true - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`).", - "isOptional": true - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - } - } - }, - { - "title": "ResourcePicker return payload", - "description": "The resource picker returns an array of selected resources when the merchant confirms their selection, or `undefined` if they cancel. The resource structure in the array varies based on the `type` option: products include variants and images, collections include rule sets, and variants include pricing and inventory data.", - "type": "SelectPayload", - "typeDefinitions": { - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - } - } - } - ], - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Filter query runs server-side:** The `query` property in filters isn't visible to merchants and runs as a GraphQL search query. Use it to programmatically restrict results (for example, `vendor:Acme`) without exposing the filter logic.\n- **Handle undefined return on cancellation:** When merchants close the picker without selecting, it returns `undefined` rather than an empty array. Check for `undefined` explicitly." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Only products, variants, and collections are supported. Other resource types like customers, orders, or locations can't be selected. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) for custom resources.\n- Product selection with `multiple: false` doesn't prevent multi-variant selection from the same product. Merchants can select multiple variants from a single product even when `multiple: false`.\n- Filter options are limited to predefined fields (`hidden`, `variants`, `draft`, `archived`, `query`). Custom filter criteria beyond these aren't supported.\n- Returned data structure varies by resource type. Products include a `variants` array, variants include `price` and `inventoryQuantity`, and collections include `ruleSet`." - } - ] - }, - { - "name": "Should Render API", - "description": "The Should Render API lets you [conditionally show or hide admin action extensions](/docs/apps/build/admin/actions-blocks/hide-extensions) dynamically. Use this API to control action visibility based on resource state, user permissions, or business logic.", - "isVisualComponent": false, - "type": "API", - "defaultExample": { - "description": "Return `true` to show the action extension only when items are selected. This simple check prevents the action extension from appearing on empty pages or when no resources are chosen.", - "codeblock": { - "title": "Check when items are selected", - "tabs": [ - { - "title": "jsx", - "code": "export default () => {\n const {data} = shopify;\n\n const hasSelection = data.selected.length > 0;\n\n return {display: hasSelection};\n};\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `ShouldRenderApi` object provides properties for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "type": "ShouldRenderApi", - "typeDefinitions": { - "ShouldRenderApi": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderApi", - "description": "The `ShouldRenderApi` object provides methods for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ShouldRenderApi\n extends StandardApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.\n */\n data: Data;\n}" - }, - "Auth": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "Auth", - "description": "The `Auth` object provides authentication methods for secure communication with your app backend.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "idToken", - "value": "() => Promise", - "description": "Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved." - } - ], - "value": "export interface Auth {\n /**\n * Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved.\n */\n idToken: () => Promise;\n}" - }, - "Data": { - "filePath": "src/surfaces/admin/api/shared.ts", - "name": "Data", - "description": "The `Data` object provides access to currently viewed or selected resources in the admin context.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "{ id: string; }[]", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - } - ], - "value": "export interface Data {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n selected: {id: string}[];\n}" - }, - "ExtensionTarget": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionTarget", - "value": "keyof ExtensionTargets", - "description": "A string literal union of all valid extension target identifiers. Use this type to specify where your admin UI extension should render, such as `admin.product-details.block.render` for a block on product details pages or `admin.order-details.action.render` for an action on order details pages. The target determines the extension's location, available APIs, and UI components." - }, - "ExtensionTargets": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "name": "ExtensionTargets", - "description": "Maps extension target identifiers to their corresponding extension types. Each target represents a specific location or context in the Shopify admin where extensions can render or execute. Use these targets to define where your extension appears and what capabilities it has access to.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.app.tools.data", - "value": "RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >", - "description": "A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-location-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customers.segmentation-templates.data", - "value": "RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >", - "description": "A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.function-settings.render", - "value": "RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.configuration.render", - "value": "RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.reorder.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.configuration.render", - "value": "RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.internal-order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.validation.render", - "value": "RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." - } - ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" - }, - "RenderExtension": { - "filePath": "src/extension.ts", - "name": "RenderExtension", - "description": "Defines the structure of a render extension, which displays UI in the Shopify admin.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "components", - "value": "ComponentsSet", - "description": "The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "void | Promise", - "description": "The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads." - } - ], - "value": "export interface RenderExtension {\n /**\n * The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying.\n */\n api: Api;\n /**\n * The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target.\n */\n components: ComponentsSet;\n /**\n * The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads.\n */\n output: void | Promise;\n}" - }, - "ActionExtensionApi": { - "filePath": "src/surfaces/admin/api/action/action.ts", - "name": "ActionExtensionApi", - "description": "The `ActionExtensionApi` object provides methods for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ActionExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner.\n */\n close: () => void;\n\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n}" - }, - "I18n": { - "filePath": "src/api.ts", - "name": "I18n", - "description": "Internationalization utilities for formatting and translating content according to the user's locale. Use these methods to display numbers, currency, dates, and translated strings that match the merchant's language and regional preferences.", - "members": [ - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatCurrency", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatDate", - "value": "(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string", - "description": "Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatNumber", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "translate", - "value": "I18nTranslate", - "description": "Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components." - } - ], - "value": "export interface I18n {\n /**\n * Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default.\n *\n * @param number - The number to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the number format\n */\n formatNumber: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default.\n *\n * @param number - The currency amount to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the currency format, such as the currency code\n */\n formatCurrency: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style.\n *\n * @param date - The Date object to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.DateTimeFormatOptions for customizing the date format\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n */\n formatDate: (\n date: Date,\n options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,\n ) => string;\n\n /**\n * Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components.\n */\n translate: I18nTranslate;\n}" - }, - "I18nTranslate": { - "filePath": "src/api.ts", - "name": "I18nTranslate", - "description": "The translation function signature for internationalization. Use this to translate string keys defined in your locale files into localized content for the current user's language.", - "members": [], - "value": "export interface I18nTranslate {\n /**\n * Returns a translated string matching a key in a locale file. Use this to display localized text in your extension based on the merchant's language preferences. Supports interpolation with replacement values and pluralization with the `count` option. Returns a string when replacements are primitives, or an array when replacements include UI components.\n *\n * @param key - The translation key from your locale file (for example, \"banner.title\")\n * @param options - Optional replacement values for interpolation or the special `count` property for pluralization\n *\n * @example translate(\"banner.title\")\n * @example translate(\"items.count\", { count: 5 })\n */\n (\n key: string,\n options?: Record,\n ): ReplacementType extends string | number\n ? string\n : (string | ReplacementType)[];\n}" - }, - "Intents": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "Intents", - "description": "The `Intents` object provides methods for launching standardized Shopify workflows to create or edit resources. Intents enable your extension to trigger native admin interfaces for products, customers, discounts, and other resources, then receive the results when merchants complete the workflow.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "invoke", - "value": "IntentInvokeApi", - "description": "Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "launchUrl", - "value": "string | URL", - "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", - "isOptional": true - } - ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" - }, - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - }, - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result." - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - }, - "ApiVersion": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ApiVersion", - "value": "'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04'", - "description": "The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The `unstable` version provides access to the latest features but may change without notice." - }, - "ResourcePickerApi": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerApi", - "description": "Opens the resource picker modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "ResourcePickerOptions", - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "description": "", - "name": "Promise | undefined>", - "value": "Promise | undefined>" - }, - "value": "(\n options: ResourcePickerOptions,\n) => Promise | undefined>" - }, - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - }, - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - }, - "Storage": { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "name": "Storage", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: Keys) => Promise", - "description": "Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "deleteMany", - "value": "(keys: Keys[]) => Promise>", - "description": "Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "entries", - "value": "() => Promise>", - "description": "Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "get", - "value": "(key: Keys) => Promise", - "description": "Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "getMany", - "value": "(keys: Keys[]) => Promise", - "description": "Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "set", - "value": "(key: Keys, value: StorageTypes[Keys]) => Promise", - "description": "Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "setMany", - "value": "(entries: Partial) => Promise", - "description": "Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings." - } - ], - "value": "export interface Storage<\n BaseStorageTypes extends Record = Record,\n> {\n /**\n * Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports.\n *\n * @param key - The key to set the value for. Use descriptive keys to organize your stored data.\n * @param value - The value to set for the key. Can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n set<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n value: StorageTypes[Keys],\n ): Promise;\n\n /**\n * Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings.\n *\n * @param entries - An object containing key-value pairs to store. Values can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n setMany(\n entries: Partial,\n ): Promise;\n\n /**\n * Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type.\n *\n * @param key - The key to get the value for.\n * @returns The value of the key, or `undefined` if no value exists for the key.\n */\n get<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage.\n *\n * @param keys - An array of keys to get the values for.\n * @returns An array containing values for the requested keys, in the same order as the input keys.\n */\n getMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise<(StorageTypes[Keys] | undefined)[]>;\n\n /**\n * Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs.\n */\n clear(): Promise;\n\n /**\n * Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene.\n *\n * @param key - The key to delete.\n * @returns A promise that resolves to `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n delete<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings.\n *\n * @param keys - An array of keys to delete.\n * @returns A promise that resolves to an object mapping each key to a boolean value: `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n deleteMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise>;\n\n /**\n * Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples.\n *\n * @returns A promise that resolves to an iterator containing all key-value pairs in the storage.\n */\n entries<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(): Promise>;\n}" - }, - "ActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/ActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionExtensionComponents", - "value": "StandardComponents | 'AdminAction'", - "description": "The components available for building action extensions. Includes all standard components plus the admin action component required for action extension setup." - }, - "StandardComponents": { - "filePath": "src/surfaces/admin/components/StandardComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "StandardComponents", - "value": "'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField'", - "description": "The standard set of UI components available in most admin extensions. These components provide the building blocks for creating extension interfaces including layout elements, form inputs, data display, navigation, and interactive controls. Use these components to build consistent, accessible UIs that match the Shopify admin design system." - }, - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred." - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - }, - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "OrderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedList", - "description": "Configure the following properties on the ordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OrderedList\n extends PreactCustomElement\n implements OrderedListProps\n{\n constructor();\n}" - }, - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)" - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "Tooltip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Tooltip", - "description": "Configure the following properties on the tooltip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Tooltip extends PreactOverlayElement implements TooltipProps {\n constructor();\n}" - }, - "UnorderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedList", - "description": "Configure the following properties on the unordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class UnorderedList\n extends PreactCustomElement\n implements UnorderedListProps\n{\n constructor();\n}" - }, - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "AdminAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminAction", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text to use as the Action modal's title. If not provided, the name of the extension will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminAction\n extends PreactCustomElement\n implements AdminActionProps\n{\n /**\n * The text to use as the Action modal's title. If not provided, the name of the extension will be used.\n */\n heading: string;\n /**\n * Whether the action is in a loading state, such as during initial page load or when the action is being opened.\n * When `true`, the action might be in an inert state that prevents user interaction.\n */\n loading: boolean;\n constructor();\n}" - }, - "RunnableExtension": { - "filePath": "src/extension.ts", - "name": "RunnableExtension", - "description": "Defines the structure of a runnable extension, which executes logic and returns data without rendering UI.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "Output | Promise", - "description": "The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case." - } - ], - "value": "export interface RunnableExtension {\n /**\n * The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension.\n */\n api: Api;\n /**\n * The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case.\n */\n output: Output | Promise;\n}" - }, - "ShouldRenderOutput": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderOutput", - "description": "The output returned by `should-render` extensions to control visibility.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "boolean", - "description": "Whether to display the associated action extension. Return `true` to show the action, `false` to hide it." - } - ], - "value": "export interface ShouldRenderOutput {\n /** Whether to display the associated action extension. Return `true` to show the action, `false` to hide it. */\n display: boolean;\n}" - }, - "BlockExtensionApi": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "BlockExtensionApi", - "description": "The `BlockExtensionApi` object provides methods for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface BlockExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n\n /**\n * Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`).\n */\n navigation: Navigation;\n}" - }, - "Navigation": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "Navigation", - "description": "The `Navigation` object provides methods for navigating between extensions and admin pages.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigate", - "value": "(url: string | URL) => void", - "description": "Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "navigation.navigate('extension://my-admin-action-extension-handle')", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface Navigation {\n /**\n * Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.\n *\n * @param url - The destination URL, typically in the format 'extension://extension-handle' for other extensions\n * @example navigation.navigate('extension://my-admin-action-extension-handle')\n */\n navigate: (url: string | URL) => void;\n}" - }, - "BlockExtensionComponents": { - "filePath": "src/surfaces/admin/components/BlockExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BlockExtensionComponents", - "value": "StandardComponents | 'AdminBlock' | 'Form'", - "description": "The components available for building block extensions. Includes all standard components plus the admin block component required for block extension setup and the form component for creating forms." - }, - "AdminBlock": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlock", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminBlock\n extends PreactCustomElement\n implements AdminBlockProps\n{\n /**\n * The text displayed as the block's title in the header. If not provided, the extension name will be used.\n */\n heading: string;\n /**\n * The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.\n */\n collapsedSummary: string;\n constructor();\n}" - }, - "Form": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Form", - "description": "Configure the following properties on the form component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" - }, - "StandardApi": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "StandardApi", - "description": "The `StandardApi` object provides core methods available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface StandardApi {\n /**\n * The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.\n */\n extension: {\n target: ExtensionTarget;\n };\n\n /**\n * Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.\n */\n auth: Auth;\n\n /**\n * Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.\n */\n i18n: I18n;\n\n /**\n * Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.\n */\n intents: Intents;\n\n /**\n * Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension.\n */\n storage: Storage;\n\n /**\n * Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.\n */\n query: (\n query: string,\n options?: {variables?: Variables; version?: Omit},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n}" - }, - "GraphQLError": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "GraphQLError", - "description": "The GraphQL error returned by the [GraphQL Admin API](/docs/api/admin-graphql).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "locations", - "value": "{ line: number; column: string; }", - "description": "The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query." - } - ], - "value": "export interface GraphQLError {\n /**\n * A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query.\n */\n message: string;\n /**\n * The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string.\n */\n locations: {\n /** The line number in the GraphQL query where the error occurred. */\n line: number;\n /** The column position in the GraphQL query where the error occurred. */\n column: string;\n };\n}" - }, - "CustomerSegmentTemplateApi": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplateApi", - "description": "The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "__enabledFeatures", - "value": "string[]", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating template content into the merchant's language." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface CustomerSegmentTemplateApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardApi {\n /** Utilities for translating template content into the merchant's language. */\n i18n: I18n;\n /** @private */\n __enabledFeatures: string[];\n}" - }, - "CustomerSegmentTemplate": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplate", - "description": "Defines a customer segment template that merchants can use to create targeted customer groups.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "createdOn", - "value": "string", - "description": "The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "dependencies", - "value": "{ standardMetafields?: \"facts.birth_date\"[]; customMetafields?: string[]; }", - "description": "Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string | string[]", - "description": "The template description in the merchant's language. Use an array for multiple paragraphs." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "queryToInsert", - "value": "string", - "description": "The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The template title in the merchant's language." - } - ], - "value": "export interface CustomerSegmentTemplate {\n /**\n * The template title in the merchant's language.\n */\n title: string;\n /**\n * The template description in the merchant's language. Use an array for multiple paragraphs.\n */\n description: string | string[];\n /**\n * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n query: string;\n /**\n * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n queryToInsert: string;\n /**\n * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.\n */\n dependencies?: {\n /** Standard Shopify customer metafields used in the query. */\n standardMetafields?: CustomerStandardMetafieldDependency[];\n /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */\n customMetafields?: string[];\n };\n /**\n * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge.\n */\n createdOn: string;\n}" - }, - "DiscountFunctionSettingsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "name": "DiscountFunctionSettingsApi", - "description": "The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DiscountFunctionSettingsData", - "description": "The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "DiscountsApi", - "description": "The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface DiscountFunctionSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends Omit, 'data'> {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: DiscountFunctionSettingsData;\n /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */\n discounts: DiscountsApi;\n}" - }, - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store discount function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your discount configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - }, - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - }, - "DiscountsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountsApi", - "description": "The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountClasses", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountMethod", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "updateDiscountClasses", - "value": "UpdateSignalFunction", - "description": "A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects." - } - ], - "value": "export interface DiscountsApi {\n /**\n * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.\n */\n discountClasses: ReadonlySignalLike;\n /**\n * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.\n */\n updateDiscountClasses: UpdateSignalFunction;\n /**\n * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.\n */\n discountMethod: ReadonlySignalLike;\n}" - }, - "ReadonlySignalLike": { - "filePath": "src/shared.ts", - "name": "ReadonlySignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface ReadonlySignalLike {\n /**\n * The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.\n */\n readonly value: T;\n /**\n * Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.\n */\n subscribe(fn: (value: T) => void): () => void;\n}" - }, - "DiscountClass": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountClass", - "value": "'product' | 'order' | 'shipping'", - "description": "The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).", - "isPublicDocs": true - }, - "DiscountMethod": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountMethod", - "value": "'automatic' | 'code'", - "description": "The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.", - "isPublicDocs": true - }, - "UpdateSignalFunction": { - "filePath": "src/shared.ts", - "name": "UpdateSignalFunction", - "description": "A function that updates a signal and returns a result indicating success or failure. The function is typically used along with a `ReadonlySignalLike` object.", - "params": [ - { - "name": "value", - "description": "", - "value": "T", - "filePath": "src/shared.ts" - } - ], - "returns": { - "filePath": "src/shared.ts", - "description": "", - "name": "Result", - "value": "Result" - }, - "value": "(value: T) => Result" - }, - "Result": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Result", - "value": "{success: true; value: T} | {success: false; errors: ValidationError[]}", - "description": "A result type that indicates the success or failure of an operation." - }, - "ValidationError": { - "filePath": "src/shared.ts", - "name": "ValidationError", - "description": "A validation error object that is returned when an operation fails.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "A code identifier for the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ message: string; path: string[]; }[]", - "description": "Field-level validation issues", - "isOptional": true - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message describing the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "" - } - ], - "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" - }, - "FunctionSettingsComponents": { - "filePath": "src/surfaces/admin/components/FunctionSettingsComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FunctionSettingsComponents", - "value": "FormExtensionComponents | 'FunctionSettings'", - "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." - }, - "FormExtensionComponents": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - }, - "FunctionSettings": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FunctionSettings", - "description": "Configure the following properties on the function settings component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class FunctionSettings\n extends PreactCustomElement\n implements FunctionSettingsProps\n{\n constructor();\n}" - }, - "PrintActionExtensionApi": { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "name": "PrintActionExtensionApi", - "description": "The `PrintActionExtensionApi` object provides methods for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PrintActionExtensionApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products.\n */\n data: Data;\n}" - }, - "PrintActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/PrintActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PrintActionExtensionComponents", - "value": "StandardComponents | 'AdminPrintAction'", - "description": "The components available for building print action extensions. Includes all standard components plus the admin print action component required for print action setup." - }, - "AdminPrintAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintAction", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The `src` URL of the preview and the document to print. If not provided, the preview will show an empty state and the print button will be disabled. HTML, PDFs, and images are supported." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminPrintAction\n extends PreactCustomElement\n implements AdminPrintActionProps\n{\n /**\n * The `src` URL of the preview and the document to print.\n * If not provided, the preview will show an empty state and the print button will be disabled.\n * HTML, PDFs, and images are supported.\n */\n src: string;\n constructor();\n}" - }, - "ProductDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductDetailsConfigurationApi", - "description": "The `ProductDetailsConfigurationApi` object provides methods for configuring product bundles and relationships. Access the following properties on the `ProductDetailsConfigurationApi` object to build product configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product currently being viewed in the admin.\n * @deprecated\n */\n product: Product;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Product": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "Product", - "description": "A product configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "onlineStoreUrl", - "value": "string", - "description": "The URL to view this product on the online store. Use this to create \"View in store\" links.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productCategory", - "value": "string", - "description": "The standardized product category taxonomy. Use this for product classification in search and organization.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productComponents", - "value": "ProductComponent[]", - "description": "An array of component products that make up this bundle. Each component represents a product included in the bundle configuration." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "'ACTIVE' | 'ARCHIVED' | 'DRAFT'", - "description": "The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name shown to merchants and customers." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "The total available inventory summed across all variants and locations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this product has." - } - ], - "value": "export interface Product {\n /** The product's unique global identifier (GID). */\n id: string;\n /** The product's display name shown to merchants and customers. */\n title: string;\n /** The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`). */\n handle: string;\n /** The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished). */\n status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';\n /** The total number of variants this product has. */\n totalVariants: number;\n /** The total available inventory summed across all variants and locations. */\n totalInventory: number;\n /** Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations. */\n hasOnlyDefaultVariant: boolean;\n /** The URL to view this product on the online store. Use this to create \"View in store\" links. */\n onlineStoreUrl?: string;\n /** Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values. */\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n /** The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\"). */\n productType: string;\n /** The standardized product category taxonomy. Use this for product classification in search and organization. */\n productCategory?: string;\n /** An array of component products that make up this bundle. Each component represents a product included in the bundle configuration. */\n productComponents: ProductComponent[];\n}" - }, - "ProductComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductComponent", - "description": "A component product that is part of a bundle. Represents an individual product included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "componentVariantsCount", - "value": "number", - "description": "The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "featuredImage", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "nonComponentVariantsCount", - "value": "number", - "description": "The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productUrl", - "value": "string", - "description": "The admin URL for this component product. Use this to create links to the product's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name. Use this to show which product is included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this component product has. Use this to determine if variant selection is needed for this component." - } - ], - "value": "export interface ProductComponent {\n /** The component product's unique global identifier (GID). */\n id: string;\n /** The product's display name. Use this to show which product is included in the bundle. */\n title: string;\n /** The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n featuredImage?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The total number of variants this component product has. Use this to determine if variant selection is needed for this component. */\n totalVariants: number;\n /** The admin URL for this component product. Use this to create links to the product's details page in the admin. */\n productUrl: string;\n /** The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles. */\n componentVariantsCount: number;\n /** The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations. */\n nonComponentVariantsCount: number;\n}" - }, - "PurchaseOptionsCardConfigurationApi": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "name": "PurchaseOptionsCardConfigurationApi", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ selected: { id: string; sellingPlanId?: string; }[]; }", - "description": "Selected purchase option data including product and selling plan identifiers." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PurchaseOptionsCardConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends ActionExtensionApi {\n /** Selected purchase option data including product and selling plan identifiers. */\n data: {\n /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */\n selected: {\n /** The product or variant identifier. */\n id: string;\n /** The associated selling plan identifier, if a subscription option is selected. */\n sellingPlanId?: string;\n }[];\n };\n}" - }, - "ProductVariantDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantDetailsConfigurationApi", - "description": "The `ProductVariantDetailsConfigurationApi` object provides methods for configuring product variant bundles and relationships. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to build variant configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductVariantDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product variant currently being viewed in the admin.\n * @deprecated\n */\n variant: ProductVariant;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "ProductVariant": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariant", - "description": "A product variant configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string", - "description": "The barcode, UPC, or ISBN number for the variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "string", - "description": "The original price before any discounts or markdowns." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "string", - "description": "The current selling price for this variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantComponents", - "value": "ProductVariantComponent[]", - "description": "An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for inventory tracking." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxCode", - "value": "string", - "description": "The harmonized system (HS) tax code for international shipping and customs." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number", - "description": "The physical weight of the variant as a number." - } - ], - "value": "export interface ProductVariant {\n /** The variant's unique global identifier (GID). */\n id: string;\n /** The Stock Keeping Unit (SKU) identifier for inventory tracking. */\n sku: string;\n /** The barcode, UPC, or ISBN number for the variant. */\n barcode: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The current selling price for this variant. */\n price: string;\n /** The original price before any discounts or markdowns. */\n compareAtPrice: string;\n /** Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout. */\n taxable: boolean;\n /** The harmonized system (HS) tax code for international shipping and customs. */\n taxCode: string;\n /** The physical weight of the variant as a number. */\n weight: number;\n /** The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n /** An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle. */\n productVariantComponents: ProductVariantComponent[];\n}" - }, - "ProductVariantComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantComponent", - "description": "A component variant that is part of a product bundle. Represents an individual product variant included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantUrl", - "value": "string", - "description": "The admin URL for this product variant. Use this to create links to the variant's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for this component variant.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - } - ], - "value": "export interface ProductVariantComponent {\n /** The component variant's unique global identifier (GID). */\n id: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** The Stock Keeping Unit (SKU) identifier for this component variant. */\n sku?: string;\n /** The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n image?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The admin URL for this product variant. Use this to create links to the variant's details page in the admin. */\n productVariantUrl: string;\n /** The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n}" - }, - "OrderRoutingRuleApi": { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "name": "OrderRoutingRuleApi", - "description": "The `OrderRoutingRuleApi` object provides methods for configuring order routing rules. Access the following properties on the `OrderRoutingRuleApi` object to manage rule settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldsChange", - "value": "ApplyMetafieldsChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface OrderRoutingRuleApi\n extends StandardRenderingExtensionApi {\n /** Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration. */\n applyMetafieldsChange: ApplyMetafieldsChange;\n /** The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields). */\n data: Data;\n}" - }, - "ApplyMetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "ApplyMetafieldsChange", - "description": "A function that applies metafield changes to order routing rule settings. Call this function with one or more change operations to update or remove metafields in batch. Use batch operations to apply multiple configuration changes efficiently.", - "isPublicDocs": true, - "params": [ - { - "name": "changes", - "description": "", - "value": "MetafieldsChange[]", - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(changes: MetafieldsChange[]) => void" - }, - "MetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldsChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]", - "description": "One or more metafield change operations to apply to order routing rule settings. Can be a single change or an array of changes for batch operations. Use arrays to apply multiple changes at once.", - "isPublicDocs": true - }, - "ValidationSettingsApi": { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "name": "ValidationSettingsApi", - "description": "The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "ValidationData", - "description": "The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ValidationSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: ValidationData;\n}" - }, - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - } - } - } - ], - "examples": { - "description": "Conditionally show or hide action extensions", - "examples": [ - { - "description": "Check if exactly one item is selected before showing the action extension. This pattern ensures action extensions that operate on individual resources only appear when appropriate.", - "codeblock": { - "title": "Require one item to be selected", - "tabs": [ - { - "title": "jsx", - "code": "export default () => {\n const {data} = shopify;\n\n const selectedCount = data.selected.length;\n\n return {display: selectedCount === 1};\n};\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Validate selection count is between 1 and 50 before showing bulk actions. This example prevents the action extension from appearing when nothing is selected or when too many items would overload the operation.", - "codeblock": { - "title": "Validate selection count", - "tabs": [ - { - "title": "jsx", - "code": "export default () => {\n const {data} = shopify;\n\n const selectedCount = data.selected.length;\n const isWithinLimit = selectedCount > 0 && selectedCount <= 50;\n\n return {display: isWithinLimit};\n};\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Utility APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Keep evaluation under ~50ms:** Slow `shouldRender` functions delay page rendering for all merchants. Profile your logic and optimize for speed." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- The function must return an object with a `display` property. Returning a plain boolean like `true` instead of `{ display: true }` fails.\n- No asynchronous operations are supported. Async functions, promises, fetch calls, and timers won't work.\n- Your extension can't access external data sources. Evaluation is limited to data available in `api.data.selected` and in-memory state.\n- No re-evaluation occurs after initial render. If conditions change after page load, the action visibility doesn't update dynamically." - } - ] - }, - { - "name": "Standard API", - "description": "The Standard API provides core functionality available to all admin UI extension types. Use this API to authenticate with your app backend, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle navigation [intents](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api), and persist data in browser storage.", - "isVisualComponent": false, - "type": "API", - "defaultExample": { - "description": "Retrieve an authentication token and use it to fetch data from your app backend. This example gets the ID token, adds it to request headers, and displays loading states while fetching.", - "codeblock": { - "title": "Authenticate backend requests", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [products, setProducts] = useState([]);\n const [loading, setLoading] = useState(false);\n\n const handleFetch = async () => {\n setLoading(true);\n \n const token = await shopify.auth.idToken();\n\n const response = await fetch('https://my-app.com/api/products', {\n method: 'GET',\n headers: {\n 'Authorization': `Bearer ${token}`,\n 'Content-Type': 'application/json',\n },\n });\n\n const data = await response.json();\n setProducts(data);\n setLoading(false);\n };\n\n return (\n <s-admin-block heading=\"Backend Data\">\n <s-button onClick={handleFetch} disabled={loading}>\n {loading ? 'Loading...' : 'Fetch from Backend'}\n </s-button>\n {products.length > 0 && (\n <s-text>{products.length} products loaded</s-text>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `StandardApi` object provides core properties available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "type": "StandardApi", - "typeDefinitions": { - "StandardApi": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "StandardApi", - "description": "The `StandardApi` object provides core methods available to all extension targets. Access the following properties on the `StandardApi` object to authenticate users, query the [GraphQL Admin API](/docs/api/admin-graphql), translate content, handle intents, and persist data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface StandardApi {\n /**\n * The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context.\n */\n extension: {\n target: ExtensionTarget;\n };\n\n /**\n * Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations.\n */\n auth: Auth;\n\n /**\n * Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience.\n */\n i18n: I18n;\n\n /**\n * Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation.\n */\n intents: Intents;\n\n /**\n * Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension.\n */\n storage: Storage;\n\n /**\n * Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query.\n */\n query: (\n query: string,\n options?: {variables?: Variables; version?: Omit},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n}" - }, - "Auth": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "Auth", - "description": "The `Auth` object provides authentication methods for secure communication with your app backend.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "idToken", - "value": "() => Promise", - "description": "Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved." - } - ], - "value": "export interface Auth {\n /**\n * Retrieves a [Shopify OpenID Connect ID token](/docs/api/app-home/apis/id-token) for the current user. Use this token to authenticate requests to your app backend and verify the user's identity. The token is a signed JWT that contains user information and can be validated using Shopify's public keys. Returns `null` if the token can't be retrieved.\n */\n idToken: () => Promise;\n}" - }, - "ExtensionTarget": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionTarget", - "value": "keyof ExtensionTargets", - "description": "A string literal union of all valid extension target identifiers. Use this type to specify where your admin UI extension should render, such as `admin.product-details.block.render` for a block on product details pages or `admin.order-details.action.render` for an action on order details pages. The target determines the extension's location, available APIs, and UI components." - }, - "ExtensionTargets": { - "filePath": "src/surfaces/admin/extension-targets.ts", - "name": "ExtensionTargets", - "description": "Maps extension target identifiers to their corresponding extension types. Each target represents a specific location or context in the Shopify admin where extensions can render or execute. Use these targets to define where your extension appears and what capabilities it has access to.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.abandoned-checkout-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.app.tools.data", - "value": "RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >", - "description": "A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.catalog-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.collection-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.company-location-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customer-segment-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.customers.segmentation-templates.data", - "value": "RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >", - "description": "A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-details.function-settings.render", - "value": "RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.discount-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.draft-order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.gift-card-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-fulfilled-card.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.order-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.configuration.render", - "value": "RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-details.reorder.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >", - "description": "A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.render", - "value": "RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >", - "description": "A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-index.selection-print-action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.render", - "value": "RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.action.should-render", - "value": "RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >", - "description": "A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.block.render", - "value": "RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >", - "description": "A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-details.configuration.render", - "value": "RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >", - "description": "A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.product-variant-purchase-option.action.render", - "value": "RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >", - "description": "An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.internal-order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.order-routing-rule.render", - "value": "RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters." - }, - { - "filePath": "src/surfaces/admin/extension-targets.ts", - "syntaxKind": "PropertySignature", - "name": "admin.settings.validation.render", - "value": "RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >", - "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." - } - ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" - }, - "RenderExtension": { - "filePath": "src/extension.ts", - "name": "RenderExtension", - "description": "Defines the structure of a render extension, which displays UI in the Shopify admin.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "components", - "value": "ComponentsSet", - "description": "The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "void | Promise", - "description": "The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads." - } - ], - "value": "export interface RenderExtension {\n /**\n * The API object providing access to extension capabilities, data, and methods. The specific API type depends on the extension target and determines what functionality is available to your extension, such as authentication, storage, data access, and GraphQL querying.\n */\n api: Api;\n /**\n * The set of UI components available for rendering your extension. This defines which Polaris components and custom components can be used to build your extension's interface. The available components vary by extension target.\n */\n components: ComponentsSet;\n /**\n * The render function output. Your extension's render function should return void or a Promise that resolves to void. Use this to perform any necessary setup, rendering, or async operations when your extension loads.\n */\n output: void | Promise;\n}" - }, - "ActionExtensionApi": { - "filePath": "src/surfaces/admin/api/action/action.ts", - "name": "ActionExtensionApi", - "description": "The `ActionExtensionApi` object provides methods for action extensions that render in modal overlays. Access the following properties on the `ActionExtensionApi` object to interact with the current context, control the modal, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/action/action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ActionExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner.\n */\n close: () => void;\n\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n}" - }, - "Data": { - "filePath": "src/surfaces/admin/api/shared.ts", - "name": "Data", - "description": "The `Data` object provides access to currently viewed or selected resources in the admin context.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "{ id: string; }[]", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - } - ], - "value": "export interface Data {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n selected: {id: string}[];\n}" - }, - "I18n": { - "filePath": "src/api.ts", - "name": "I18n", - "description": "Internationalization utilities for formatting and translating content according to the user's locale. Use these methods to display numbers, currency, dates, and translated strings that match the merchant's language and regional preferences.", - "members": [ - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatCurrency", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatDate", - "value": "(date: Date, options?: { inExtensionLocale?: boolean; } & DateTimeFormatOptions) => string", - "description": "Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "formatNumber", - "value": "(number: number | bigint, options?: { inExtensionLocale?: boolean; } & NumberFormatOptions) => string", - "description": "Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default." - }, - { - "filePath": "src/api.ts", - "syntaxKind": "PropertySignature", - "name": "translate", - "value": "I18nTranslate", - "description": "Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components." - } - ], - "value": "export interface I18n {\n /**\n * Returns a localized number formatted according to the user's locale. Use this to display numbers like quantities, percentages, or measurements in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `decimal` applied. Uses the current user's locale by default.\n *\n * @param number - The number to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the number format\n */\n formatNumber: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized currency value formatted according to the user's locale and currency conventions. Use this to display prices, totals, or financial amounts in the appropriate format for the merchant's region. This function behaves like the standard `Intl.NumberFormat()` with a style of `currency` applied. Uses the current user's locale by default.\n *\n * @param number - The currency amount to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.NumberFormatOptions for customizing the currency format, such as the currency code\n */\n formatCurrency: (\n number: number | bigint,\n options?: {inExtensionLocale?: boolean} & Intl.NumberFormatOptions,\n ) => string;\n\n /**\n * Returns a localized date value formatted according to the user's locale and date conventions. Use this to display dates and times in the appropriate format for the merchant's region, such as order dates, timestamps, or schedule information. This function behaves like the standard `Intl.DateTimeFormat()` and uses the current user's locale by default. Formatting options can be passed to customize the date display style.\n *\n * @param date - The Date object to format\n * @param options.inExtensionLocale - If true, use the extension's default locale instead of the user's locale\n * @param options - Additional Intl.DateTimeFormatOptions for customizing the date format\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat\n * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat#using_options\n */\n formatDate: (\n date: Date,\n options?: {inExtensionLocale?: boolean} & Intl.DateTimeFormatOptions,\n ) => string;\n\n /**\n * Returns translated content in the user's locale, as supported by the extension. Use this to display localized strings from your extension's locale files. The special `options.count` property enables pluralization. Other option keys and values are treated as replacements for interpolation in your translation strings. Returns a single string when replacements are primitives, or an array when replacements contain UI components.\n */\n translate: I18nTranslate;\n}" - }, - "I18nTranslate": { - "filePath": "src/api.ts", - "name": "I18nTranslate", - "description": "The translation function signature for internationalization. Use this to translate string keys defined in your locale files into localized content for the current user's language.", - "members": [], - "value": "export interface I18nTranslate {\n /**\n * Returns a translated string matching a key in a locale file. Use this to display localized text in your extension based on the merchant's language preferences. Supports interpolation with replacement values and pluralization with the `count` option. Returns a string when replacements are primitives, or an array when replacements include UI components.\n *\n * @param key - The translation key from your locale file (for example, \"banner.title\")\n * @param options - Optional replacement values for interpolation or the special `count` property for pluralization\n *\n * @example translate(\"banner.title\")\n * @example translate(\"items.count\", { count: 5 })\n */\n (\n key: string,\n options?: Record,\n ): ReplacementType extends string | number\n ? string\n : (string | ReplacementType)[];\n}" - }, - "Intents": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "Intents", - "description": "The `Intents` object provides methods for launching standardized Shopify workflows to create or edit resources. Intents enable your extension to trigger native admin interfaces for products, customers, discounts, and other resources, then receive the results when merchants complete the workflow.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "invoke", - "value": "IntentInvokeApi", - "description": "Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "syntaxKind": "PropertySignature", - "name": "launchUrl", - "value": "string | URL", - "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", - "isOptional": true - } - ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" - }, - "IntentInvokeApi": { - "filePath": "src/surfaces/admin/api/intents/intents.ts", - "name": "IntentInvokeApi", - "description": "The [`invoke` method](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/intents-api#invoke-method) in the Intents API launches a Shopify admin workflow for creating or editing resources, such as products, customers, or discounts. It opens a native admin interface, waits for the merchant to complete the workflow, and returns the result including any created or updated resource data.", - "isPublicDocs": true, - "members": [], - "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" - }, - "PickerApi": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerApi", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "PickerOptions", - "filePath": "src/surfaces/admin/api/picker/picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(options: PickerOptions) => Promise" - }, - "PickerOptions": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "Item[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n */\n multiple?: boolean | number;\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: Item[];\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n}" - }, - "Header": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "export interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "Item": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Item", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "PickerBadge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface Item {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out and merchants can't choose them. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: PickerBadge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "PickerBadge": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "PickerBadge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "export interface PickerBadge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished.", - "isPublicDocs": true - }, - "Tone": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues.", - "isPublicDocs": true - }, - "DataPoint": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty.", - "isPublicDocs": true - }, - "Picker": { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "name": "Picker", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/picker/picker.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result." - } - ], - "value": "export interface Picker {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected: Promise;\n}" - }, - "ApiVersion": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ApiVersion", - "value": "'2023-04' | '2023-07' | '2023-10' | '2024-01' | '2024-04' | '2024-07' | '2024-10' | '2025-01' | '2025-04' | 'unstable' | '2025-07' | '2025-10' | '2026-01' | '2026-04'", - "description": "The supported GraphQL Admin API versions. Use this to specify which API version your GraphQL queries should execute against. Each version includes specific features, bug fixes, and breaking changes. The `unstable` version provides access to the latest features but may change without notice." - }, - "ResourcePickerApi": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerApi", - "description": "Opens the resource picker modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel.", - "isPublicDocs": true, - "params": [ - { - "name": "options", - "description": "", - "value": "ResourcePickerOptions", - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "description": "", - "name": "Promise | undefined>", - "value": "Promise | undefined>" - }, - "value": "(\n options: ResourcePickerOptions,\n) => Promise | undefined>" - }, - "ResourcePickerOptions": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items. Access the following properties on the `ResourcePickerOptions` object to configure the resource picker's appearance and functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'product' | 'variant' | 'collection'", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Filters", - "description": "Filter options that control which resources appear in the resource picker. Use filters to restrict the available resources based on publication status, resource type, or custom search criteria.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "BaseResource", - "description": "A resource structure that can optionally include associated variants. Use this type for specifying preselected items in the resource picker when you need to include variant selections.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - }, - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect.", - "isOptional": true - } - ], - "value": "export interface BaseResource extends Resource {\n /** An array of variant resources to preselect along with the main resource. Only applicable when the main resource is a product that has variants you want to preselect. */\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "name": "Resource", - "description": "The base resource structure with a unique identifier.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`)." - } - ], - "value": "export interface Resource {\n /** The resource identifier in GraphQL global ID format (for example, `gid://shopify/Product/123`). */\n id: string;\n}" - }, - "SelectPayload": { - "filePath": "src/surfaces/admin/api/resource-picker/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SelectPayload", - "value": "SelectPayload", - "description": "The payload returned when resources are selected from the picker.", - "isPublicDocs": true - }, - "Storage": { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "name": "Storage", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: Keys) => Promise", - "description": "Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "deleteMany", - "value": "(keys: Keys[]) => Promise>", - "description": "Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "entries", - "value": "() => Promise>", - "description": "Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "get", - "value": "(key: Keys) => Promise", - "description": "Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "getMany", - "value": "(keys: Keys[]) => Promise", - "description": "Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "set", - "value": "(key: Keys, value: StorageTypes[Keys]) => Promise", - "description": "Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports." - }, - { - "filePath": "src/surfaces/admin/api/standard/storage.ts", - "syntaxKind": "MethodSignature", - "name": "setMany", - "value": "(entries: Partial) => Promise", - "description": "Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings." - } - ], - "value": "export interface Storage<\n BaseStorageTypes extends Record = Record,\n> {\n /**\n * Sets the value of a key in the storage. Use this to save individual data items like user preferences, form state, or cached values. The value is serialized using `JSON.stringify`, so it can be any primitive type, object, or array that JSON supports.\n *\n * @param key - The key to set the value for. Use descriptive keys to organize your stored data.\n * @param value - The value to set for the key. Can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n set<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n value: StorageTypes[Keys],\n ): Promise;\n\n /**\n * Sets multiple key-value pairs in the storage at once. Use this for efficient batch operations when you need to save multiple related values together, such as form data or configuration settings.\n *\n * @param entries - An object containing key-value pairs to store. Values can be any primitive type supported by `JSON.stringify`.\n *\n * @throws {StorageExceededError} Rejects with a `StorageExceededError` if the extension exceeds its allotted storage limit.\n */\n setMany(\n entries: Partial,\n ): Promise;\n\n /**\n * Gets the value of a key in the storage. Use this to retrieve previously saved data when your extension loads or when you need to access stored values. The value is automatically deserialized from JSON to its original type.\n *\n * @param key - The key to get the value for.\n * @returns The value of the key, or `undefined` if no value exists for the key.\n */\n get<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Gets the values of multiple keys in the storage at once. Use this to efficiently retrieve related data in a single operation, reducing overhead when loading multiple stored values. The returned array is in the same order as the provided keys, with `undefined` values for keys that don't exist in storage.\n *\n * @param keys - An array of keys to get the values for.\n * @returns An array containing values for the requested keys, in the same order as the input keys.\n */\n getMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise<(StorageTypes[Keys] | undefined)[]>;\n\n /**\n * Clears all data from the storage. Use this to reset your extension's storage, such as when implementing a logout flow, clearing cached data, or resetting to defaults. This operation removes all stored key-value pairs.\n */\n clear(): Promise;\n\n /**\n * Deletes a specific key from the storage. Use this to remove individual data items that are no longer needed, freeing up storage space and maintaining data hygiene.\n *\n * @param key - The key to delete.\n * @returns A promise that resolves to `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n delete<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n key: Keys,\n ): Promise;\n\n /**\n * Deletes multiple keys from the storage at once. Use this to efficiently remove several related data items in a single operation, such as clearing expired cache entries or removing a group of related settings.\n *\n * @param keys - An array of keys to delete.\n * @returns A promise that resolves to an object mapping each key to a boolean value: `true` if the key existed and was deleted, or `false` if the key did not exist.\n */\n deleteMany<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(\n keys: Keys[],\n ): Promise>;\n\n /**\n * Gets all the keys and values in the storage. Use this to iterate over all stored data, useful for debugging, data migration, or displaying all stored settings. The returned iterator provides entries as `[key, value]` tuples.\n *\n * @returns A promise that resolves to an iterator containing all key-value pairs in the storage.\n */\n entries<\n StorageTypes extends BaseStorageTypes = BaseStorageTypes,\n Keys extends keyof StorageTypes = keyof StorageTypes,\n >(): Promise>;\n}" - }, - "ActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/ActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActionExtensionComponents", - "value": "StandardComponents | 'AdminAction'", - "description": "The components available for building action extensions. Includes all standard components plus the admin action component required for action extension setup." - }, - "StandardComponents": { - "filePath": "src/surfaces/admin/components/StandardComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "StandardComponents", - "value": "'Avatar' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'ButtonGroup' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ColorField' | 'ColorPicker' | 'DateField' | 'DatePicker' | 'DropZone' | 'Divider' | 'EmailField' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Menu' | 'MoneyField' | 'NumberField' | 'Option' | 'OptionGroup' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'QueryContainer' | 'SearchField' | 'Section' | 'Select' | 'Spinner' | 'Stack' | 'Switch' | 'Table' | 'TableBody' | 'TableCell' | 'TableHeader' | 'TableHeaderRow' | 'TableRow' | 'Text' | 'TextArea' | 'TextField' | 'Thumbnail' | 'Tooltip' | 'UnorderedList' | 'URLField'", - "description": "The standard set of UI components available in most admin extensions. These components provide the building blocks for creating extension interfaces including layout elements, form inputs, data display, navigation, and interactive controls. Use these components to build consistent, accessible UIs that match the Shopify admin design system." - }, - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred." - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - }, - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer)." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\"." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "OrderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedList", - "description": "Configure the following properties on the ordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class OrderedList\n extends PreactCustomElement\n implements OrderedListProps\n{\n constructor();\n}" - }, - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)" - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "Tooltip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Tooltip", - "description": "Configure the following properties on the tooltip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Tooltip extends PreactOverlayElement implements TooltipProps {\n constructor();\n}" - }, - "UnorderedList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedList", - "description": "Configure the following properties on the unordered list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class UnorderedList\n extends PreactCustomElement\n implements UnorderedListProps\n{\n constructor();\n}" - }, - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "AdminAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminAction", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text to use as the Action modal's title. If not provided, the name of the extension will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action might be in an inert state that prevents user interaction.", - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminAction\n extends PreactCustomElement\n implements AdminActionProps\n{\n /**\n * The text to use as the Action modal's title. If not provided, the name of the extension will be used.\n */\n heading: string;\n /**\n * Whether the action is in a loading state, such as during initial page load or when the action is being opened.\n * When `true`, the action might be in an inert state that prevents user interaction.\n */\n loading: boolean;\n constructor();\n}" - }, - "RunnableExtension": { - "filePath": "src/extension.ts", - "name": "RunnableExtension", - "description": "Defines the structure of a runnable extension, which executes logic and returns data without rendering UI.", - "members": [ - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "api", - "value": "Api", - "description": "The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension." - }, - { - "filePath": "src/extension.ts", - "syntaxKind": "PropertySignature", - "name": "output", - "value": "Output | Promise", - "description": "The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case." - } - ], - "value": "export interface RunnableExtension {\n /**\n * The API object providing access to extension capabilities and methods. The specific API type depends on the extension target and determines what functionality is available to your extension.\n */\n api: Api;\n /**\n * The function output. Your extension function should return the expected output type or a Promise that resolves to that type. The output type is determined by your specific extension target and use case.\n */\n output: Output | Promise;\n}" - }, - "ShouldRenderApi": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderApi", - "description": "The `ShouldRenderApi` object provides methods for controlling action extension visibility. Access the following properties on the `ShouldRenderApi` object to determine whether an associated action should appear based on the current context.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ShouldRenderApi\n extends StandardApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this data to determine whether the action extension should appear based on the current context.\n */\n data: Data;\n}" - }, - "ShouldRenderOutput": { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "name": "ShouldRenderOutput", - "description": "The output returned by `should-render` extensions to control visibility.", - "members": [ - { - "filePath": "src/surfaces/admin/api/should-render/should-render.ts", - "syntaxKind": "PropertySignature", - "name": "display", - "value": "boolean", - "description": "Whether to display the associated action extension. Return `true` to show the action, `false` to hide it." - } - ], - "value": "export interface ShouldRenderOutput {\n /** Whether to display the associated action extension. Return `true` to show the action, `false` to hide it. */\n display: boolean;\n}" - }, - "BlockExtensionApi": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "BlockExtensionApi", - "description": "The `BlockExtensionApi` object provides methods for block extensions that render inline content on admin pages. Access the following properties on the `BlockExtensionApi` object to interact with the current context, navigate to other extensions, and display picker dialogs.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface BlockExtensionApi\n extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items in the current context, such as selected products in an index page or the product being viewed on a details page. The available IDs depend on the extension target and user interactions.\n */\n data: Data;\n\n /**\n * Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`).\n */\n navigation: Navigation;\n}" - }, - "Navigation": { - "filePath": "src/surfaces/admin/api/block/block.ts", - "name": "Navigation", - "description": "The `Navigation` object provides methods for navigating between extensions and admin pages.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/block/block.ts", - "syntaxKind": "PropertySignature", - "name": "navigate", - "value": "(url: string | URL) => void", - "description": "Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "navigation.navigate('extension://my-admin-action-extension-handle')", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface Navigation {\n /**\n * Navigates to a specific extension or admin route. Currently supports navigating from a block extension to an action extension on the same resource page.\n *\n * @param url - The destination URL, typically in the format 'extension://extension-handle' for other extensions\n * @example navigation.navigate('extension://my-admin-action-extension-handle')\n */\n navigate: (url: string | URL) => void;\n}" - }, - "BlockExtensionComponents": { - "filePath": "src/surfaces/admin/components/BlockExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BlockExtensionComponents", - "value": "StandardComponents | 'AdminBlock' | 'Form'", - "description": "The components available for building block extensions. Includes all standard components plus the admin block component required for block extension setup and the form component for creating forms." - }, - "AdminBlock": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlock", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminBlock\n extends PreactCustomElement\n implements AdminBlockProps\n{\n /**\n * The text displayed as the block's title in the header. If not provided, the extension name will be used.\n */\n heading: string;\n /**\n * The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.\n */\n collapsedSummary: string;\n constructor();\n}" - }, - "Form": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Form", - "description": "Configure the following properties on the form component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" - }, - "CustomerSegmentTemplateApi": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplateApi", - "description": "The `CustomerSegmentTemplateApi` object provides methods for creating customer segment templates. Access the following properties on the `CustomerSegmentTemplateApi` object to build templates with translated content.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "__enabledFeatures", - "value": "string[]", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating template content into the merchant's language." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface CustomerSegmentTemplateApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardApi {\n /** Utilities for translating template content into the merchant's language. */\n i18n: I18n;\n /** @private */\n __enabledFeatures: string[];\n}" - }, - "CustomerSegmentTemplate": { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "name": "CustomerSegmentTemplate", - "description": "Defines a customer segment template that merchants can use to create targeted customer groups.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "createdOn", - "value": "string", - "description": "The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "dependencies", - "value": "{ standardMetafields?: \"facts.birth_date\"[]; customMetafields?: string[]; }", - "description": "Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string | string[]", - "description": "The template description in the merchant's language. Use an array for multiple paragraphs." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "queryToInsert", - "value": "string", - "description": "The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates." - }, - { - "filePath": "src/surfaces/admin/api/customer-segment-template/customer-segment-template.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The template title in the merchant's language." - } - ], - "value": "export interface CustomerSegmentTemplate {\n /**\n * The template title in the merchant's language.\n */\n title: string;\n /**\n * The template description in the merchant's language. Use an array for multiple paragraphs.\n */\n description: string | string[];\n /**\n * The segment query code to display in the template with syntax highlighting. This code is shown to merchants but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n query: string;\n /**\n * The segment query code to insert when the merchant selects this template. If omitted, the `query` value is used instead. This code is inserted into the editor but not validated. Test your queries in the Shopify admin segment editor before including them in templates.\n */\n queryToInsert: string;\n /**\n * Customer metafields required by this template's query. Declare dependencies so the admin can guide merchants to set up required metafields before using the template.\n */\n dependencies?: {\n /** Standard Shopify customer metafields used in the query. */\n standardMetafields?: CustomerStandardMetafieldDependency[];\n /** Custom [metafield](/docs/apps/build/metafields) definitions used in the query. */\n customMetafields?: string[];\n };\n /**\n * The creation date in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. Templates created within the last month display a \"New\" badge.\n */\n createdOn: string;\n}" - }, - "DiscountFunctionSettingsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "name": "DiscountFunctionSettingsApi", - "description": "The `DiscountFunctionSettingsApi` object provides methods for configuring discount functions. Access the following properties on the `DiscountFunctionSettingsApi` object to manage function settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DiscountFunctionSettingsData", - "description": "The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "DiscountsApi", - "description": "The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/discount-function-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface DiscountFunctionSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends Omit, 'data'> {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store discount function configuration. Use this to save merchant settings for your discount function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The discount being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: DiscountFunctionSettingsData;\n /** The `discounts` object provides reactive access to discount configuration, including discount classes and the discount method. Use the signals to read current values and the update functions to modify discount classes in your settings UI. These values automatically update when changed by the merchant or system. */\n discounts: DiscountsApi;\n}" - }, - "ApplyMetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "ApplyMetafieldChange", - "description": "A function that applies metafield changes to discount function settings. Call this function with an update or removal operation, then await the Promise to receive a result indicating success or failure. Use the result to provide feedback or handle errors in your settings interface.", - "isPublicDocs": true, - "params": [ - { - "name": "change", - "description": "", - "value": "MetafieldChange", - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n change: MetafieldChange,\n) => Promise" - }, - "MetafieldChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange", - "description": "A metafield change operation that can either update or remove a metafield. Pass this to `applyMetafieldChange` to modify discount settings stored in metafields.", - "isPublicDocs": true - }, - "MetafieldUpdateChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldUpdateChange", - "description": "A metafield update or creation operation. Use this to set or modify metafield values that store discount function configuration data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateMetafield'", - "description": "Identifies this as an update operation. Always set to `'updateMetafield'` for updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The metafield value to store. Can be a string or number depending on your configuration needs." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "SupportedDefinitionType", - "description": "The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format.", - "isOptional": true - } - ], - "value": "export interface MetafieldUpdateChange {\n /** Identifies this as an update operation. Always set to `'updateMetafield'` for updates. */\n type: 'updateMetafield';\n /** The unique key identifying the metafield within its namespace. Use descriptive keys that indicate the setting's purpose (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The namespace that organizes related metafields. When omitted, a default namespace is assigned. Use consistent namespaces to group related settings. */\n namespace?: string;\n /** The metafield value to store. Can be a string or number depending on your configuration needs. */\n value: string | number;\n /** The [data type](/docs/apps/build/metafields/list-of-data-types) that defines how the value is formatted and validated. When omitted, preserves the existing type for updates or uses a default for new metafields. Choose a type that matches your value format. */\n valueType?: SupportedDefinitionType;\n}" - }, - "SupportedDefinitionType": { - "filePath": "src/surfaces/admin/api/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SupportedDefinitionType", - "value": "'boolean' | 'collection_reference' | 'color' | 'date' | 'date_time' | 'dimension' | 'file_reference' | 'json' | 'metaobject_reference' | 'mixed_reference' | 'money' | 'multi_line_text_field' | 'number_decimal' | 'number_integer' | 'page_reference' | 'product_reference' | 'rating' | 'rich_text_field' | 'single_line_text_field' | 'product_taxonomy_value_reference' | 'url' | 'variant_reference' | 'volume' | 'weight' | 'list.collection_reference' | 'list.color' | 'list.date' | 'list.date_time' | 'list.dimension' | 'list.file_reference' | 'list.metaobject_reference' | 'list.mixed_reference' | 'list.number_decimal' | 'list.number_integer' | 'list.page_reference' | 'list.product_reference' | 'list.rating' | 'list.single_line_text_field' | 'list.url' | 'list.variant_reference' | 'list.volume' | 'list.weight'", - "description": "The supported [metafield definition types](/docs/apps/build/metafields/list-of-data-types) for storing extension configuration data. Use these types to specify how metafield values should be formatted, validated, and displayed. Types prefixed with `list.` store arrays of values, while other types store single values. Choose a type that matches your data format (for example, use `'number_integer'` for whole numbers, `'single_line_text_field'` for short text, or `'json'` for complex structured data).", - "isPublicDocs": true - }, - "MetafieldRemoveChange": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldRemoveChange", - "description": "A metafield removal operation. Use this to delete metafields that are no longer needed for your discount configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key of the metafield to remove. Must match the key used when the metafield was created." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'removeMetafield'", - "description": "Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions." - } - ], - "value": "export interface MetafieldRemoveChange {\n /** Identifies this as a removal operation. Always set to `'removeMetafield'` for deletions. */\n type: 'removeMetafield';\n /** The unique key of the metafield to remove. Must match the key used when the metafield was created. */\n key: string;\n /** The namespace containing the metafield to remove. Required to ensure the correct metafield is targeted, as the same key can exist in different namespaces. */\n namespace: string;\n}" - }, - "MetafieldChangeResult": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeSuccess | MetafieldChangeResultError", - "description": "The result returned after attempting to change a metafield. Check the `type` property to determine if the operation succeeded (`'success'`) or failed (`'error'`), then handle the result appropriately in your extension.", - "isPublicDocs": true - }, - "MetafieldChangeSuccess": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeSuccess", - "description": "A successful metafield change operation result. The metafield was updated or removed as requested and the changes are now saved.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully." - } - ], - "value": "export interface MetafieldChangeSuccess {\n /** Indicates the operation succeeded. When this value is `'success'`, the metafield change was applied successfully. */\n type: 'success';\n}" - }, - "MetafieldChangeResultError": { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "name": "MetafieldChangeResultError", - "description": "A failed metafield change operation result. Use the error message to understand what went wrong and fix the issue, such as validation errors, permission problems, or invalid metafield types.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/metafields.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates the operation failed. Check this value to determine if you need to handle an error." - } - ], - "value": "export interface MetafieldChangeResultError {\n /** Indicates the operation failed. Check this value to determine if you need to handle an error. */\n type: 'error';\n /** A human-readable error message explaining why the operation failed. Use this to debug issues or display feedback to merchants. */\n message: string;\n}" - }, - "DiscountFunctionSettingsData": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountFunctionSettingsData", - "description": "The `data` object exposed to discount function settings extensions in the `admin.discount-details.function-settings.render` target. Use this to access the current discount configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants." - } - ], - "value": "export interface DiscountFunctionSettingsData {\n /** The discount's unique global identifier (GID) in the [GraphQL Admin API](/docs/api/admin-graphql) format (for example, `gid://shopify/DiscountAutomaticApp/123`). Use this ID to associate settings with the correct discount or query discount data. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the discount function's configuration values. Use these metafields to populate your settings UI with the current discount configuration and display existing settings to merchants. */\n metafields: Metafield[];\n}" - }, - "Metafield": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "Metafield", - "description": "A [metafield](/docs/apps/build/metafields) that stores discount function configuration data. Use metafields to persist settings that control how your discount function behaves, such as discount thresholds, eligibility rules, or custom discount logic parameters.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`)." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI." - } - ], - "value": "export interface Metafield {\n /** A human-readable description explaining the metafield's purpose and how it affects discount behavior. Use this to document your settings for other developers. */\n description?: string;\n /** The unique global identifier (GID) for this metafield. Use this ID to reference the metafield in GraphQL queries or updates. */\n id: string;\n /** The namespace that organizes related metafields together. All metafields for a discount should use a consistent namespace to group related settings. */\n namespace: string;\n /** The unique key identifying this metafield within its namespace. This key determines how you access the metafield value (for example, `'min_purchase_amount'` or `'eligible_customer_tags'`). */\n key: string;\n /** The metafield value stored as a string. Parse this value according to the metafield type to use it in your settings UI. */\n value: string;\n /** The metafield [definition type](/docs/apps/build/metafields/list-of-data-types) that specifies the value format and validation rules. Use this to determine how to parse and display the value. */\n type: string;\n}" - }, - "DiscountsApi": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "name": "DiscountsApi", - "description": "The `DiscountsApi` object provides reactive access to discount configuration. Use the signals to read discount classes and method, and the update function to change which parts of the purchase (products, order, or shipping) the discount affects.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountClasses", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "discountMethod", - "value": "ReadonlySignalLike", - "description": "A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code." - }, - { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "updateDiscountClasses", - "value": "UpdateSignalFunction", - "description": "A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects." - } - ], - "value": "export interface DiscountsApi {\n /**\n * A signal that contains the discount classes (Product, Order, or Shipping). Read this to determine where the discount applies in the purchase flow. A discount can apply to multiple classes simultaneously.\n */\n discountClasses: ReadonlySignalLike;\n /**\n * A function that updates the discount classes to change where the discount applies. Call this function with an array of `DiscountClass` values to set which parts of the purchase (products, order total, or shipping) the discount affects.\n */\n updateDiscountClasses: UpdateSignalFunction;\n /**\n * A signal that contains the discount method (`'automatic'` or `'code'`). Read this to determine whether the discount applies automatically at checkout or requires a customer-entered code.\n */\n discountMethod: ReadonlySignalLike;\n}" - }, - "ReadonlySignalLike": { - "filePath": "src/shared.ts", - "name": "ReadonlySignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface ReadonlySignalLike {\n /**\n * The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup.\n */\n readonly value: T;\n /**\n * Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value.\n */\n subscribe(fn: (value: T) => void): () => void;\n}" - }, - "DiscountClass": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountClass", - "value": "'product' | 'order' | 'shipping'", - "description": "The discount class that determines where the discount applies in the purchase flow. Use this to understand what type of discount the merchant is configuring (product-level, order-level, or shipping).", - "isPublicDocs": true - }, - "DiscountMethod": { - "filePath": "src/surfaces/admin/api/discount-function-settings/launch-options.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountMethod", - "value": "'automatic' | 'code'", - "description": "The method used to apply a discount. Use `'automatic'` for discounts that apply automatically at checkout, or `'code'` for discounts that require a code entered by the customer.", - "isPublicDocs": true - }, - "UpdateSignalFunction": { - "filePath": "src/shared.ts", - "name": "UpdateSignalFunction", - "description": "A function that updates a signal and returns a result indicating success or failure. The function is typically used along with a `ReadonlySignalLike` object.", - "params": [ - { - "name": "value", - "description": "", - "value": "T", - "filePath": "src/shared.ts" - } - ], - "returns": { - "filePath": "src/shared.ts", - "description": "", - "name": "Result", - "value": "Result" - }, - "value": "(value: T) => Result" - }, - "Result": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Result", - "value": "{success: true; value: T} | {success: false; errors: ValidationError[]}", - "description": "A result type that indicates the success or failure of an operation." - }, - "ValidationError": { - "filePath": "src/shared.ts", - "name": "ValidationError", - "description": "A validation error object that is returned when an operation fails.", - "members": [ - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "A code identifier for the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "{ message: string; path: string[]; }[]", - "description": "Field-level validation issues", - "isOptional": true - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message describing the error." - }, - { - "filePath": "src/shared.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "" - } - ], - "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" - }, - "FunctionSettingsComponents": { - "filePath": "src/surfaces/admin/components/FunctionSettingsComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FunctionSettingsComponents", - "value": "FormExtensionComponents | 'FunctionSettings'", - "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." - }, - "FormExtensionComponents": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - }, - "FunctionSettings": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FunctionSettings", - "description": "Configure the following properties on the function settings component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class FunctionSettings\n extends PreactCustomElement\n implements FunctionSettingsProps\n{\n constructor();\n}" - }, - "PrintActionExtensionApi": { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "name": "PrintActionExtensionApi", - "description": "The `PrintActionExtensionApi` object provides methods for print action extensions that generate custom printable documents. Access the following properties on the `PrintActionExtensionApi` object to access selected resources and display picker dialogs for print configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/print-action/print-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PrintActionExtensionApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * An array of currently viewed or selected resource identifiers. Use this to access the IDs of items to include in the print document, such as selected orders or products.\n */\n data: Data;\n}" - }, - "PrintActionExtensionComponents": { - "filePath": "src/surfaces/admin/components/PrintActionExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PrintActionExtensionComponents", - "value": "StandardComponents | 'AdminPrintAction'", - "description": "The components available for building print action extensions. Includes all standard components plus the admin print action component required for print action setup." - }, - "AdminPrintAction": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintAction", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The `src` URL of the preview and the document to print. If not provided, the preview will show an empty state and the print button will be disabled. HTML, PDFs, and images are supported." - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true - } - ], - "value": "declare class AdminPrintAction\n extends PreactCustomElement\n implements AdminPrintActionProps\n{\n /**\n * The `src` URL of the preview and the document to print.\n * If not provided, the preview will show an empty state and the print button will be disabled.\n * HTML, PDFs, and images are supported.\n */\n src: string;\n constructor();\n}" - }, - "ProductDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductDetailsConfigurationApi", - "description": "The `ProductDetailsConfigurationApi` object provides methods for configuring product bundles and relationships. Access the following properties on the `ProductDetailsConfigurationApi` object to build product configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { product: Product; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product configuration data including the current product, selected items, and app URLs. Use this to access the product being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product currently being viewed in the admin.\n * @deprecated\n */\n product: Product;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "Product": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "Product", - "description": "A product configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "onlineStoreUrl", - "value": "string", - "description": "The URL to view this product on the online store. Use this to create \"View in store\" links.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productCategory", - "value": "string", - "description": "The standardized product category taxonomy. Use this for product classification in search and organization.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productComponents", - "value": "ProductComponent[]", - "description": "An array of component products that make up this bundle. Each component represents a product included in the bundle configuration." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "'ACTIVE' | 'ARCHIVED' | 'DRAFT'", - "description": "The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name shown to merchants and customers." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "The total available inventory summed across all variants and locations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this product has." - } - ], - "value": "export interface Product {\n /** The product's unique global identifier (GID). */\n id: string;\n /** The product's display name shown to merchants and customers. */\n title: string;\n /** The URL-friendly unique identifier used in product URLs (for example, `'blue-t-shirt'`). */\n handle: string;\n /** The publication status indicating whether the product is active (published), archived (discontinued), or draft (unpublished). */\n status: 'ACTIVE' | 'ARCHIVED' | 'DRAFT';\n /** The total number of variants this product has. */\n totalVariants: number;\n /** The total available inventory summed across all variants and locations. */\n totalInventory: number;\n /** Whether the product has only the default variant with no custom options. When `true`, the product has no size, color, or other option variations. */\n hasOnlyDefaultVariant: boolean;\n /** The URL to view this product on the online store. Use this to create \"View in store\" links. */\n onlineStoreUrl?: string;\n /** Product options that define how variants differ (for example, Size, Color, Material). Each option has an ID, name, position, and array of possible values. */\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n /** The product category or type used for organization (for example, \"T-Shirt\", \"Shoes\"). */\n productType: string;\n /** The standardized product category taxonomy. Use this for product classification in search and organization. */\n productCategory?: string;\n /** An array of component products that make up this bundle. Each component represents a product included in the bundle configuration. */\n productComponents: ProductComponent[];\n}" - }, - "ProductComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "name": "ProductComponent", - "description": "A component product that is part of a bundle. Represents an individual product included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "componentVariantsCount", - "value": "number", - "description": "The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "featuredImage", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component product's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "nonComponentVariantsCount", - "value": "number", - "description": "The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productUrl", - "value": "string", - "description": "The admin URL for this component product. Use this to create links to the product's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The product's display name. Use this to show which product is included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "The total number of variants this component product has. Use this to determine if variant selection is needed for this component." - } - ], - "value": "export interface ProductComponent {\n /** The component product's unique global identifier (GID). */\n id: string;\n /** The product's display name. Use this to show which product is included in the bundle. */\n title: string;\n /** The featured image displayed for this component product with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n featuredImage?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The total number of variants this component product has. Use this to determine if variant selection is needed for this component. */\n totalVariants: number;\n /** The admin URL for this component product. Use this to create links to the product's details page in the admin. */\n productUrl: string;\n /** The count of variants from this product that are used as bundle components. Use this to understand how many variants are configured in bundles. */\n componentVariantsCount: number;\n /** The count of variants from this product that aren't used in any bundles. Use this to identify available variants for adding to bundle configurations. */\n nonComponentVariantsCount: number;\n}" - }, - "PurchaseOptionsCardConfigurationApi": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "name": "PurchaseOptionsCardConfigurationApi", - "description": "The `PurchaseOptionsCardConfigurationApi` object provides methods for action extensions that interact with purchase options and selling plans. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to work with selected products and their associated subscription configurations.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "() => void", - "description": "Closes the extension modal. Use this when your extension completes its task or the merchant wants to exit. Equivalent to clicking the close button in the overlay corner." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ selected: { id: string; sellingPlanId?: string; }[]; }", - "description": "Selected purchase option data including product and selling plan identifiers." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface PurchaseOptionsCardConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends ActionExtensionApi {\n /** Selected purchase option data including product and selling plan identifiers. */\n data: {\n /** Array of selected items with their product IDs and optional selling plan IDs for subscription configurations. */\n selected: {\n /** The product or variant identifier. */\n id: string;\n /** The associated selling plan identifier, if a subscription option is selected. */\n sellingPlanId?: string;\n }[];\n };\n}" - }, - "ProductVariantDetailsConfigurationApi": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantDetailsConfigurationApi", - "description": "The `ProductVariantDetailsConfigurationApi` object provides methods for configuring product variant bundles and relationships. Access the following properties on the `ProductVariantDetailsConfigurationApi` object to build variant configuration interfaces.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data & { variant: ProductVariant; app: { launchUrl: string; applicationUrl: string; }; }", - "description": "Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "navigation", - "value": "Navigation", - "description": "Navigates to other extensions or admin pages. Currently supports navigation from a block to an action extension on the same resource page. For example, navigate from a product details block (`admin.product-details.block.render`) to a product details action (`admin.product-details.action.render`)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ProductVariantDetailsConfigurationApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends BlockExtensionApi {\n /** Product variant configuration data including the current variant, selected items, and app URLs. Use this to access the variant being configured and build your configuration interface. */\n data: Data & {\n /**\n * The product variant currently being viewed in the admin.\n * @deprecated\n */\n variant: ProductVariant;\n /** URLs for launching and navigating to your app, including the launch URL and base application URL. Use these to create links or redirect merchants to your app. */\n app: {\n launchUrl: string;\n applicationUrl: string;\n };\n };\n}" - }, - "ProductVariant": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariant", - "description": "A product variant configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string", - "description": "The barcode, UPC, or ISBN number for the variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "string", - "description": "The original price before any discounts or markdowns." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "string", - "description": "The current selling price for this variant." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantComponents", - "value": "ProductVariantComponent[]", - "description": "An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for inventory tracking." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "taxCode", - "value": "string", - "description": "The harmonized system (HS) tax code for international shipping and customs." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number", - "description": "The physical weight of the variant as a number." - } - ], - "value": "export interface ProductVariant {\n /** The variant's unique global identifier (GID). */\n id: string;\n /** The Stock Keeping Unit (SKU) identifier for inventory tracking. */\n sku: string;\n /** The barcode, UPC, or ISBN number for the variant. */\n barcode: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The current selling price for this variant. */\n price: string;\n /** The original price before any discounts or markdowns. */\n compareAtPrice: string;\n /** Whether this variant is subject to taxes. When `true`, applicable taxes are calculated at checkout. */\n taxable: boolean;\n /** The harmonized system (HS) tax code for international shipping and customs. */\n taxCode: string;\n /** The physical weight of the variant as a number. */\n weight: number;\n /** The option values that define this specific variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n /** An array of component variants that make up this bundle variant. Each component represents a product variant included in the bundle. */\n productVariantComponents: ProductVariantComponent[];\n}" - }, - "ProductVariantComponent": { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "name": "ProductVariantComponent", - "description": "A component variant that is part of a product bundle. Represents an individual product variant included in a bundle configuration.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\")." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The component variant's unique global identifier (GID)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "{\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null", - "description": "The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "productVariantUrl", - "value": "string", - "description": "The admin URL for this product variant. Use this to create links to the variant's details page in the admin." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ name: string; value: string; }[]", - "description": "The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue)." - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The Stock Keeping Unit (SKU) identifier for this component variant.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/api/product-configuration/product-variant-details-configuration.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display name showing only the variant's option values (for example, \"Medium / Blue\")." - } - ], - "value": "export interface ProductVariantComponent {\n /** The component variant's unique global identifier (GID). */\n id: string;\n /** A human-readable display name that combines the product title with the variant's option values (for example, \"T-Shirt - Medium / Blue\"). */\n displayName: string;\n /** The display name showing only the variant's option values (for example, \"Medium / Blue\"). */\n title: string;\n /** The Stock Keeping Unit (SKU) identifier for this component variant. */\n sku?: string;\n /** The image displayed for this component variant with ID, URL, and alt text properties. Use this for showing component previews in bundle configuration interfaces. */\n image?: {\n id?: string | null;\n url?: string | null;\n altText?: string | null;\n } | null;\n /** The admin URL for this product variant. Use this to create links to the variant's details page in the admin. */\n productVariantUrl: string;\n /** The option values that define this specific component variant with name and value pairs (for example, Size: Large, Color: Blue). */\n selectedOptions: {\n name: string;\n value: string;\n }[];\n}" - }, - "OrderRoutingRuleApi": { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "name": "OrderRoutingRuleApi", - "description": "The `OrderRoutingRuleApi` object provides methods for configuring order routing rules. Access the following properties on the `OrderRoutingRuleApi` object to manage rule settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldsChange", - "value": "ApplyMetafieldsChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "Data", - "description": "The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields)." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/order-routing-rule/order-routing-rule.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface OrderRoutingRuleApi\n extends StandardRenderingExtensionApi {\n /** Updates or removes [metafields](/docs/apps/build/metafields) that store order routing rule configuration. */\n applyMetafieldsChange: ApplyMetafieldsChange;\n /** The order routing rule being configured, including its metadata and associated [metafields](/docs/apps/build/metafields). */\n data: Data;\n}" - }, - "ApplyMetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "name": "ApplyMetafieldsChange", - "description": "A function that applies metafield changes to order routing rule settings. Call this function with one or more change operations to update or remove metafields in batch. Use batch operations to apply multiple configuration changes efficiently.", - "isPublicDocs": true, - "params": [ - { - "name": "changes", - "description": "", - "value": "MetafieldsChange[]", - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(changes: MetafieldsChange[]) => void" - }, - "MetafieldsChange": { - "filePath": "src/surfaces/admin/api/order-routing-rule/metafields.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldsChange", - "value": "MetafieldUpdateChange | MetafieldRemoveChange | MetafieldUpdateChange[] | MetafieldRemoveChange[]", - "description": "One or more metafield change operations to apply to order routing rule settings. Can be a single change or an array of changes for batch operations. Use arrays to apply multiple changes at once.", - "isPublicDocs": true - }, - "ValidationSettingsApi": { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "name": "ValidationSettingsApi", - "description": "The `ValidationSettingsApi` object provides methods for configuring cart and checkout validation functions. Access the following properties on the `ValidationSettingsApi` object to manage validation settings and metafields.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "applyMetafieldChange", - "value": "ApplyMetafieldChange", - "description": "Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "auth", - "value": "Auth", - "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "ValidationData", - "description": "The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "extension", - "value": "{ target: ExtensionTarget; }", - "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "intents", - "value": "Intents", - "description": "Provides information to the receiver of an intent. Use this to access data passed from other extensions or parts of the admin when your extension is launched through intent-based navigation." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "picker", - "value": "PickerApi", - "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "resourcePicker", - "value": "ResourcePickerApi", - "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/validation-settings.ts", - "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." - } - ], - "value": "export interface ValidationSettingsApi<\n ExtensionTarget extends AnyExtensionTarget,\n> extends StandardRenderingExtensionApi {\n /**\n * Updates or removes [metafields](/docs/apps/build/metafields) that store validation function configuration. Use this to save merchant settings for your validation function.\n */\n applyMetafieldChange: ApplyMetafieldChange;\n /** The validation being configured and its associated [metafields](/docs/apps/build/metafields) storing function settings. */\n data: ValidationData;\n}" - }, - "ValidationData": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ValidationData", - "description": "The `data` object exposed to validation settings extensions in the `admin.settings.validation.render` target. Use this to access the current validation configuration and populate your settings interface with existing values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "shopifyFunction", - "value": "ShopifyFunction", - "description": "The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "validation", - "value": "Validation", - "description": "The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode.", - "isOptional": true - } - ], - "value": "export interface ValidationData {\n /** The validation configuration containing the validation ID and metafields. Present when editing an existing validation, absent when creating a new validation. Use the presence of this value to determine if you're in create or edit mode. */\n validation?: Validation;\n /** The [Shopify Function](/docs/apps/build/functions) that implements the validation logic. Use this ID to associate configuration changes with the correct function. */\n shopifyFunction: ShopifyFunction;\n}" - }, - "ShopifyFunction": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "ShopifyFunction", - "description": "A [Shopify Function](/docs/apps/build/functions) that implements cart and checkout validation logic. This identifies which function the settings interface is configuring.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function." - } - ], - "value": "export interface ShopifyFunction {\n /** The [Shopify Function's](/docs/apps/build/functions) unique global identifier (GID). Use this ID to associate settings changes with the correct function. */\n id: string;\n}" - }, - "Validation": { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "name": "Validation", - "description": "A validation configuration that exists and is active in the shop. Use this object to access the validation's current settings and metafields when merchants edit an existing validation.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings." - }, - { - "filePath": "src/surfaces/admin/api/checkout-rules/launch-options.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration." - } - ], - "value": "export interface Validation {\n /** The validation's unique global identifier (GID). Use this ID to reference the validation in GraphQL operations or when saving updated settings. */\n id: string;\n /** An array of [metafields](/docs/apps/build/metafields) that store the validation's configuration values. Use these metafields to populate your settings UI with the current validation configuration. */\n metafields: Metafield[];\n}" - }, - "GraphQLError": { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "name": "GraphQLError", - "description": "The GraphQL error returned by the [GraphQL Admin API](/docs/api/admin-graphql).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "locations", - "value": "{ line: number; column: string; }", - "description": "The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string." - }, - { - "filePath": "src/surfaces/admin/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query." - } - ], - "value": "export interface GraphQLError {\n /**\n * A human-readable error message describing what went wrong with the GraphQL query. Use this to understand the cause of the error and how to fix your query.\n */\n message: string;\n /**\n * The location in the GraphQL query where the error occurred. Provides the line number and column position to help identify the exact source of the error in your query string.\n */\n locations: {\n /** The line number in the GraphQL query where the error occurred. */\n line: number;\n /** The column position in the GraphQL query where the error occurred. */\n column: string;\n };\n}" - } - } - } - ], - "examples": { - "description": "Essential patterns for all extensions", - "examples": [ - { - "description": "Query products using the [GraphQL Admin API](/docs/api/admin-graphql/), then update the first product with new tags. This example demonstrates chaining a query and mutation, handling the response data, and showing success feedback.", - "codeblock": { - "title": "Query and mutate product data", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [products, setProducts] = useState([]);\n const [updated, setUpdated] = useState(false);\n\n const handleQuery = async () => {\n const {data: productsData} = await shopify.query(\n `query GetProducts {\n products(first: 10) {\n edges {\n node {\n id\n title\n totalInventory\n }\n }\n }\n }`,\n );\n\n setProducts(productsData.products.edges);\n };\n\n const handleUpdate = async () => {\n const productId = products[0]?.node.id;\n\n if (!productId) return;\n\n const {data: updateData} = await shopify.query(\n `mutation UpdateProduct($id: ID!, $input: ProductInput!) {\n productUpdate(id: $id, product: $input) {\n product {\n id\n tags\n }\n userErrors {\n field\n message\n }\n }\n }`,\n {\n variables: {\n id: productId,\n input: {tags: ['processed', 'reviewed']},\n },\n },\n );\n\n if (updateData.productUpdate.product) {\n setUpdated(true);\n }\n };\n\n return (\n <s-admin-block heading=\"GraphQL Operations\">\n <s-stack direction=\"block\">\n <s-button onClick={handleQuery}>Query Products</s-button>\n {products.length > 0 && (\n <>\n <s-text>{products.length} products found</s-text>\n <s-button onClick={handleUpdate}>Update First Product</s-button>\n </>\n )}\n {updated && <s-text>Product tags updated!</s-text>}\n </s-stack>\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Save and retrieve user preferences from browser storage. This example loads saved preferences on mount, displays current values, and lets merchants update settings that persist across sessions.", - "codeblock": { - "title": "Persist settings", - "tabs": [ - { - "title": "jsx", - "code": "import {render} from 'preact';\nimport {useState, useEffect} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [preferences, setPreferences] = useState(null);\n\n useEffect(() => {\n const loadPreferences = async () => {\n const prefs = await shopify.storage.get('userPreferences');\n setPreferences(prefs);\n };\n \n loadPreferences();\n }, []);\n\n const handleSave = async () => {\n await shopify.storage.set('userPreferences', {\n theme: 'dark',\n notifications: true,\n defaultView: 'grid',\n });\n \n const updated = await shopify.storage.get('userPreferences');\n setPreferences(updated);\n };\n\n return (\n <s-admin-block heading=\"User Preferences\">\n <s-button onClick={handleSave}>Save Preferences</s-button>\n {preferences && (\n <s-stack direction=\"block\">\n <s-text>Theme: {preferences.theme}</s-text>\n <s-text>Notifications: {String(preferences.notifications)}</s-text>\n <s-text>View: {preferences.defaultView}</s-text>\n </s-stack>\n )}\n </s-admin-block>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - "category": "Target APIs", - "subCategory": "Core APIs", - "related": [], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "- **Handle GraphQL partial data:** Check both `errors` and `data` in query responses. GraphQL returns partial data with errors when some fields fail but others succeed.\n- **Catch `StorageExceededError` exceptions:** `storage.set()` and `storage.setMany()` throw `StorageExceededError` when you exceed storage limits. Catch these errors and handle quota failures gracefully.\n- **Use `storage.setMany()` for batch updates:** When updating multiple related values, use `setMany()` with an array of entries for efficient batch operations.\n- **Batch GraphQL queries:** Combine multiple queries in a single GraphQL request using aliases to reduce roundtrips and improve performance under rate limits." - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "- Storage is scoped per extension. Data saved by one extension is inaccessible to other extensions, even from the same app.\n- Storage values are serialized with `JSON.stringify`, so functions, symbols, and circular references aren't supported.\n- GraphQL queries share [rate limits](/docs/api/usage/limits) with your app's overall Admin API usage and are subject to the shop's installed [access scopes](/docs/api/usage/access-scopes).\n- ID tokens from `auth.idToken()` are short-lived JWTs. Call `auth.idToken()` on each request instead of caching tokens." - } - ] - }, - { - "name": "Admin action", - "description": "The admin action component configures the primary action, secondary action, and title for admin action extensions. Use admin action to define the core interaction points and header content that merchants see when your extension renders.\n\nLearn how to [build an admin action extension](/docs/apps/build/admin/actions-blocks/build-admin-action).", - "requires": "the [Action Extension API](/docs/api/admin-extensions/{API_VERSION}/target-apis/core-apis/action-extension-api) or [Purchase Options Card Configuration API](/docs/api/admin-extensions/{API_VERSION}/target-apis/contextual-apis/purchase-options-card-configuration-api).", - "thumbnail": "/assets/templated-apis-screenshots/admin/components/adminaction.png", - "isVisualComponent": true, - "type": "", - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the admin action component.", - "type": "AdminActionProps", - "typeDefinitions": { - "AdminActionProps": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminActionProps", - "description": "Configure the following properties on the admin action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The text to use as the action modal's title. If not provided, the name of the extension will be used.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "loading", - "value": "boolean", - "description": "Whether the action is in a loading state, such as during initial page load or when the action is being opened. When `true`, the action is in an inert state that prevents user interaction.", - "isOptional": true, - "defaultValue": "false" - } - ], - "value": "export interface AdminActionProps\n extends Pick {}" - } - } - }, - { - "title": "Slots", - "description": "The admin action component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "AdminActionSlots", - "typeDefinitions": { - "AdminActionSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminActionSlots", - "description": "The admin action component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "primary-action", - "value": "HTMLElement", - "description": "The main action button or link displayed in the admin action modal. This represents the primary or most important action that users can take in this modal context, typically displayed with high visual prominence.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "secondary-actions", - "value": "HTMLElement", - "description": "Additional action buttons or links displayed in the admin action modal. These provide alternative or supporting actions, visually de-emphasized compared to the primary action to establish clear hierarchy.", - "isOptional": true - } - ], - "value": "export interface AdminActionSlots {\n /**\n * The main action button or link displayed in the admin action modal.\n * This represents the primary or most important action that users can take in this modal context, typically displayed with high visual prominence.\n */\n 'primary-action': HTMLElement;\n /**\n * Additional action buttons or links displayed in the admin action modal.\n * These provide alternative or supporting actions, visually de-emphasized compared to the primary action to establish clear hierarchy.\n */\n 'secondary-actions': HTMLElement;\n}" - } - } - } - ], - "category": "Web components", - "subCategory": "Settings and templates", - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use action-oriented labels:** Write labels using the `{verb}+{noun}` format like **Save changes**, **Delete product**, or **Create discount** rather than generic labels like **Submit** or **OK**.\n- **Follow action hierarchy:** Primary actions complete or advance the workflow (like **Save** or **Publish**), while secondary actions cancel or go back (like **Cancel** or **Discard changes**).\n- **Write descriptive titles:** Titles should name the specific task like **Edit shipping settings** or **Archive old orders**, not generic phrases like **Actions** or **Settings**.\n- **Limit to one task per action:** Each button should trigger a single operation. If you need multiple steps, guide merchants through them sequentially rather than combining operations." - } - ], - "defaultExample": { - "image": "/assets/templated-apis-screenshots/admin/components/adminaction-example.png", - "description": "Set up the modal header and action [buttons](/docs/api/admin-extensions/{API_VERSION}/web-components/actions/button) for an admin action extension. This example shows a titled modal with primary and secondary action buttons.", - "codeblock": { - "title": "Configure an admin action modal", - "tabs": [ - { - "title": "html", - "code": "<s-admin-action heading=\"My App Action\">\n Modal content\n <s-button slot=\"primary-action\">Save</s-button>\n <s-button slot=\"secondary-actions\">Cancel</s-button>\n</s-admin-action>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Modal content\n Save\n Cancel\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Show a loading indicator while data is being fetched or processed. This example sets the `loading` property to display a loading state and disables the primary [button](/docs/api/admin-extensions/{API_VERSION}/web-components/actions/button).", - "codeblock": { - "title": "Show a loading state", - "tabs": [ - { - "title": "html", - "code": "<s-admin-action heading=\"Loading order details\" loading>\n <s-text>Fetching data…</s-text>\n <s-button slot=\"primary-action\" disabled>Save</s-button>\n <s-button slot=\"secondary-actions\">Cancel</s-button>\n</s-admin-action>\n", - "language": "html" - }, - { - "code": "\n Fetching data…\n Save\n Cancel\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Collect merchant input inside the action modal using form fields. This example includes a [text field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/text-field) and [number field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/number-field) arranged in a [stack](/docs/api/admin-extensions/{API_VERSION}/web-components/layout-and-structure/stack).", - "codeblock": { - "title": "Add form fields to the modal", - "tabs": [ - { - "title": "html", - "code": "<s-admin-action heading=\"Edit shipping settings\">\n <s-stack direction=\"block\" gap=\"base\">\n <s-text-field label=\"Shipping rate name\" value=\"Standard shipping\"></s-text-field>\n <s-number-field label=\"Flat rate amount\" prefix=\"$\" value=\"5.99\"></s-number-field>\n </s-stack>\n <s-button slot=\"primary-action\" variant=\"primary\">Save changes</s-button>\n <s-button slot=\"secondary-actions\">Discard</s-button>\n</s-admin-action>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n Save changes\n Discard\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Warn merchants before a permanent operation like deleting a resource. This example uses a critical [banner](/docs/api/admin-extensions/{API_VERSION}/web-components/feedback-and-status-indicators/banner) and a destructive primary [button](/docs/api/admin-extensions/{API_VERSION}/web-components/actions/button) to confirm deletion.", - "codeblock": { - "title": "Confirm a destructive action", - "tabs": [ - { - "title": "html", - "code": "<s-admin-action heading=\"Delete product\">\n <s-stack direction=\"block\" gap=\"base\">\n <s-banner tone=\"critical\">\n This will permanently delete the product and all its variants. This action cannot be undone.\n </s-banner>\n <s-text>Product: Winter Jacket — 12 variants</s-text>\n </s-stack>\n <s-button slot=\"primary-action\" variant=\"primary\" tone=\"critical\">Delete product</s-button>\n <s-button slot=\"secondary-actions\">Cancel</s-button>\n</s-admin-action>\n", - "language": "html" - }, - { - "code": "\n \n \n This will permanently delete the product and all its variants. This action cannot be undone.\n \n Product: Winter Jacket — 12 variants\n \n Delete product\n Cancel\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display read-only resource information inside a modal before the merchant takes action. This example shows an order summary with [badges](/docs/api/admin-extensions/{API_VERSION}/web-components/feedback-and-status-indicators/badge), [dividers](/docs/api/admin-extensions/{API_VERSION}/web-components/layout-and-structure/divider), and a fulfillment [button](/docs/api/admin-extensions/{API_VERSION}/web-components/actions/button).", - "codeblock": { - "title": "Show resource details in a modal", - "tabs": [ - { - "title": "html", - "code": "<s-admin-action heading=\"Order summary\">\n <s-stack direction=\"block\" gap=\"base\">\n <s-stack direction=\"block\" gap=\"small\">\n <s-text type=\"strong\">Order #1042</s-text>\n <s-text>3 items · $129.97</s-text>\n </s-stack>\n <s-divider></s-divider>\n <s-stack direction=\"block\" gap=\"small\">\n <s-text>Shipping: Standard (3–5 days)</s-text>\n <s-text>Status: <s-badge tone=\"info\">Unfulfilled</s-badge></s-text>\n </s-stack>\n </s-stack>\n <s-button slot=\"primary-action\" variant=\"primary\">Fulfill order</s-button>\n <s-button slot=\"secondary-actions\">Close</s-button>\n</s-admin-action>\n", - "language": "html" - }, - { - "code": "\n \n \n Order #1042\n 3 items · $129.97\n \n \n \n Shipping: Standard (3–5 days)\n Status: Unfulfilled\n \n \n Fulfill order\n Close\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - }, - "related": [] - }, - { - "name": "Admin block", - "description": "The admin block component enables admin block extensions to appear inline on resource pages. Use admin block to create embedded extension experiences that feel native to the Shopify admin interface, with automatic height management, expansion controls, and content overflow handling.\n\nLearn how to [build an admin block extension](/docs/apps/build/admin/actions-blocks/build-admin-block).", - "requires": "the [Block Extension API](/docs/api/admin-extensions/{API_VERSION}/target-apis/core-apis/block-extension-api), [Product Details Configuration API](/docs/api/admin-extensions/{API_VERSION}/target-apis/contextual-apis/product-details-configuration-api), or [Product Variant Details Configuration API](/docs/api/admin-extensions/{API_VERSION}/target-apis/contextual-apis/product-variant-details-configuration-api).", - "thumbnail": "/assets/templated-apis-screenshots/admin/components/adminblock.png", - "isVisualComponent": true, - "type": "", - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the admin block component.", - "type": "AdminBlockProps", - "typeDefinitions": { - "AdminBlockProps": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminBlockProps", - "description": "Configure the following properties on the admin block component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "collapsedSummary", - "value": "string", - "description": "The summary text displayed when the app block is collapsed. Summaries longer than 30 characters will be truncated.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The text displayed as the block's title in the header. If not provided, the extension name will be used.", - "isOptional": true - } - ], - "value": "export interface AdminBlockProps\n extends Pick {}" - } - } - } - ], - "category": "Web components", - "subCategory": "Settings and templates", - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Provide clear context:** Ensure merchants understand what the block contains and its purpose at a glance, without needing to expand or interact with it.\n- **Use the collapsed summary effectively:** Write concise summaries that give merchants key information when the block is collapsed.\n- **Structure content by priority:** Place the most important information at the top. Use collapsible sections, tabs, or progressive disclosure for secondary details." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- When your block's content exceeds 300px in height, Shopify automatically displays a **Show more** button. This button can't be removed or disabled. It's a core part of how admin blocks maintain page performance.\n- After merchants click **Show more**, blocks can expand up to their maximum allowed height. Content that exceeds this limit will be cut off.\n- When content's too large for the block, merchants see a link to view the full extension in your app. This ensures all content remains accessible.\n- Summaries longer than 30 characters will be automatically truncated.\n- During development, you'll see console warnings when your content exceeds height limits, helping you optimize your block's layout." - } - ], - "defaultExample": { - "image": "/assets/templated-apis-screenshots/admin/components/adminblock-example.png", - "description": "Display an inline block on an admin resource page. This example shows a simple block with a `heading` property and [text](/docs/api/admin-extensions/{API_VERSION}/web-components/typography-and-content/text) content.", - "codeblock": { - "title": "Display an inline admin block", - "tabs": [ - { - "title": "html", - "code": "<s-admin-block heading=\"My App Block\">\n <s-text>5 items active</s-text>\n</s-admin-block>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n 5 items active\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Provide a preview of the block content when it is collapsed. This example uses the `collapsed-summary` attribute to show a short [text](/docs/api/admin-extensions/{API_VERSION}/web-components/typography-and-content/text) summary in the block header.", - "codeblock": { - "title": "Show a collapsed summary", - "tabs": [ - { - "title": "html", - "code": "<s-admin-block heading=\"Loyalty rewards\" collapsed-summary=\"3 active rewards\">\n <s-stack direction=\"block\" gap=\"base\">\n <s-text>Gold tier — 10% off all orders</s-text>\n <s-text>Silver tier — 5% off orders over $50</s-text>\n <s-text>Bronze tier — Free shipping</s-text>\n </s-stack>\n</s-admin-block>\n", - "language": "html" - }, - { - "code": "\n \n Gold tier — 10% off all orders\n Silver tier — 5% off orders over $50\n Bronze tier — Free shipping\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Present structured data in rows and columns within a block. This example displays inventory levels across locations using a [table](/docs/api/admin-extensions/{API_VERSION}/web-components/layout-and-structure/table).", - "codeblock": { - "title": "Display a data table", - "tabs": [ - { - "title": "html", - "code": "<s-admin-block heading=\"Inventory levels\" collapsed-summary=\"4 locations\">\n <s-table>\n <s-table-header-row>\n <s-table-header>Location</s-table-header>\n <s-table-header>Available</s-table-header>\n <s-table-header>Committed</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>Main warehouse</s-table-cell>\n <s-table-cell>142</s-table-cell>\n <s-table-cell>38</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Retail store</s-table-cell>\n <s-table-cell>27</s-table-cell>\n <s-table-cell>5</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-admin-block>\n", - "language": "html" - }, - { - "code": "\n \n \n Location\n Available\n Committed\n \n \n \n Main warehouse\n 142\n 38\n \n \n Retail store\n 27\n 5\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Highlight key status information with visual indicators. This example shows an order risk assessment with a warning [badge](/docs/api/admin-extensions/{API_VERSION}/web-components/feedback-and-status-indicators/badge) and a list of risk factors.", - "codeblock": { - "title": "Show status with badges", - "tabs": [ - { - "title": "html", - "code": "<s-admin-block heading=\"Order risk assessment\" collapsed-summary=\"Medium risk\">\n <s-stack direction=\"block\" gap=\"base\">\n <s-stack direction=\"inline\" gap=\"small\">\n <s-badge tone=\"warning\">Medium risk</s-badge>\n <s-text>Score: 45 / 100</s-text>\n </s-stack>\n <s-divider></s-divider>\n <s-stack direction=\"block\" gap=\"small\">\n <s-text>Billing and shipping addresses differ</s-text>\n <s-text>First order from this customer</s-text>\n <s-text>IP location matches shipping country</s-text>\n </s-stack>\n </s-stack>\n</s-admin-block>\n", - "language": "html" - }, - { - "code": "\n \n \n Medium risk\n Score: 45 / 100\n \n \n \n Billing and shipping addresses differ\n First order from this customer\n IP location matches shipping country\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Include interactive buttons so merchants can take action directly from the block. This example shows subscription details with a [button group](/docs/api/admin-extensions/{API_VERSION}/web-components/actions/button-group) for pause and cancel actions.", - "codeblock": { - "title": "Add action buttons to a block", - "tabs": [ - { - "title": "html", - "code": "<s-admin-block heading=\"Subscription details\" collapsed-summary=\"Active · Monthly\">\n <s-stack direction=\"block\" gap=\"base\">\n <s-stack direction=\"block\" gap=\"small\">\n <s-text type=\"strong\">Premium Plan — $29.99/mo</s-text>\n <s-text>Next billing date: March 15, 2026</s-text>\n <s-text>Status: <s-badge tone=\"success\">Active</s-badge></s-text>\n </s-stack>\n <s-divider></s-divider>\n <s-button-group>\n <s-button>Pause subscription</s-button>\n <s-button tone=\"critical\">Cancel subscription</s-button>\n </s-button-group>\n </s-stack>\n</s-admin-block>\n", - "language": "html" - }, - { - "code": "\n \n \n Premium Plan — $29.99/mo\n Next billing date: March 15, 2026\n Status: Active\n \n \n \n Pause subscription\n Cancel subscription\n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - }, - "related": [] - }, - { - "name": "Admin print action", - "description": "The admin print action component specifies a URL for print operations in admin print action extensions. Use admin print action to define the print target when merchants trigger print actions from the Shopify admin, enabling custom print views optimized for physical or PDF printing.\n\nLearn how to [build an admin print action extension](/docs/apps/build/admin/actions-blocks/build-admin-print-action).", - "requires": "the [Print Action Extension API](/docs/api/admin-extensions/{API_VERSION}/target-apis/core-apis/print-action-extension-api).", - "thumbnail": "/assets/templated-apis-screenshots/admin/components/adminprintaction.png", - "isVisualComponent": true, - "type": "", - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the admin print action component.", - "type": "AdminPrintActionProps", - "typeDefinitions": { - "AdminPrintActionProps": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AdminPrintActionProps", - "description": "Configure the following properties on the admin print action component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "src", - "value": "string", - "description": "The URL of the document to preview and print. Supports HTML, PDF, and image formats. If not provided, the preview will show an empty state and the print button will be disabled.", - "isOptional": true - } - ], - "value": "export interface AdminPrintActionProps\n extends Pick {}" - } - } - } - ], - "category": "Web components", - "subCategory": "Settings and templates", - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use print-optimized URLs:** The URL should point to a page specifically designed for printing with print CSS stylesheets that hide navigation, adjust colors for readability, and set appropriate page dimensions.\n- **Test across print scenarios:** Verify output when printing to PDF, physical printers, and different paper sizes. Test with both color and black-and-white settings.\n- **Handle dynamic content:** If the print URL includes order-specific or time-sensitive data, ensure it's properly encoded in the URL parameters and accessible at print time.\n- **Validate URL accessibility:** Ensure the print URL is accessible to merchants. Check authentication requirements and that the page loads successfully before printing." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Only HTML, PDFs, and common web image formats (JPEG, PNG, GIF, WebP) are supported for the print source URL.\n- If the `src` property isn't provided, the preview will show an empty state and the print button will be disabled." - } - ], - "defaultExample": { - "image": "/assets/templated-apis-screenshots/admin/components/adminprintaction-example.png", - "description": "Set the print source URL for an admin print action extension. This example shows the component pointing to an external URL for printing.", - "codeblock": { - "title": "Set a print source URL", - "tabs": [ - { - "title": "html", - "code": "<s-admin-print-action src=\"https://example.com/orders/12345/packing-slip\"></s-admin-print-action>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Point directly to a PDF file for printing invoices or receipts. This example sets the `src` to a PDF URL that the browser renders in the print preview.", - "codeblock": { - "title": "Print a PDF document", - "tabs": [ - { - "title": "html", - "code": "<s-admin-print-action src=\"https://example.com/orders/12345/invoice.pdf\"></s-admin-print-action>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Build the print URL with query parameters to customize the output per order or template. This example passes order ID, template name, and locale as URL parameters.", - "codeblock": { - "title": "Use a dynamic print URL", - "tabs": [ - { - "title": "html", - "code": "<s-admin-print-action src=\"https://example.com/print?order=1042&template=packing-slip&locale=en\"></s-admin-print-action>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - } - ] - }, - "related": [] - }, - { - "name": "Avatar", - "description": "The avatar component displays profile images or initials for users, customers, and businesses in a compact visual format. Use avatar to represent people or entities throughout the interface, with automatic fallback to initials when images aren't available.\n\nAvatars support multiple sizes for different contexts and provide consistent color assignment for initials based on the name provided. For product or content preview images, use [thumbnail](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/thumbnail). For full-size images, use [image](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/image).", - "category": "Web components", - "subCategory": "Media and visuals", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/avatar.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Choose appropriate sizes**: Use smaller sizes for compact contexts like tables and lists, and larger sizes for profile pages where the person is the primary focus.\n- **Provide meaningful alt text**: Describe the avatar content like **Sarah Chen** or **Acme Corporation**, or use empty alt text if the name appears next to the avatar as text.\n- **Position near related content**: Place avatars adjacent to the names or entities they represent for clear associations in lists, tables, or cards." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Avatar images must be served from URLs accessible by the merchant's browser. If the image is hosted on a different domain, the server must include appropriate `Access-Control-Allow-Origin` headers or the image might fail to load.\n- Only standard web image formats (JPEG, PNG, GIF, WebP, SVG) are supported. Unsupported formats will fall back to initials.\n- The `initials` prop accepts a string that displays when no image is available. Characters beyond the first two might be truncated. Special characters, emojis, or non-Latin scripts might not render as expected." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the avatar component.", - "type": "Avatar", - "typeDefinitions": { - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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.", - "isOptional": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The avatar component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "AvatarEvents", - "typeDefinitions": { - "AvatarEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AvatarEvents", - "description": "The avatar component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "error", - "value": "OnErrorEventHandler", - "description": "A callback fired when the avatar image fails to load.\n\nLearn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "load", - "value": "CallbackEventListener | null", - "description": "A callback fired when the avatar image successfully loads.\n\nLearn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).", - "isOptional": true - } - ], - "value": "export interface AvatarEvents {\n /**\n * A callback fired when the avatar image successfully loads.\n *\n * Learn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).\n */\n load: CallbackEventListener | null = null;\n /**\n * A callback fired when the avatar image fails to load.\n *\n * Learn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).\n */\n error: OnErrorEventHandler = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "avatar-default.png", - "description": "Identify users visually when no profile image is available. This example displays an avatar with initials derived from a name.", - "codeblock": { - "title": "Display initials", - "tabs": [ - { - "title": "html", - "code": "<s-avatar alt=\"John Doe\" initials=\"JD\"></s-avatar>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Represent unknown users with a generic icon. This example displays a placeholder avatar when no initials or image are provided.", - "codeblock": { - "title": "Show a placeholder avatar", - "tabs": [ - { - "title": "html", - "code": "<s-avatar alt=\"Customer\"></s-avatar>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display profile photos with graceful error handling. This example presents an avatar with a source image that falls back to initials if the image fails to load.", - "codeblock": { - "title": "Load an image with fallback", - "tabs": [ - { - "title": "html", - "code": "<s-avatar\n src=\"/customers/profile-123.jpg\"\n initials=\"MR\"\n alt=\"Maria Rodriguez\"\n size=\"base\"\n></s-avatar>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Adapt avatar prominence to different UI contexts. This example demonstrates all five available sizes from `small-200` to `large-200`.", - "codeblock": { - "title": "Adjust the size", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-avatar initials=\"SC\" alt=\"Store customer\" size=\"small-200\"></s-avatar>\n <s-avatar initials=\"MR\" alt=\"Merchant representative\" size=\"small\"></s-avatar>\n <s-avatar initials=\"SM\" alt=\"Store manager\" size=\"base\"></s-avatar>\n <s-avatar initials=\"SF\" alt=\"Staff member\" size=\"large\"></s-avatar>\n <s-avatar initials=\"SO\" alt=\"Store owner\" size=\"large-200\"></s-avatar>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display initials of varying lengths consistently. This example presents avatars with two, three, and four character initials.", - "codeblock": { - "title": "Handle long names", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-avatar initials=\"TC\" alt=\"Tech customer\" size=\"base\"></s-avatar>\n <s-avatar initials=\"VIP\" alt=\"VIP customer store\" size=\"base\"></s-avatar>\n <s-avatar initials=\"SHOP\" alt=\"Shopify partner store\" size=\"base\"></s-avatar>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Ensure visual consistency across the interface. This example demonstrates that avatars with identical initials always display the same background color.", - "codeblock": { - "title": "Maintain color consistency", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-avatar initials=\"AB\" alt=\"Apparel boutique\" size=\"base\"></s-avatar>\n <s-avatar initials=\"CD\" alt=\"Coffee direct\" size=\"base\"></s-avatar>\n <s-avatar initials=\"EF\" alt=\"Electronics franchise\" size=\"base\"></s-avatar>\n <s-avatar initials=\"AB\" alt=\"Art books store\" size=\"base\"></s-avatar>\n <!-- Note: Both AB avatars will have the same color -->\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Show customer identities in list views. This example pairs avatars with customer names in a vertical stack layout.", - "codeblock": { - "title": "Display in a customer list", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-stack direction=\"inline\" gap=\"small\">\n <s-avatar\n src=\"/customers/merchant-alice.jpg\"\n initials=\"AJ\"\n alt=\"Alice's jewelry store\"\n size=\"small\"\n ></s-avatar>\n <s-text>Alice's jewelry store</s-text>\n </s-stack>\n <s-stack direction=\"inline\" gap=\"small\">\n <s-avatar initials=\"BP\" alt=\"Bob's pet supplies\" size=\"small\"></s-avatar>\n <s-text>Bob's pet supplies</s-text>\n </s-stack>\n <s-stack direction=\"inline\" gap=\"small\">\n <s-avatar\n src=\"/customers/charlie-cafe.jpg\"\n initials=\"CC\"\n alt=\"Charlie's coffee corner\"\n size=\"small\"\n ></s-avatar>\n <s-text>Charlie's coffee corner</s-text>\n </s-stack>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n Alice's jewelry store\n \n \n \n Bob's pet supplies\n \n \n \n Charlie's coffee corner\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Create a profile layout with multiple components. This example combines an avatar with [section](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/section), [heading](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/heading), and [text](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/text) components.", - "codeblock": { - "title": "Build a merchant profile card", - "tabs": [ - { - "title": "html", - "code": "<s-section>\n <s-stack gap=\"base\">\n <s-stack direction=\"inline\" gap=\"small\">\n <s-avatar\n src=\"/merchants/premium-store.jpg\"\n initials=\"PS\"\n alt=\"Premium store\"\n size=\"base\"\n ></s-avatar>\n <s-stack gap=\"small-400\">\n <s-heading>Premium store</s-heading>\n <s-text color=\"subdued\">Shopify Plus merchant</s-text>\n </s-stack>\n </s-stack>\n <s-text>Monthly revenue: $45,000</s-text>\n </s-stack>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n Premium store\n Shopify Plus merchant\n \n \n Monthly revenue: $45,000\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Badge", - "description": "The badge component displays status information or indicates completed actions through compact visual indicators. Use badge to communicate object states, order statuses, or system-generated classifications that help users quickly understand item conditions.\n\nBadges support multiple tones and sizes, with optional icons to reinforce status meaning and improve scannability in lists and tables. For user-created labels, categories, or tags, use [chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/chip) instead.", - "category": "Web components", - "subCategory": "Feedback and status indicators", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/badge.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Choose the right size:** Use `base` size in table cells, list items, or when showing multiple badges together. Use `large` size for standalone badges that need emphasis, like a primary status indicator at the top of a page.\n- **Keep labels to 1-2 words:** Use concise labels like **Fulfilled**, **Partially refunded**, or **Out of stock**. Always use past tense for status labels: **Refunded** not **Refund**.\n- **Use appropriate tones:** Apply `critical` for errors or urgent issues needing action, `warning` for problems requiring attention, `success` for positive confirmations, and `info` for neutral statuses. Use consistent tones for the same status across your app.\n- **Position in content flow:** Place badges adjacent to the items they describe. In list items, position them near the title. In tables, place them in their own column for scannability.\n- **Know when not to use badges:** Badges are static, system-generated indicators. Don't use badges for merchant-created tags or removable items." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Badge text truncates with an ellipsis when it exceeds the available width. Truncated text isn't accessible via tooltip, so keep labels concise.\n- Badge text never wraps to multiple lines. Long labels will truncate rather than expand the badge height.\n- Only specific predefined icons from the admin icon set are supported. Custom icons or images can't be used. The icon always appears to the left of the text and can't be repositioned." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the badge component.", - "type": "Badge", - "typeDefinitions": { - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The badge component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "BadgeSlots", - "typeDefinitions": { - "BadgeSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "BadgeSlots", - "description": "The badge component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text label displayed within the badge component, typically a short status indicator or category label.", - "isOptional": true - } - ], - "value": "export interface BadgeSlots {\n /**\n * The text label displayed within the badge component, typically a short status indicator or category label.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "badge-default.png", - "description": "Create badges with different tones to represent statuses. This example shows the tones `auto` (implicit default), `info`, `success`, `caution`, `warning`, and `critical`.", - "codeblock": { - "title": "Add status badges with tones", - "tabs": [ - { - "title": "html", - "code": "<s-badge>Fulfilled</s-badge>\n<s-badge tone=\"info\">Draft</s-badge>\n<s-badge tone=\"success\">Active</s-badge>\n<s-badge tone=\"caution\">Open</s-badge>\n<s-badge tone=\"warning\">On hold</s-badge>\n<s-badge tone=\"critical\">Action required</s-badge>\n", - "language": "html", - "editable": false - }, - { - "code": "
Fulfilled\nDraft\nActive\nOpen\nOn hold\nAction required\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Combine tones with icons to provide stronger visual cues. This example shows product and inventory status badges with icons that reinforce meaning.", - "codeblock": { - "title": "Add icons to status badges", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <!-- Product status -->\n <s-stack direction=\"inline\" gap=\"base\">\n <s-badge tone=\"success\" icon=\"view\">Active</s-badge>\n <s-badge tone=\"warning\" icon=\"clock\">Scheduled</s-badge>\n <s-badge tone=\"critical\">Archived</s-badge>\n </s-stack>\n\n <!-- Inventory status -->\n <s-stack direction=\"inline\" gap=\"base\">\n <s-badge tone=\"success\">In stock</s-badge>\n <s-badge tone=\"warning\" icon=\"alert-triangle\">Low stock</s-badge>\n <s-badge tone=\"critical\">Out of stock</s-badge>\n </s-stack>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n Active\n Scheduled\n Archived\n \n\n \n \n In stock\n Low stock\n Out of stock\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place badges inside [table cells](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/table) to give merchants a scannable overview of status information. This example shows fulfillment and payment badges in an order table.", - "codeblock": { - "title": "Display badges in a table", - "tabs": [ - { - "title": "html", - "code": "<s-table>\n <s-table-header-row>\n <s-table-header>Order</s-table-header>\n <s-table-header>Fulfillment</s-table-header>\n <s-table-header>Payment</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>#1001</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Fulfilled</s-badge>\n </s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Paid</s-badge>\n </s-table-cell>\n </s-table-row>\n </s-table-body>\n</s-table>\n", - "language": "html" - }, - { - "code": "\n \n Order\n Fulfillment\n Payment\n \n \n \n #1001\n \n Fulfilled\n \n \n Paid\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `size` property to create visual hierarchy between badges. This example shows the base size for standard usage and the large size for badges that need more prominence.", - "codeblock": { - "title": "Control badge size for emphasis", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-badge size=\"base\">New</s-badge>\n <s-badge size=\"large\">Attention needed</s-badge>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n New\n Attention needed\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Banner", - "description": "The banner component highlights important information or required actions prominently within the interface. Use banner to communicate statuses, provide feedback, draw attention to critical updates, or guide users toward necessary actions.\n\nBanners support multiple tones to convey urgency levels, optional actions for next steps, and can be positioned contextually within sections or page-wide at the top. For inline status indicators on individual items, use [badge](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/badge).", - "category": "Web components", - "subCategory": "Feedback and status indicators", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/banner.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Focus on single actions:** Present one piece of information or required action per banner to maintain clarity and prevent confusion.\n- **Keep messages concise:** Write scannable content that merchants can quickly understand without spending time deciphering meaning or next steps.\n- **Provide clear actions:** Info, warning, and critical banners should include a call to action with specific next steps so merchants know how to proceed.\n- **Make dismissible when appropriate:** Allow merchants to dismiss banners unless immediate action's required. Avoid persistent banners that can't be closed.\n- **Position contextually:** Place banners outside sections for page-wide messages or inside sections for contextual messages relevant to specific content." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The dismissed state doesn't persist across page loads or sessions. You must implement your own persistence logic using local storage, cookies, or server-side state.\n- Multiple banners stack vertically without built-in prioritization or queueing. If you show multiple banners at once, all appear simultaneously. You must implement banner queueing logic yourself to show one at a time.\n- Banners can't be fixed or sticky at the top of the viewport. They scroll with page content.\n- Banners don't have built-in truncation or \"read more\" functionality. Very long banner messages will wrap to multiple lines, creating tall banners that dominate the screen." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the banner component.", - "type": "Banner", - "typeDefinitions": { - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The banner component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "BannerEvents", - "typeDefinitions": { - "BannerEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "BannerEvents", - "description": "The banner component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "afterhide", - "value": "CallbackEventListener | null", - "description": "A callback fired after the banner is hidden.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "dismiss", - "value": "CallbackEventListener | null", - "description": "A callback fired when the banner is dismissed.", - "isOptional": true - } - ], - "value": "export interface BannerEvents {\n /**\n * A callback fired when the banner is dismissed.\n */\n dismiss: CallbackEventListener | null = null;\n /**\n * A callback fired after the banner is hidden.\n */\n afterhide: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The banner component supports slots for additional content placement within the banner. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "BannerSlots", - "typeDefinitions": { - "BannerSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "BannerSlots", - "description": "The banner component supports slots for additional content placement within the banner. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The main message content displayed within the banner component, providing important information or guidance to users.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "secondary-actions", - "value": "HTMLElement", - "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\"`.", - "isOptional": true - } - ], - "value": "export interface BannerSlots {\n /**\n * The main message content displayed within the banner component, providing important information or guidance to users.\n */\n children?: HTMLElement;\n /**\n * Action buttons displayed at the bottom of the banner that let users respond to the message.\n * Accepts up to two button components with `variant=\"secondary\"` or `variant=\"auto\"`.\n */\n 'secondary-actions'?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "banner-default.png", - "description": "Create an informational banner with a heading and body text. This example shows a basic banner communicating a status update that merchants can dismiss.", - "codeblock": { - "title": "Add a dismissible info banner", - "tabs": [ - { - "title": "html", - "code": "<s-banner heading=\"Order archived\" tone=\"info\" dismissible>\n This order was archived on March 7, 2017 at 3:12pm EDT.\n</s-banner>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n This order was archived on March 7, 2017 at 3:12pm EDT.\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use a warning-toned banner with secondary action [buttons](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) to highlight a problem and give merchants clear next steps. This example shows a shipping weight issue with links to review products and access a setup guide.", - "codeblock": { - "title": "Create a warning banner with buttons for next steps", - "tabs": [ - { - "title": "html", - "code": "<s-banner heading=\"127 products missing shipping weights\" tone=\"warning\">\n Products without weights may show inaccurate shipping rates, leading to\n checkout abandonment.\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n href=\"/admin/products?filter=missing-weights\"\n >\n Review products\n </s-button>\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n href=\"javascript:void(0)\"\n >\n Setup guide\n </s-button>\n</s-banner>\n", - "language": "html" - }, - { - "code": "\n Products without weights may show inaccurate shipping rates, leading to\n checkout abandonment.\n \n Review products\n \n \n Setup guide\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use a critical-toned banner to signal an urgent issue that requires immediate merchant action. This example shows a fraud review alert with [buttons](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) to review order details and adjust settings.", - "codeblock": { - "title": "Alert merchants to critical issues requiring action", - "tabs": [ - { - "title": "html", - "code": "<s-banner heading=\"Order #1024 flagged for fraud review\" tone=\"critical\">\n This order shows multiple risk indicators and cannot be auto-fulfilled. Review\n required within 24 hours to prevent automatic cancellation.\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n href=\"/admin/orders/1024/risk\"\n >\n Review order details\n </s-button>\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n href=\"/admin/settings/payments/fraud\"\n >\n Adjust fraud settings\n </s-button>\n</s-banner>\n", - "language": "html" - }, - { - "code": "\n This order shows multiple risk indicators and cannot be auto-fulfilled. Review\n required within 24 hours to prevent automatic cancellation.\n \n Review order details\n \n \n Adjust fraud settings\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use a success-toned banner with the `dismissible` property to confirm a completed operation. This example shows a product import confirmation that merchants can dismiss once acknowledged.", - "codeblock": { - "title": "Confirm a completed action with a dismissible banner", - "tabs": [ - { - "title": "html", - "code": "<s-banner heading=\"Products imported\" tone=\"success\" dismissible=\"true\">\n Successfully imported 50 products to your store.\n</s-banner>\n", - "language": "html" - }, - { - "code": "\n Successfully imported 50 products to your store.\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Box", - "description": "The box component provides a generic, flexible container for custom designs and layouts. Use box to apply styling like backgrounds, padding, borders, or border radius when existing components don't meet your needs, or to nest and group other components.\n\nBox contents maintain their natural size, making it especially useful within layout components that would otherwise stretch their children. For structured layouts, use [stack](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/stack) or [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid).", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/box.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for layout and grouping:** The component provides spacing, borders, and backgrounds for organizing content. When you need specific layout patterns like rows or columns, use [stack](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/stack) or [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid) instead. The component works best as a general-purpose container.\n- **Consider semantic alternatives first:** Before using the component, check whether a more specific component like [section](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/section) or [banner](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/banner) better describes your content's purpose. Semantic components provide better accessibility and clearer intent.\n- **Design for different screen sizes:** Layouts that work on desktop might not work on mobile. Use responsive properties to adjust spacing and layout based on available space rather than creating fixed layouts.\n- **Make interactive containers accessible:** When boxes contain interactive content or represent distinct regions, provide appropriate ARIA roles and labels so screen reader users can navigate and understand the interface structure.\n- **Avoid excessive nesting:** Deep nesting of boxes creates complex DOM structures and makes styling harder to manage. Look for opportunities to simplify your layout or use more appropriate layout components." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the box component.", - "type": "Box", - "typeDefinitions": { - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The box component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "BoxSlots", - "typeDefinitions": { - "BoxSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "BoxSlots", - "description": "The box component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the box component, which serves as a flexible container for organizing and styling other components.", - "isOptional": true - } - ], - "value": "export interface BoxSlots {\n /**\n * The content displayed within the box component, which serves as a flexible container for organizing and styling other components.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "box-default.png", - "description": "Create a container with padding and optional visual styling. This example shows a plain box and a styled box with background, border, and rounded corners.", - "codeblock": { - "title": "Add a content container", - "tabs": [ - { - "title": "html", - "code": "<s-box padding=\"base\">Available for iPad, iPhone, and Android.</s-box>\n\n<s-box padding=\"base\" background=\"subdued\" border=\"base\" borderRadius=\"base\">\n Available for iPad, iPhone, and Android.\n</s-box>\n", - "language": "html", - "editable": false - }, - { - "code": "
Available for iPad, iPhone, and Android.\n\n\n Available for iPad, iPhone, and Android.\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use responsive padding values with container queries to adapt spacing based on available width. This example shows a shipping notice that adjusts its padding depending on the container size.", - "codeblock": { - "title": "Adapt spacing with responsive padding", - "tabs": [ - { - "title": "html", - "code": "<s-query-container>\n <s-box\n padding=\"@container (inline-size > 400px) base, large-200\"\n background=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n >\n <s-paragraph>Your order will be processed within 2-3 business days</s-paragraph>\n </s-box>\n</s-query-container>", - "language": "html" - }, - { - "code": "\n 400px) base, large-200\"\n background=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n >\n Your order will be processed within 2-3 business days\n \n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `accessibilityRole` property to `status` to create a live region. When your code updates the text inside this box , screen readers automatically announce the new content. Use this for any content that updates dynamically.", - "codeblock": { - "title": "Announce dynamic updates with a live region", - "tabs": [ - { - "title": "html", - "code": "<s-box\n accessibilityRole=\"status\"\n padding=\"base\"\n background=\"strong\"\n borderRadius=\"base\"\n>\n <s-paragraph>Syncing inventory: 3 of 10 products updated</s-paragraph>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n Syncing inventory: 3 of 10 products updated\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `accessibilityVisibility` property to `exclusive` to hide content visually while keeping it available to screen readers. This example shows a box with pricing context that only assistive technology users can access.", - "codeblock": { - "title": "Add screen-reader-only content", - "tabs": [ - { - "title": "html", - "code": "<s-box accessibilityVisibility=\"exclusive\">\n <s-paragraph>Price includes tax and shipping</s-paragraph>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n Price includes tax and shipping\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Nest boxes to create hierarchical layouts with distinct visual sections. This example shows an inventory status section and a product sales section organized as cards within a vertical stack.", - "codeblock": { - "title": "Build nested card layouts", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <!-- Inventory status section -->\n <s-box\n padding=\"base\"\n background=\"base\"\n borderRadius=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n >\n <s-stack gap=\"base\">\n <s-box padding=\"small-100\" background=\"subdued\" borderRadius=\"small\">\n <s-paragraph>In stock: 45 units</s-paragraph>\n </s-box>\n <s-box padding=\"small-100\" background=\"subdued\" borderRadius=\"small\">\n <s-paragraph>Low stock alert: 5 units</s-paragraph>\n </s-box>\n </s-stack>\n </s-box>\n\n <!-- Product information section -->\n <s-box\n padding=\"base\"\n background=\"base\"\n borderRadius=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n >\n <s-stack gap=\"base\">\n <s-heading>Product sales</s-heading>\n <s-paragraph color=\"subdued\">No recent sales of this product</s-paragraph>\n <s-link>View details</s-link>\n </s-stack>\n </s-box>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n In stock: 45 units\n \n \n Low stock alert: 5 units\n \n \n \n\n \n \n \n Product sales\n No recent sales of this product\n View details\n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Button", - "description": "The button component triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use buttons to let users perform specific tasks or initiate interactions throughout the interface.\n\nButtons support various visual styles, tones, and interaction patterns to communicate intent and hierarchy. They can also function as links, guiding users to internal or external destinations. For navigation-focused interactions within text, use [link](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/link). For grouping multiple related buttons, use [button group](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button-group).", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/button.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Label buttons clearly:** Use strong, actionable verbs that clearly and accurately describe the action (like **Save**, **Edit**, or **Add tags**). Write labels in sentence case and avoid unnecessary words and articles (like **a**, **an**, **the**). Don't use punctuation.\n- **Use appropriate button tones:** Apply established button tones appropriately. Use critical tone only for destructive actions that are difficult or impossible to undo. Match the tone to the action's impact and importance.\n- **Establish clear hierarchy:** Prioritize the most important actions to avoid confusion. Use primary buttons for main actions, secondary buttons for supporting actions, and tertiary buttons for supplementary actions.\n- **Position consistently:** Place buttons in consistent locations throughout the interface to create predictable interaction patterns.\n- **Icon-only buttons:** For icon-only buttons, always use `accessibilityLabel` to describe the action for screen reader users." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- When using `href` for navigation, external URLs (domains outside Shopify admin) might be blocked or show security warnings depending on the extension context and merchant's browser security settings.\n- Setting `loading={true}` provides visual feedback and prevents form submission or multiple clicks. You must implement additional logic to debounce or disable the button action during async operations.\n- Icon-only buttons have a minimum touch target size but don't expand to fill available space. They maintain a fixed size based on the icon and padding, which might create layout inconsistencies if mixed with text buttons in the same container.\n- Disabled buttons (`disabled={true}`) are removed from the tab order and can't receive keyboard focus. If you disable a button temporarily (for example, while waiting for form validation), then provide visible text explaining why it's disabled. For async operations, use `loading` over `disabled` because `loading` communicates that an action is in progress." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the button component.", - "type": "Button", - "typeDefinitions": { - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The button component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ButtonEvents", - "typeDefinitions": { - "ButtonEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonEvents", - "description": "The button component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener | null", - "description": "A callback fired when the button loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "CallbackEventListener | null", - "description": "A callback fired when the button is clicked.\n\nLearn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener | null", - "description": "A callback fired when the button receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - } - ], - "value": "export interface ButtonEvents {\n /**\n * A callback fired when the button is clicked.\n *\n * Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).\n */\n click: CallbackEventListener | null = null;\n /**\n * A callback fired when the button loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener | null = null;\n /**\n * A callback fired when the button receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The button component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ButtonSlots", - "typeDefinitions": { - "ButtonSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonSlots", - "description": "The button component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The label text or elements displayed inside the button component, describing the action that will be performed when clicked.", - "isOptional": true - } - ], - "value": "export interface ButtonSlots {\n /**\n * The label text or elements displayed inside the button component, describing the action that will be performed when clicked.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "button-default.png", - "description": "Create a button with a text label to let merchants trigger an action. This example shows the basic button component with default styling.", - "codeblock": { - "title": "Add a basic button", - "tabs": [ - { - "title": "html", - "code": "<s-button>Save</s-button>\n", - "language": "html", - "editable": false - }, - { - "code": "
Save\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Create buttons for actions like saving, creating, or navigating. This example shows primary and secondary buttons with clear, action-oriented labels.", - "codeblock": { - "title": "Add primary and secondary buttons", - "tabs": [ - { - "title": "html", - "code": "<s-button variant=\"primary\">Add Product</s-button>\n<s-button variant=\"secondary\">Save Theme</s-button>\n", - "language": "html" - }, - { - "code": "Add Product\nSave Theme\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use variants to establish a clear visual hierarchy between primary, secondary, and supplementary actions. This example shows all four variant options: primary, secondary, tertiary, and auto.", - "codeblock": { - "title": "Set visual emphasis with variants", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button variant=\"primary\">Primary</s-button>\n <s-button variant=\"secondary\">Secondary</s-button>\n <s-button variant=\"tertiary\">Tertiary</s-button>\n <s-button variant=\"auto\">Auto</s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Primary\n Secondary\n Tertiary\n Auto\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Apply tones to signal the purpose and potential impact of an action through color. This example shows critical tone for destructive actions, neutral tone for less prominent actions, and the default auto tone.", - "codeblock": { - "title": "Communicate intent with tones", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button tone=\"critical\">Delete</s-button>\n <s-button tone=\"neutral\">Save draft</s-button>\n <s-button>Continue</s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Delete\n Save draft\n Continue\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Combine an icon with a text label to help merchants identify what a button does. This example shows a button with both a text label and an icon to reinforce the action.", - "codeblock": { - "title": "Add an icon alongside a text label", - "tabs": [ - { - "title": "html", - "code": "<s-button icon=\"plus\">Add product</s-button>\n", - "language": "html" - }, - { - "code": "Add product\n", - "language": "preview" - } - ] - } - }, - { - "description": "Create icon-only buttons to save space in dense interfaces like toolbars and action bars. This example shows multiple icon-only buttons with an `accessibilityLabel` for screen reader support.", - "codeblock": { - "title": "Create compact icon-only buttons for toolbars", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button\n icon=\"duplicate\"\n variant=\"tertiary\"\n accessibilityLabel=\"Duplicate product\"\n ></s-button>\n <s-button\n icon=\"view\"\n variant=\"tertiary\"\n accessibilityLabel=\"Preview product\"\n ></s-button>\n <s-button\n icon=\"menu-horizontal\"\n variant=\"tertiary\"\n accessibilityLabel=\"More actions\"\n ></s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add a loading state to prevent duplicate submissions and reassure merchants that an action is being processed. This example shows buttons with the loading prop across different variants.", - "codeblock": { - "title": "Show loading feedback during async operations", - "tabs": [ - { - "title": "html", - "code": "<!-- Product save operation -->\n<s-button loading variant=\"primary\">Saving product...</s-button>\n\n<!-- Bulk inventory update -->\n<s-button loading variant=\"secondary\">Updating 247 variants...</s-button>\n\n<!-- Order fulfillment -->\n<s-button loading tone=\"neutral\">Processing shipment...</s-button>\n", - "language": "html" - }, - { - "code": "\nSaving product...\n\n\nUpdating 247 variants...\n\n\nProcessing shipment...\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable buttons to prevent interaction when prerequisites are not met, and set type to submit to integrate with HTML forms. This example shows a disabled button alongside a submit button.", - "codeblock": { - "title": "Disable buttons and submit forms", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button disabled>Save draft</s-button>\n <s-button type=\"submit\" variant=\"primary\">Save product</s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Save draft\n Save product\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `href` property to make buttons navigate like links while maintaining button styling. This example shows internal navigation, opening external URLs in new tabs, and triggering file downloads.", - "codeblock": { - "title": "Use buttons for navigation and downloads", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button href=\"javascript:void(0)\">View products</s-button>\n <s-button href=\"javascript:void(0)\" target=\"_blank\">Help docs</s-button>\n <s-button href=\"javascript:void(0)\" download=\"sales-report.csv\">\n Export data\n </s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n View products\n Help docs\n \n Export data\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Pair a cancel button with a critical-toned action button to help merchants avoid accidental destructive operations. This example shows a confirmation pattern for deleting a resource.", - "codeblock": { - "title": "Confirm destructive actions with critical tone", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button variant=\"secondary\">Cancel</s-button>\n <s-button variant=\"primary\" tone=\"critical\">Delete variant</s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Cancel\n Delete variant\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use `commandFor` to connect a button to another component by ID, triggering built-in actions like toggling a popover or showing a modal. This example shows a button that opens a popover with a list of additional actions.", - "codeblock": { - "title": "Trigger actions on other components", - "tabs": [ - { - "title": "html", - "code": "<s-button commandFor=\"actions-popover\">More actions</s-button>\n\n<s-popover id=\"actions-popover\">\n <s-stack direction=\"block\">\n <s-button variant=\"tertiary\">Export products</s-button>\n <s-button variant=\"tertiary\">Import products</s-button>\n <s-button variant=\"tertiary\">Print labels</s-button>\n </s-stack>\n</s-popover>\n", - "language": "html" - }, - { - "code": "More actions\n\n\n \n Export products\n Import products\n Print labels\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Button group", - "description": "The button group component displays multiple related buttons in a structured layout. Use button group to organize action buttons together, creating clear visual hierarchies and helping users understand available options.\n\nButton groups support various layouts including segmented appearances for tightly related options like view switching or filter controls. For individual actions, use [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button).", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/buttongroup.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Group related actions:** Organize related calls to action together to create clear action hierarchies and help merchants understand available options.\n- **Maintain visual hierarchy:** Use primary variants for main actions and secondary or tertiary variants for supporting actions to guide merchant attention.\n- **Limit action count:** Avoid including too many buttons, which can overwhelm merchants and create decision paralysis.\n- **Use segmented appearance for toggles:** Apply the segmented appearance for tightly related options like view switching or filter controls.\n- **Separate destructive actions:** Position destructive actions appropriately and use critical tone to prevent accidental activation." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the button group component.", - "type": "ButtonGroup", - "typeDefinitions": { - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The button group component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ButtonGroupSlots", - "typeDefinitions": { - "ButtonGroupSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroupSlots", - "description": "The button group component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The buttons displayed within the button group component, which are arranged together as a cohesive set of related actions.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "primary-action", - "value": "HTMLElement", - "description": "The main action for this group, displayed with high visual emphasis. Accepts a single button with `variant=\"primary\"`.\n\nUse this for the primary action you want users to take. This can't be used when `gap=\"none\"`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "secondary-actions", - "value": "HTMLElement", - "description": "Supporting actions displayed with less emphasis than the primary action. Accepts one or more button components with `variant=\"secondary\"` or `variant=\"auto\"`.\n\nUse these for alternative or less critical actions.", - "isOptional": true - } - ], - "value": "export interface ButtonGroupSlots {\n /**\n * The buttons displayed within the button group component, which are arranged together as a cohesive set of related actions.\n */\n children?: HTMLElement;\n /**\n * The main action for this group, displayed with high visual emphasis.\n * Accepts a single button with `variant=\"primary\"`.\n *\n * Use this for the primary action you want users to take. This can't be used when `gap=\"none\"`.\n */\n 'primary-action'?: HTMLElement;\n /**\n * Supporting actions displayed with less emphasis than the primary action.\n * Accepts one or more button components with `variant=\"secondary\"` or `variant=\"auto\"`.\n *\n * Use these for alternative or less critical actions.\n */\n 'secondary-actions'?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "buttongroup-default.png", - "description": "Group related buttons together with a primary action and secondary options. This example shows a button group with a save button and a cancel button.", - "codeblock": { - "title": "Group a primary and secondary action", - "tabs": [ - { - "title": "html", - "code": "<s-button-group>\n <s-button slot=\"primary-action\">Save</s-button>\n <s-button slot=\"secondary-actions\">Cancel</s-button>\n</s-button-group>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Save\n Cancel\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Present multiple secondary actions for operating on selected items. This example shows archive, export, and delete buttons grouped together for bulk operations.", - "codeblock": { - "title": "Add bulk action buttons", - "tabs": [ - { - "title": "html", - "code": "<s-button-group>\n <s-button slot=\"secondary-actions\">Archive</s-button>\n <s-button slot=\"secondary-actions\">Export</s-button>\n <s-button slot=\"secondary-actions\" tone=\"critical\">Delete</s-button>\n</s-button-group>\n", - "language": "html" - }, - { - "code": "\n Archive\n Export\n Delete\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add icons to grouped buttons to help merchants identify each action. This example shows duplicate, archive, and delete buttons with icons.", - "codeblock": { - "title": "Add icons to grouped buttons", - "tabs": [ - { - "title": "html", - "code": "<s-button-group>\n <s-button slot=\"secondary-actions\" icon=\"duplicate\">Duplicate</s-button>\n <s-button slot=\"secondary-actions\" icon=\"archive\">Archive</s-button>\n <s-button slot=\"secondary-actions\" icon=\"delete\" tone=\"critical\">\n Delete\n </s-button>\n</s-button-group>\n", - "language": "html" - }, - { - "code": "\n Duplicate\n Archive\n \n Delete\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Remove the gap between buttons to create a segmented control for toggling between views or options. This example shows day, week, and month buttons joined together with no spacing.", - "codeblock": { - "title": "Create a segmented button group", - "tabs": [ - { - "title": "html", - "code": "<s-button-group gap=\"none\">\n <s-button slot=\"secondary-actions\">Day</s-button>\n <s-button slot=\"secondary-actions\">Week</s-button>\n <s-button slot=\"secondary-actions\">Month</s-button>\n</s-button-group>\n", - "language": "html" - }, - { - "code": "\n Day\n Week\n Month\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Pair a cancel button with a critical action for destructive confirmation flows. This example shows a cancel and delete button grouped together for a confirmation dialog.", - "codeblock": { - "title": "Confirm a destructive action", - "tabs": [ - { - "title": "html", - "code": "<s-button-group>\n <s-button slot=\"secondary-actions\">Cancel</s-button>\n <s-button slot=\"secondary-actions\" tone=\"critical\">Delete product</s-button>\n</s-button-group>\n", - "language": "html" - }, - { - "code": "\n Cancel\n Delete product\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Checkbox", - "description": "The checkbox component provides a clear way for users to make selections, such as agreeing to terms, enabling settings, or choosing multiple items from a list. Use checkbox to create binary on/off controls or multi-select interfaces where users can select any combination of options.\n\nCheckboxes support labels, help text, error states, and an indeterminate state for \"select all\" functionality when working with grouped selections. For settings that take effect immediately, use [switch](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/switch) instead.", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/checkbox.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Ensure independence**: Each checkbox should work independently from others, allowing merchants to select any combination of options.\n- **Always include labels**: Provide descriptive labels when checkboxes activate or deactivate settings to ensure clarity.\n- **Order logically**: List checkboxes in a logical sequence like alphabetical, numerical, or time-based to help merchants find options easily.\n- **Use indeterminate state appropriately**: Apply the indeterminate state for \"select all\" functionality when only some items in a group are selected.\n- **Provide help text**: Include descriptive details text to give additional context about checkbox options when needed." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the checkbox component.", - "type": "Checkbox", - "typeDefinitions": { - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked.", - "isOptional": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The checkbox component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "CheckboxEvents", - "typeDefinitions": { - "CheckboxEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "CheckboxEvents", - "description": "The checkbox component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the checkbox value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the checkbox.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface CheckboxEvents {\n /**\n * A callback fired when the checkbox value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the checkbox.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "checkbox-default.png", - "description": "Let users toggle a single option on or off. This example displays a checkbox with a label and helper text providing additional context.", - "codeblock": { - "title": "Select an option", - "tabs": [ - { - "title": "html", - "code": "<s-checkbox\n label=\"Require a confirmation step\"\n details=\"Ensure all criteria are met before proceeding\"\n></s-checkbox>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Indicate partial selection in bulk actions. This example displays a \"select all\" checkbox in an indeterminate state when some items are checked.", - "codeblock": { - "title": "Show an indeterminate state", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"small\">\n <s-checkbox\n label=\"Select all items\"\n indeterminate\n ></s-checkbox>\n <s-divider></s-divider>\n <s-checkbox label=\"Item 1\" checked></s-checkbox>\n <s-checkbox label=\"Item 2\"></s-checkbox>\n <s-checkbox label=\"Item 3\"></s-checkbox>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate when a required selection is missing. This example displays an error message when the terms checkbox isn't checked.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-checkbox\n label=\"I agree to the terms\"\n error=\"You must accept the terms to continue\"\n></s-checkbox>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Indicate when an option isn't available. This example presents a disabled checkbox with helper text explaining how to enable it.", - "codeblock": { - "title": "Show a disabled checkbox", - "tabs": [ - { - "title": "html", - "code": "<s-checkbox\n label=\"Advanced settings\"\n disabled\n details=\"Contact your administrator to enable advanced settings\"\n></s-checkbox>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Organize related options together. This example groups multiple checkboxes in a settings panel with individual helper text.", - "codeblock": { - "title": "Group multiple checkboxes", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-checkbox label=\"Show only published products\" checked></s-checkbox>\n <s-checkbox\n label=\"Enable inventory tracking\"\n details=\"Track inventory levels and receive low stock alerts\"\n checked\n ></s-checkbox>\n <s-checkbox\n label=\"View customer data\"\n details=\"Allow staff to access customer contact information and order history\"\n ></s-checkbox>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Provide immediate feedback on required selections. This example demonstrates validation with an error message when the checkbox is unchecked.", - "codeblock": { - "title": "Validate in real time", - "tabs": [ - { - "title": "html", - "code": "<s-section>\n <s-stack gap=\"base\" justifyContent=\"start\">\n <s-text-field label=\"Name\"></s-text-field>\n <s-checkbox\n label=\"I agree to the terms\"\n error=\"You must accept the terms to continue\"\n ></s-checkbox>\n </s-stack>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Chip", - "description": "The chip component displays static labels, categories, or attributes that help classify and organize content. Use chip to show product tags, categories, or metadata near the items they describe, helping users identify items with similar properties.\n\nChips support multiple visual variants for different levels of emphasis and can include icons to provide additional visual context. For system-generated status indicators, use [badge](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/badge). For interactive or removable chips, use [clickable chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/clickable-chip).", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/chip.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use chips to label and categorize content:** Chip works best for displaying tags, statuses, and categories that help merchants quickly understand content attributes. Don't use chips for actions—they're visual indicators, not buttons. For interactive or dismissible chips, use [clickable chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/clickable-chip) instead.\n- **Keep chip text concise and scannable:** Short labels like \"Featured\" or \"On sale\" are instantly recognizable. Long chip text defeats the purpose of quick scanning and might truncate, hiding important information.\n- **Choose the right visual weight:** Use subdued chips for secondary metadata, standard chips for typical tags and categories, and strong chips for important or verified information that needs emphasis.\n- **Position chips near what they describe:** Place chips adjacent to the items they categorize for immediate context. In lists, position chips consistently to help merchants scan efficiently.\n- **Add icons to reinforce meaning:** Icons can make chip meanings clearer at a glance, especially for status indicators or commonly recognized categories." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Chip text is single-line only and truncates with an ellipsis when space is limited. There's no built-in way to show the full text on hover or through tooltips.\n- Only predefined style variants are available. Custom colors, borders, or backgrounds can't be applied to chips.\n- Icons in chips must come from the standard icon library. Custom icons, images, or other graphics aren't supported." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the chip component.", - "type": "Chip", - "typeDefinitions": { - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ChipSlots", - "typeDefinitions": { - "ChipSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChipSlots", - "description": "The chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text label displayed within the chip component, typically representing a selected filter, tag, or removable item.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "graphic", - "value": "HTMLElement", - "description": "An optional icon to display at the start of the chip. Accepts only icon components.", - "isOptional": true - } - ], - "value": "export interface ChipSlots {\n /**\n * The text label displayed within the chip component, typically representing a selected filter, tag, or removable item.\n */\n children?: HTMLElement;\n /**\n * An optional icon to display at the start of the chip. Accepts only icon components.\n */\n graphic?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "chip-default.png", - "description": "Create a chip with a text label to categorize or tag content. This example shows the basic chip component with default styling.", - "codeblock": { - "title": "Add a basic chip", - "tabs": [ - { - "title": "html", - "code": "<s-chip color=\"base\" accessibilityLabel=\"Product status\">Active</s-chip>\n", - "language": "html", - "editable": false - }, - { - "code": "
Active\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use color variants to control the visual emphasis of chips. This example shows `subdued` chips for secondary metadata, `base` chips for standard tags, and `strong` chips for important information.", - "codeblock": { - "title": "Set visual weight with color variants", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-chip color=\"subdued\" accessibilityLabel=\"Secondary information\">\n Draft\n </s-chip>\n <s-chip color=\"base\" accessibilityLabel=\"Standard information\">\n Published\n </s-chip>\n <s-chip color=\"strong\" accessibilityLabel=\"Important status\">\n <s-icon slot=\"graphic\" type=\"check\" size=\"small\"></s-icon>\n Verified\n </s-chip>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Draft\n \n \n Published\n \n \n \n Verified\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Combine an icon with a text label to make chip meanings clearer. This example shows a chip with an icon in the graphic slot to visually reinforce the category.", - "codeblock": { - "title": "Add an icon to reinforce meaning", - "tabs": [ - { - "title": "html", - "code": "<s-chip color=\"strong\" accessibilityLabel=\"Product category\">\n <s-icon slot=\"graphic\" type=\"catalog-product\" size=\"small\"></s-icon>\n Electronics\n</s-chip>\n", - "language": "html" - }, - { - "code": "\n \n Electronics\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display chips with long labels in constrained spaces. This example shows how chip text automatically truncates with an ellipsis when the content exceeds the container width.", - "codeblock": { - "title": "Handle long text with truncation", - "tabs": [ - { - "title": "html", - "code": "<s-box maxInlineSize=\"200px\">\n <s-stack gap=\"base\">\n <s-chip color=\"base\" accessibilityLabel=\"Long product name\">\n This is a very long product name that will be truncated with ellipsis when\n it exceeds the container width\n </s-chip>\n <s-chip color=\"strong\" accessibilityLabel=\"Long category name\">\n <s-icon slot=\"graphic\" type=\"catalog-product\" size=\"small\"></s-icon>\n Electronics and computer accessories category with extended description\n </s-chip>\n </s-stack>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n \n This is a very long product name that will be truncated with ellipsis when\n it exceeds the container width\n \n \n \n Electronics and computer accessories category with extended description\n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Choice list", - "description": "The choice list component presents multiple options for single or multiple selections. Use it when merchants need to choose from a defined set of options, such as filtering results or collecting preferences.\n\nThe component supports both single selection (radio button behavior) and multiple selection (checkbox behavior) modes. It includes configurable labels, help text, and validation. For compact dropdown selection with four or more options, use [select](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/select).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/choicelist.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Choose appropriate selection modes:** Use single selection for mutually exclusive options like payment methods or shipping speeds. Enable `multiple` when merchants can select more than one.\n- **Write clear, specific labels:** Use choice labels that describe the outcome, like **Email notifications for new orders** rather than just **Email**. Keep labels concise but descriptive enough that merchants understand each option without additional explanation.\n- **Write clear titles:** Use titles that pose a clear question or statement, like **Which shipping method?** or **Select notification preferences**. Avoid vague titles like **Options** or **Settings**.\n- **Add context to complex choices:** Use the `details` slot on individual choices (for example, ``) to explain implications when needed.\n- **Provide actionable validation:** Show specific error messages like **Please select at least one notification preference** rather than generic **Required field**." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't include search, filtering, or lazy loading. For large option sets (20+ choices), consider using a [select](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/select) dropdown instead.\n- Rendering 50+ checkboxes or radio buttons can cause noticeable performance issues, especially on mobile devices. Consider pagination, virtualization, or alternative UI patterns for large lists.\n- The component is either single-selection (radio buttons) or multiple-selection (checkboxes) for all choices. You can't mix both types in the same list.\n- Component types other than choice can't be used as options within the choice list." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the choice list component.", - "type": "ChoiceList", - "typeDefinitions": { - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@11434", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected.", - "isOptional": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The choice list component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ChoiceListEvents", - "typeDefinitions": { - "ChoiceListEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceListEvents", - "description": "The choice list component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener | null", - "description": "A callback fired when the choice list selection changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener | null", - "description": "A callback fired when the user inputs data into the choice list.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface ChoiceListEvents {\n /**\n * A callback fired when the choice list selection changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener | null = null;\n /**\n * A callback fired when the user inputs data into the choice list.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "type": "Choice", - "typeDefinitions": { - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\".", - "isOptional": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The choice list component supports slots for additional content placement within each choice. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ChoiceSlots", - "typeDefinitions": { - "ChoiceSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceSlots", - "description": "The choice list component supports slots for additional content placement within each choice. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The label text or elements that identify this selectable choice to users.\n\nThe label is produced by extracting and concatenating the text nodes from the provided content; any markup or element structure is ignored.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "details", - "value": "HTMLElement", - "description": "Additional text to provide context or guidance for the input.\n\nThis text is displayed along with the input and its label to offer more information or instructions to the user.", - "isOptional": true - } - ], - "value": "export interface ChoiceSlots {\n /**\n * The label text or elements that identify this selectable choice to users.\n *\n * The label is produced by extracting and\n * concatenating the text nodes from the provided content;\n * any markup or element structure is ignored.\n */\n children?: HTMLElement;\n /**\n * Additional text to provide context or guidance for the input.\n *\n * This text is displayed along with the input and its label\n * to offer more information or instructions to the user.\n *\n * @implementation this content should be linked to the input with an `aria-describedby` attribute.\n */\n details?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "choicelist-default.png", - "description": "Present a group of options for merchants to choose from using radio buttons. This example shows a single-select choice list component with a label, help text, and an `onChange` handler.", - "codeblock": { - "title": "Add a single-select choice list", - "tabs": [ - { - "title": "html", - "code": "<script>\n const handleChange = (event) =>\n console.log('Values: ', event.currentTarget.values);\n</script>\n<s-choice-list\n label=\"Company name\"\n name=\"Company name\"\n details=\"The company name will be displayed on the checkout page.\"\n onChange=\"handleChange(event)\"\n>\n <s-choice value=\"hidden\">Hidden</s-choice>\n <s-choice value=\"optional\">Optional</s-choice>\n <s-choice value=\"required\">Required</s-choice>\n</s-choice-list>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n\n Hidden\n Optional\n Required\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Set a default selection so merchants see a pre-selected option when the form loads. This example shows a single-select choice list with one option already selected.", - "codeblock": { - "title": "Pre-select a default option", - "tabs": [ - { - "title": "html", - "code": "<s-choice-list label=\"Product visibility\" name=\"visibility\">\n <s-choice value=\"hidden\">Hidden</s-choice>\n <s-choice value=\"optional\">Optional</s-choice>\n <s-choice value=\"required\" selected>Required</s-choice>\n</s-choice-list>\n", - "language": "html" - }, - { - "code": "\n Hidden\n Optional\n Required\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Allow merchants to select more than one option using checkboxes instead of radio buttons. This example shows a multi-select choice list with descriptive details on each option.", - "codeblock": { - "title": "Enable multiple selections with details", - "tabs": [ - { - "title": "html", - "code": "<s-choice-list label=\"Checkout options\" name=\"checkout\" multiple>\n <s-choice value=\"shipping\" selected>\n Use the shipping address as the billing address by default\n <s-text slot=\"details\">\n Reduces the number of fields required to check out. The billing address\n can still be edited.\n </s-text>\n </s-choice>\n <s-choice value=\"confirmation\">\n Require a confirmation step\n <s-text slot=\"details\">\n Customers must review their order details before purchasing.\n </s-text>\n </s-choice>\n</s-choice-list>\n", - "language": "html" - }, - { - "code": "\n \n Use the shipping address as the billing address by default\n \n Reduces the number of fields required to check out. The billing address\n can still be edited.\n \n \n \n Require a confirmation step\n \n Customers must review their order details before purchasing.\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display an error message when a selection is invalid or a required choice has not been made. This example shows a choice list with a static error message.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-choice-list\n label=\"Product visibility\"\n error=\"Please select an option\"\n>\n <s-choice value=\"hidden\">Hidden</s-choice>\n <s-choice value=\"optional\">Optional</s-choice>\n <s-choice value=\"required\">Required</s-choice>\n</s-choice-list>\n", - "language": "html" - }, - { - "code": "\n Hidden\n Optional\n Required\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable a choice list to prevent interaction while keeping the current selection visible. This example shows a disabled choice list with a pre-selected option.", - "codeblock": { - "title": "Disable a choice list", - "tabs": [ - { - "title": "html", - "code": "<s-choice-list label=\"Account type\" name=\"account-type\" disabled>\n <s-choice value=\"basic\" selected>Basic</s-choice>\n <s-choice value=\"advanced\">Advanced</s-choice>\n <s-choice value=\"enterprise\">Enterprise</s-choice>\n</s-choice-list>\n", - "language": "html" - }, - { - "code": "\n Basic\n Advanced\n Enterprise\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Clickable", - "description": "The clickable component wraps content to make it interactive and clickable. Use it when you need more styling control than [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) or [link](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/link) provide, such as custom backgrounds, padding, or borders around your clickable content.\n\nClickable supports button, link, and submit modes with built-in accessibility properties for keyboard navigation and screen reader support.", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/clickable.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Provide accessibility labels:** Always include `accessibilityLabel` for elements without visible text to ensure screen reader users understand the element's purpose.\n- **Choose appropriate modes:** Use button mode for triggering actions, link mode for navigation, and submit mode for form submissions.\n- **Indicate disabled state:** When disabling clickable elements, provide clear visual feedback and explanatory text about why the element's unavailable." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the clickable component.", - "type": "Clickable", - "typeDefinitions": { - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'", - "isOptional": true - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The clickable component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ClickableEvents", - "typeDefinitions": { - "ClickableEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableEvents", - "description": "The clickable component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener | null", - "description": "A callback fired when the component loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "CallbackEventListener | null", - "description": "A callback fired when the component is clicked.\n\nLearn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener | null", - "description": "A callback fired when the component receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - } - ], - "value": "export interface ClickableEvents {\n /**\n * A callback fired when the component is clicked.\n *\n * Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).\n */\n click: CallbackEventListener | null = null;\n /**\n * A callback fired when the component loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener | null = null;\n /**\n * A callback fired when the component receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The clickable component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ClickableSlots", - "typeDefinitions": { - "ClickableSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableSlots", - "description": "The clickable component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the clickable component, which makes any content interactive and clickable without the semantic meaning of a button or link.", - "isOptional": true - } - ], - "value": "export interface ClickableSlots {\n /**\n * The content displayed within the clickable component, which makes any content interactive and clickable without the semantic meaning of a button or link.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "clickable-default.png", - "description": "Build custom interactive elements with flexible styling that [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) or [link](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/link) don't support. This example shows two clickable elements with different background and border styles.", - "codeblock": { - "title": "Create a custom interactive element", - "tabs": [ - { - "title": "html", - "code": "<s-clickable padding=\"base\">Create Store</s-clickable>\n\n<s-clickable\n border=\"base\"\n padding=\"base\"\n background=\"subdued\"\n borderRadius=\"base\"\n>\n View Shipping Settings\n</s-clickable>\n", - "language": "html", - "editable": false - }, - { - "code": "
Create Store\n\n\n View Shipping Settings\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Set the `href` property to make a clickable element navigate like a link. This example shows a clickable component that opens a URL in a new browser tab.", - "codeblock": { - "title": "Navigate to a URL", - "tabs": [ - { - "title": "html", - "code": "<s-clickable href=\"javascript:void(0)\" target=\"_blank\">\n Visit Shopify\n</s-clickable>\n", - "language": "html" - }, - { - "code": "\n Visit Shopify\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use a clickable component as a form submit button with a disabled state to prevent premature submission. This example shows a disabled submit-type clickable component with a border and padding.", - "codeblock": { - "title": "Create a form submit button", - "tabs": [ - { - "title": "html", - "code": "<s-clickable type=\"submit\" disabled border=\"base\" padding=\"base\">\n Save changes\n</s-clickable>\n", - "language": "html" - }, - { - "code": "\n Save changes\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add a clickable button alongside descriptive content in a section. This example shows a styled clickable button inside a box with a heading and description.", - "codeblock": { - "title": "Add a clickable action to a section", - "tabs": [ - { - "title": "html", - "code": "<s-box padding=\"large-400\" background=\"base\" borderRadius=\"small-200\">\n <s-stack gap=\"large-300\">\n <s-heading>Product settings</s-heading>\n <s-text>Configure your product inventory and pricing settings.</s-text>\n <s-clickable background=\"base\" padding=\"base\" borderRadius=\"small\">\n <s-text type=\"strong\">Configure settings</s-text>\n </s-clickable>\n </s-stack>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n Product settings\n Configure your product inventory and pricing settings.\n \n Configure settings\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add an accessibility label to provide screen readers with more context than the visible text alone. This example shows a clickable delete button with a descriptive label for assistive technologies.", - "codeblock": { - "title": "Add an accessibility label", - "tabs": [ - { - "title": "html", - "code": "<s-clickable\n accessibilityLabel=\"Delete product winter collection jacket\"\n background=\"base\"\n padding=\"base\"\n borderRadius=\"small\"\n>\n <s-text>Delete</s-text>\n</s-clickable>\n", - "language": "html" - }, - { - "code": "\n Delete\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable a clickable link while providing an accessibility label that explains why the feature is unavailable. This example shows a disabled navigation element with a descriptive label for screen readers.", - "codeblock": { - "title": "Describe a disabled link with an accessibility label", - "tabs": [ - { - "title": "html", - "code": "<s-clickable\n href=\"javascript:void(0)\"\n disabled\n accessibilityLabel=\"This link is currently unavailable\"\n>\n <s-text>Unavailable feature</s-text>\n</s-clickable>\n", - "language": "html" - }, - { - "code": "\n Unavailable feature\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Clickable chip", - "description": "The clickable chip component displays interactive labels or categories that users can click or remove. Use clickable chip to show filter tags, selected options, or merchant-created labels that users need to interact with or dismiss.\n\nClickable chips support multiple visual variants, optional icons, and can function as both clickable buttons and removable tags for flexible interaction patterns. For non-interactive labels, use [chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/chip).", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/clickable-chip.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Keep labels to 1-3 words:** Aim for labels like **Electronics**, **Summer sale**, or **Clearance items**.\n- **Choose color variants by importance:** Use `subdued` for less important or secondary chips, `base` (default) for standard selections, and `strong` to emphasize primary or active selections.\n- **Make remove action clear:** When chips are removable, ensure the remove button's visible and has clear hover/focus states.\n- **Group related chips together:** Use an inline [stack](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/stack) to arrange multiple chips horizontally with consistent spacing." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the clickable chip component.", - "type": "ClickableChip", - "typeDefinitions": { - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The clickable chip component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ClickableChipEvents", - "typeDefinitions": { - "ClickableChipEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChipEvents", - "description": "The clickable chip component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "afterhide", - "value": "CallbackEventListener | null", - "description": "A callback fired after the chip is hidden.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "CallbackEventListener | null", - "description": "A callback fired when the chip is clicked.\n\nLearn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "remove", - "value": "CallbackEventListener | null", - "description": "A callback fired when the chip is removed.", - "isOptional": true - } - ], - "value": "export interface ClickableChipEvents {\n /**\n * A callback fired when the chip is clicked.\n *\n * Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).\n */\n click: CallbackEventListener | null = null;\n /**\n * A callback fired when the chip is removed.\n */\n remove: CallbackEventListener | null = null;\n /**\n * A callback fired after the chip is hidden.\n */\n afterhide: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The clickable chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ClickableChipSlots", - "typeDefinitions": { - "ClickableChipSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChipSlots", - "description": "The clickable chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text label displayed within the chip, which represents an interactive filter, tag, or selectable item.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "graphic", - "value": "HTMLElement", - "description": "An optional icon to display at the start of the chip. Accepts only icon components.", - "isOptional": true - } - ], - "value": "export interface ClickableChipSlots {\n /**\n * The text label displayed within the chip, which represents an interactive filter, tag, or selectable item.\n */\n children?: HTMLElement;\n /**\n * An optional icon to display at the start of the chip. Accepts only icon components.\n */\n graphic?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "clickablechip-default.png", - "description": "Create an interactive chip that merchants can click to trigger an action. This example shows a clickable chip component with default styling.", - "codeblock": { - "title": "Add a clickable chip with default styling", - "tabs": [ - { - "title": "html", - "code": "<s-clickable-chip>Clickable chip</s-clickable-chip>\n", - "language": "html", - "editable": false - }, - { - "code": "
Clickable chip\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `color` property to visually distinguish chips by importance or category. This example shows three chips with `base`, `subdued`, and `strong` color variants.", - "codeblock": { - "title": "Apply color variants to chips", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-clickable-chip color=\"base\" accessibilityLabel=\"Filter by active products\">\n Active\n </s-clickable-chip>\n <s-clickable-chip\n color=\"subdued\"\n accessibilityLabel=\"Filter by draft products\"\n >\n Draft\n </s-clickable-chip>\n <s-clickable-chip\n color=\"strong\"\n accessibilityLabel=\"Filter by archived products\"\n >\n Archived\n </s-clickable-chip>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Active\n \n \n Draft\n \n \n Archived\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add an icon and a remove button so merchants can see the status and dismiss the chip. This example shows a removable chip with a check circle icon in the graphic slot.", - "codeblock": { - "title": "Add an icon and a remove button to a chip", - "tabs": [ - { - "title": "html", - "code": "<s-clickable-chip\n color=\"strong\"\n accessibilityLabel=\"Remove status filter\"\n removable\n>\n <s-icon slot=\"graphic\" type=\"check-circle\"></s-icon>\n In progress\n</s-clickable-chip>\n", - "language": "html" - }, - { - "code": "\n \n In progress\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `href` property to make a chip link to another page when clicked. This example shows a subdued chip with a product icon that acts as a link.", - "codeblock": { - "title": "Use a chip as a link", - "tabs": [ - { - "title": "html", - "code": "<s-clickable-chip\n color=\"subdued\"\n href=\"javascript:void(0)\"\n accessibilityLabel=\"View T-shirt product\"\n>\n <s-icon slot=\"graphic\" type=\"product\"></s-icon>\n T-shirt\n</s-clickable-chip>\n", - "language": "html" - }, - { - "code": "\n \n T-shirt\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable a chip to prevent interaction while keeping it visible. This example shows a disabled chip with an accessibility label explaining the inactive state.", - "codeblock": { - "title": "Disable a clickable chip", - "tabs": [ - { - "title": "html", - "code": "<s-clickable-chip\n color=\"base\"\n disabled\n accessibilityLabel=\"Status filter (disabled)\"\n>\n Inactive\n</s-clickable-chip>\n", - "language": "html" - }, - { - "code": "\n Inactive\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Color field", - "description": "The color field component allows users to select colors through an integrated color picker or direct text input. Use color field for theme colors, brand colors, or any color selection to provide both visual and text-based color input methods.\n\nColor fields support hex color codes, color preview swatches, and validation to ensure users select or enter valid color values. For a standalone visual color palette interface without text input, use [color picker](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/color-picker).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/color-field.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Label by specific purpose:** Use labels that describe exactly what the color affects (**Button background color**, **Heading text color**, or **Border accent color** rather than generic **Color**).\n- **Pre-populate when editing:** Always show the current color value when editing existing settings so merchants understand what they're changing from." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component always outputs values in hex format. While it accepts multiple input formats (hex, RGB, HSL), the `change` event emits values in hex: 6-digit (`#RRGGBB`) or 8-digit with alpha (`#RRGGBBAA`)." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the color field component.", - "type": "ColorField", - "typeDefinitions": { - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format.", - "isOptional": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The color field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ColorFieldEvents", - "typeDefinitions": { - "ColorFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorFieldEvents", - "description": "The color field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the color field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the color field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the color field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the color field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface ColorFieldEvents {\n /**\n * A callback fired when the color field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the color field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the color field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the color field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "color-field-default.png", - "description": "Display a labeled color field with a pre-selected hex value.", - "codeblock": { - "title": "Pick a color", - "tabs": [ - { - "title": "html", - "code": "<s-color-field\n label=\"Brand color\"\n value=\"#FF0000\"\n></s-color-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Identify the color field's purpose clearly. This example displays a labeled color field with a name attribute for form submission.", - "codeblock": { - "title": "Add a label", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field label=\"Brand color\" name=\"color\" value=\"#FF0000\"></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Ensure users provide a color value before submitting. This example presents a required color field that must have a value.", - "codeblock": { - "title": "Mark as required", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field label=\"Brand color\" value=\"#FF0000\" required></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Allow selection of semi-transparent colors. This example displays a color field with alpha enabled, presenting an RGBA value with 50% opacity.", - "codeblock": { - "title": "Enable alpha transparency", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field\n label=\"Background color\"\n value=\"rgba(255, 0, 0, 0.5)\"\n alpha\n ></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate color format problems clearly. This example demonstrates an error message when an invalid hex code is entered.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field\n label=\"Brand color\"\n name=\"brandColor\"\n value=\"#invalid\"\n error=\"Please enter a valid color format (hex, rgb, or rgba)\"\n required\n ></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Guide users on how the color will be used. This example adds helper text beneath the field explaining the color's purpose.", - "codeblock": { - "title": "Add helper text", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field\n label=\"Primary color\"\n value=\"#1a73e8\"\n details=\"Main brand color used for buttons and links\"\n ></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Show a color value without allowing changes. This example presents a read-only color field displaying a locked value.", - "codeblock": { - "title": "Show a read-only field", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field label=\"System color\" name=\"color\" value=\"#1a73e8\" readOnly></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Build a complete theme customization interface. This example combines multiple color fields for primary, secondary, and overlay colors with helper text.", - "codeblock": { - "title": "Combine multiple fields in a form", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-section>\n <s-heading>Theme settings</s-heading>\n <s-stack gap=\"base\">\n <s-color-field\n label=\"Primary brand color\"\n name=\"primaryColor\"\n value=\"#1a73e8\"\n defaultValue=\"#1a73e8\"\n details=\"This color will be used for buttons, links, and brand elements\"\n required\n ></s-color-field>\n <s-color-field\n label=\"Secondary color\"\n name=\"secondaryColor\"\n value=\"#34a853\"\n details=\"Used for secondary actions and accents\"\n ></s-color-field>\n <s-color-field\n label=\"Background overlay\"\n name=\"overlayColor\"\n value=\"rgba(0, 0, 0, 0.5)\"\n alpha\n details=\"Background color for modal overlays and dropdowns\"\n ></s-color-field>\n </s-stack>\n </s-section>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Theme settings\n \n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Provide immediate feedback on color format validity. This example demonstrates real-time validation that checks hex format as the user types.", - "codeblock": { - "title": "Validate in real time", - "tabs": [ - { - "title": "html", - "code": "<s-section>\n <s-stack gap=\"base\" justifyContent=\"start\">\n <s-text-field label=\"Theme name\"></s-text-field>\n <s-color-field\n label=\"Brand color\"\n name=\"Color\"\n value=\"#invalid\"\n error=\"Please enter a valid color format\"\n required\n ></s-color-field>\n </s-stack>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Color picker", - "description": "The color picker component allows users to select colors from a visual color palette interface. Use color picker to provide an intuitive, visual way for users to choose colors for themes, branding, or design customization.\n\nColor pickers support multiple color formats, predefined color swatches, and interactive selection to make color choice easy and accurate. For combined visual and text-based color input with validation, use [color field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/color-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/color-picker.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Initialize with current values:** When editing existing colors, always set the picker's initial value to the current color. This shows merchants what they're changing from and maintains context.\n- **Show preview of final result:** If possible, show how the selected color will look in its actual context (like previewing a button color on a button) alongside the picker.\n- **Pair with color field for precision:** Use the component for visual selection combined with a [color field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/color-field) for precise hex input. This gives merchants both visual intuition and exact control." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The 2D color gradient area requires mouse/touch interaction. Keyboard users can only navigate between major UI elements (hue slider, alpha slider) but can't make fine-grained color adjustments in the gradient itself.\n- The picker operates in the HSL color space and outputs values in hex format. Colors from other color spaces (like CMYK or LAB) might not be precisely represented, and might shift during conversion.\n- On touch devices, selecting precise colors in the gradient can be difficult due to finger size obscuring the selection point. The picker works best with mouse or stylus input for fine color selection." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the color picker component.", - "type": "ColorPicker", - "typeDefinitions": { - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@11535", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format.", - "isOptional": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The color picker component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ColorPickerEvents", - "typeDefinitions": { - "ColorPickerEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPickerEvents", - "description": "The color picker component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener | null", - "description": "A callback fired when the color picker value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener | null", - "description": "A callback fired when the user inputs data into the color picker.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface ColorPickerEvents {\n /**\n * A callback fired when the color picker value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener | null = null;\n /**\n * A callback fired when the user inputs data into the color picker.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "color-picker-default.png", - "description": "Display the default color picker with hue and saturation controls.", - "codeblock": { - "title": "Pick a color", - "tabs": [ - { - "title": "html", - "code": "<s-color-picker value=\"#FF0000\"></s-color-picker>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Allow users to select semi-transparent colors. This example displays a color picker with an alpha slider for adjusting opacity levels.", - "codeblock": { - "title": "Enable alpha transparency", - "tabs": [ - { - "title": "html", - "code": "<s-box padding=\"large\" border=\"base\" borderRadius=\"base\">\n <s-color-picker\n value=\"#FF0000FF\"\n alpha\n name=\"color-with-alpha\"\n ></s-color-picker>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Date field", - "description": "The date field component captures date input with a consistent interface for date selection and proper validation. Use it to collect date information in forms, scheduling interfaces, or data entry workflows.\n\nThe component supports manual text entry. For visual calendar-based selection, consider using [date picker](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/date-picker).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/datefield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use smart defaults:** Pre-populate fields with sensible dates when editing existing data or suggesting common selections.\n- **Restrict dates appropriately:** Use the `allow` and `disallow` properties to restrict selectable dates for your use case (like only future dates for scheduling or only weekdays for business operations).\n- **Explain date constraints:** Use the `details` property to clarify requirements like \"Select a date within the next 30 days\" or \"Must be a future date.\"\n- **Write actionable error messages:** Provide clear validation messages for invalid dates that help merchants correct their input." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the date field component.", - "type": "DateField", - "typeDefinitions": { - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`.", - "isOptional": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The date field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "DateFieldEvents", - "typeDefinitions": { - "DateFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateFieldEvents", - "description": "The date field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the date field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the date field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the date field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the date field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "invalid", - "value": "CallbackEventListener | null", - "description": "A callback fired when the date field value is invalid.\n\nLearn more about the [invalid event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "viewchange", - "value": "CallbackEventListener | null", - "description": "A callback fired when the calendar view changes (such as when navigating between months).", - "isOptional": true - } - ], - "value": "export interface DateFieldEvents {\n /**\n * A callback fired when the date field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the date field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the date field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the date field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n /**\n * A callback fired when the calendar view changes (such as when navigating between months).\n */\n viewchange: CallbackEventListener | null = null;\n /**\n * A callback fired when the date field value is invalid.\n *\n * Learn more about the [invalid event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event).\n */\n invalid: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "datefield-default.png", - "description": "Add a date field to let merchants select a date using a built-in calendar picker. This example shows a basic date field with a default view and pre-selected value.", - "codeblock": { - "title": "Add a basic date field", - "tabs": [ - { - "title": "html", - "code": "<s-date-field defaultView=\"2025-09\" defaultValue=\"2025-09-01\"></s-date-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Collect a date from merchants with a labeled input and placeholder text. This example shows a date field configured with a label, name, and placeholder.", - "codeblock": { - "title": "Collect a date with a label and placeholder", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Order date\"\n name=\"orderDate\"\n placeholder=\"Select date\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Pre-populate a date field so merchants can review or edit a provided date. This example shows a date field with a value already set.", - "codeblock": { - "title": "Pre-populate with an existing date", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Shipping date\"\n name=\"shippingDate\"\n value=\"2024-03-15\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Restrict which days of the week merchants can select, such as excluding weekends. This example shows a date field that only allows weekday selections.", - "codeblock": { - "title": "Restrict selectable days of the week", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Delivery date\"\n name=\"deliveryDate\"\n disallowDays=\"[0, 6]\"\n details=\"Delivery available Monday through Friday only\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Limit selection to a specific set of dates, such as available appointment slots. This example shows a date field that only allows dates from a predefined list.", - "codeblock": { - "title": "Allow only specific dates", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Available appointment dates\"\n name=\"appointmentDate\"\n allow='[\"2024-03-20\", \"2024-03-22\", \"2024-03-25\", \"2024-03-27\"]'\n details=\"Select from available time slots\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display an error message when a required date is missing or an invalid date is entered. This example shows a date field with a static error and the required attribute.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Event date\"\n name=\"eventDate\"\n required\n error=\"Select a valid event date\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Prevent editing by making a date field read-only or fully disabled. This example shows a read-only field for viewing a creation date and a disabled field for an archived date.", - "codeblock": { - "title": "Disable or make a date field read-only", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-date-field\n label=\"Creation date\"\n name=\"createdDate\"\n value=\"2024-01-01\"\n readOnly\n ></s-date-field>\n\n <s-date-field\n label=\"Archived date\"\n name=\"archivedDate\"\n value=\"2024-02-15\"\n disabled\n ></s-date-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Combine date fields with other form elements like text fields and buttons. This example shows a complete order form with a required date, a weekday-restricted delivery date, and a submit button.", - "codeblock": { - "title": "Use date fields in a form", - "tabs": [ - { - "title": "html", - "code": "<form>\n <s-stack gap=\"base\">\n <s-text-field\n label=\"Customer name\"\n name=\"customerName\"\n required\n ></s-text-field>\n\n <s-date-field\n label=\"Order date\"\n name=\"orderDate\"\n value=\"2024-03-15\"\n required\n ></s-date-field>\n\n <s-date-field\n label=\"Requested delivery date\"\n name=\"deliveryDate\"\n disallowDays=\"[0, 6]\"\n details=\"Weekdays only\"\n ></s-date-field>\n\n <s-button type=\"submit\" variant=\"primary\">Process order</s-button>\n </s-stack>\n</form>\n", - "language": "html" - }, - { - "code": "
\n \n \n\n \n\n \n\n Process order\n \n
\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Pair two date fields to let merchants define a start and end date for a range. This example shows side-by-side date fields for selecting a report period.", - "codeblock": { - "title": "Select a date range with two fields", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-heading>Sales report period</s-heading>\n\n <s-stack direction=\"inline\" gap=\"base\">\n <s-date-field\n label=\"Start date\"\n name=\"startDate\"\n id=\"report-start\"\n ></s-date-field>\n\n <s-date-field\n label=\"End date\"\n name=\"endDate\"\n id=\"report-end\"\n ></s-date-field>\n </s-stack>\n\n <s-button variant=\"primary\">Generate report</s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Sales report period\n\n \n \n\n \n \n\n Generate report\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Validate a date field in real time and update the error message as the merchant interacts. This example shows a required date field that clears its error once a valid date is selected.", - "codeblock": { - "title": "Validate a date field dynamically", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Event date\"\n name=\"eventDate\"\n required\n error=\"Select a valid event date\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Date picker", - "description": "The date picker component allows merchants to select dates using a calendar interface. Use it when merchants benefit from seeing dates in context of the full month, such as selecting dates relative to today or needing weekday context.\n\nThe component supports single dates, multiple dates, and date ranges. For text date entry, use [date field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/date-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/datepicker.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use smart defaults:** Pre-populate the picker with sensible dates to speed up the selection process.\n- **Provide quick selections:** Offer preset date options for common selections (like **Today**, **Last 7 days**, or **This month**) to improve usability.\n- **Use date ranges when appropriate:** Enable range selection mode when merchants need to select start and end dates for reports, analytics, or time-based filters.\n- **Restrict dates appropriately:** Use the `allow` and `disallow` properties to prevent selection of invalid dates for your specific use case.\n- **Provide adequate space:** Ensure sufficient spacing around the picker to avoid interfering with on-screen keyboards or other interactive elements.\n- **Consider alternatives for distant dates:** Navigating month-by-month becomes impractical for dates more than a few years away. For dates outside a 5-10 year range, consider providing date presets or manual year input." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the date picker component.", - "type": "DatePicker", - "typeDefinitions": { - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@11579", - "value": "boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@11578", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`.", - "isOptional": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The date picker component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "DatePickerEvents", - "typeDefinitions": { - "DatePickerEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePickerEvents", - "description": "The date picker component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener | null", - "description": "A callback fired when the date picker loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener | null", - "description": "A callback fired when the date picker value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener | null", - "description": "A callback fired when the date picker receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener | null", - "description": "A callback fired when the user inputs data into the date picker.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "viewchange", - "value": "CallbackEventListener | null", - "description": "A callback fired when the calendar view changes, such as when navigating between months.", - "isOptional": true - } - ], - "value": "export interface DatePickerEvents {\n /**\n * A callback fired when the calendar view changes, such as when navigating between months.\n */\n viewchange: CallbackEventListener | null = null;\n /**\n * A callback fired when the date picker receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener | null = null;\n /**\n * A callback fired when the date picker loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener | null = null;\n /**\n * A callback fired when the user inputs data into the date picker.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener | null = null;\n /**\n * A callback fired when the date picker value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "datepicker-default.png", - "description": "Add a calendar picker for selecting a date or date range. This example shows a range-type date picker with a pre-selected date range and a specific month view.", - "codeblock": { - "title": "Add a date range picker", - "tabs": [ - { - "title": "html", - "code": "<s-date-picker\n view=\"2025-05\"\n type=\"range\"\n value=\"2025-05-28--2025-05-31\"\n></s-date-picker>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Configure the picker for single date selection when merchants need to choose one specific date. This example shows a single-type date picker with a pre-selected date and month view.", - "codeblock": { - "title": "Select a single date", - "tabs": [ - { - "title": "html", - "code": "<s-date-picker\n type=\"single\"\n name=\"delivery-date\"\n value=\"2024-01-15\"\n view=\"2024-01\"\n></s-date-picker>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Restrict which dates merchants can select by defining an allowed range. This example shows a date picker that blocks past dates and limits selection to a specific month.", - "codeblock": { - "title": "Restrict selectable dates to a range", - "tabs": [ - { - "title": "html", - "code": "<!-- Disable past dates and far future dates -->\n<s-date-picker\n type=\"single\"\n name=\"appointment-date\"\n disallow=\"past\"\n allow=\"2024-06-01--2024-06-31\"\n view=\"2024-06\"\n></s-date-picker>\n", - "language": "html" - }, - { - "code": "\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Capture the selected date when the merchant makes a change so you can update your app state. This example shows a range picker inside a form with an `onChange` handler that stores the selected value.", - "codeblock": { - "title": "Capture date selections with onChange", - "tabs": [ - { - "title": "html", - "code": "<form>\n <s-text-field\n label=\"Order number\"\n placeholder=\"Search orders...\"\n ></s-text-field>\n <s-date-picker\n type=\"range\"\n name=\"order-date-range\"\n value=\"2024-01-01--2024-01-31\"\n view=\"2024-01\"\n ></s-date-picker>\n <s-button type=\"submit\">Apply filters</s-button>\n</form>\n", - "language": "html" - }, - { - "code": "
\n \n \n Apply filters\n\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Add preset buttons so merchants can quickly select common date ranges like \"Last 7 days\" or \"This month.\" This example shows a range picker with quick-selection buttons that programmatically update the selected value.", - "codeblock": { - "title": "Add quick preset date range buttons", - "tabs": [ - { - "title": "html", - "code": "<!-- Quick date selection with onChange callback -->\n<s-stack gap=\"base\">\n <s-button-group>\n <s-button slot=\"secondary-actions\" id=\"last-7-days\">Last 7 days</s-button>\n <s-button slot=\"secondary-actions\" id=\"last-30-days\">Last 30 days</s-button>\n <s-button slot=\"secondary-actions\" id=\"this-month\">This month</s-button>\n </s-button-group>\n <s-date-picker\n type=\"range\"\n name=\"analytics-period\"\n id=\"analytics-picker\"\n value=\"2025-01-01--2025-01-31\"\n view=\"2025-01\"\n onchange=\"console.log('Date range changed:', event.currentTarget.value)\"\n ></s-date-picker>\n <s-text id=\"selected-range\">\n Selected range: 2025-01-01--2025-01-31\n </s-text>\n</s-stack>\n\n<script>\n const picker = document.getElementById('analytics-picker');\n const display = document.getElementById('selected-range');\n\n // Handle picker changes\n picker.addEventListener('change', (event) => {\n display.textContent = `Selected range: ${event.currentTarget.value}`;\n });\n\n // Quick selection buttons\n document.getElementById('last-7-days').addEventListener('click', () => {\n picker.value = '2025-01-07--2025-01-13';\n display.textContent = 'Selected range: 2025-01-07--2025-01-13';\n });\n\n document.getElementById('last-30-days').addEventListener('click', () => {\n picker.value = '2024-12-14--2025-01-13';\n display.textContent = 'Selected range: 2024-12-14--2025-01-13';\n });\n\n document.getElementById('this-month').addEventListener('click', () => {\n picker.value = '2025-01-01--2025-01-31';\n display.textContent = 'Selected range: 2025-01-01--2025-01-31';\n });\n</script>\n", - "language": "html" - }, - { - "code": "\n\n \n Last 7 days\n Last 30 days\n This month\n \n \n \n Selected range: 2025-01-01--2025-01-31\n \n\n\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Divider", - "description": "The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping users scan and understand content organization.\n\nDividers support both horizontal and vertical orientations, along with different visual strengths for varying levels of emphasis. For more structured content grouping with headings, use [section](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/section).", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for truly distinct boundaries:** Dividers work best when separating fundamentally different content sections. Overusing dividers creates visual clutter and makes interfaces feel fragmented. Consider whether whitespace alone could achieve the same grouping.\n- **Match visual weight to hierarchy:** The divider's prominence should reflect the importance of the separation. Major section breaks can support stronger visual dividers, while minor groupings need subtler separation or just whitespace.\n- **Align with layout direction:** The divider's orientation should match your content flow. A horizontal divider between vertically stacked items or a vertical divider between horizontally arranged items creates clear, predictable separation.\n- **Prefer whitespace for subtle grouping:** Whitespace often provides cleaner visual grouping than dividers. Before adding a divider, try using spacing properties on your layout components. Dividers should enhance clarity, not replace thoughtful spacing." - } - ], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/divider.png", - "isVisualComponent": true, - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the divider component.", - "type": "Divider", - "typeDefinitions": { - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - } - ], - "defaultExample": { - "image": "divider-default.png", - "description": "Create a horizontal divider to visually separate content sections. This example shows the default divider with base color and inline direction.", - "codeblock": { - "title": "Add a horizontal divider", - "tabs": [ - { - "title": "html", - "code": "<s-divider></s-divider>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `color` property to display a more prominent divider that marks a major section break. This example shows a strong-colored divider for increased visual emphasis.", - "codeblock": { - "title": "Increase visual emphasis with a strong divider", - "tabs": [ - { - "title": "html", - "code": "<s-divider color=\"strong\"></s-divider>\n", - "language": "html" - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `direction` property to create a vertical divider between horizontally arranged items. This example shows a vertical divider separating text items in an inline stack.", - "codeblock": { - "title": "Create a vertical divider between inline items", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-text>Item 1</s-text>\n <s-divider direction=\"block\"></s-divider>\n <s-text>Item 2</s-text>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Item 1\n \n Item 2\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place a divider between groups of form fields to visually distinguish related sections. This example shows a divider separating store details from contact information fields.", - "codeblock": { - "title": "Separate form sections with a divider", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-text-field label=\"Store name\"></s-text-field>\n <s-text-field label=\"Description\"></s-text-field>\n <s-divider></s-divider>\n <s-text-field label=\"Email address\"></s-text-field>\n <s-text-field label=\"Phone number\"></s-text-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Drop zone", - "description": "The drop zone component lets users upload files through drag-and-drop or by clicking to browse. Use for file uploads such as images, documents, or CSV imports.\n\nThe component provides visual feedback during drag operations and supports file type validation through the `accept` property. Rejected files trigger the `droprejected` event for custom error handling.", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/dropzone.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- Set clear file type and size restrictions using the `accept` property.\n- Use the `droprejected` event to display meaningful error messages when uploads fail validation.\n- Consider using `disabled` to prevent uploads during processing." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- File size validation must be handled in your event handler; the component only validates file types.\n- The `change` event provides the file list but does not automatically upload files.\n- Multiple file selection requires the `multiple` attribute to be set." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the drop zone component.", - "type": "DropZone", - "typeDefinitions": { - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@11616", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@11615", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@11614", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''", - "isOptional": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The drop zone component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "DropZoneEvents", - "typeDefinitions": { - "DropZoneEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZoneEvents", - "description": "The drop zone component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener", - "description": "A callback fired when the drop zone value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "droprejected", - "value": "CallbackEventListener", - "description": "A callback fired when a dropped file is rejected due to file type or size restrictions.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener", - "description": "A callback fired when the user inputs data into the drop zone.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface DropZoneEvents {\n /**\n * A callback fired when the drop zone value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener = null;\n /**\n * A callback fired when the user inputs data into the drop zone.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener = null;\n /**\n * A callback fired when a dropped file is rejected due to file type or size restrictions.\n */\n droprejected: CallbackEventListener = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "description": "Let users upload files by dragging or clicking to browse. This example creates a basic upload area with default prompts.", - "codeblock": { - "title": "Accept file uploads", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone\n label=\"Upload\"\n accessibilityLabel=\"Upload image of type jpg, png, or gif\"\n accept=\".jpg,.png,.gif\"\n multiple\n onInput=\"console.log('onInput', event.currentTarget?.value)\"\n onChange=\"console.log('onChange', event.currentTarget?.value)\"\n onDropRejected=\"console.log('onDropRejected', event.currentTarget?.value)\"\n></s-drop-zone>\n", - "language": "html", - "editable": false - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Accept multiple files in a single interaction. This example uses the `multiple` attribute with a custom label.", - "codeblock": { - "title": "Allow multiple file uploads", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone label=\"Drop files to upload\" multiple></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Preview uploaded images before submission. This example generates thumbnails after file selection.", - "codeblock": { - "title": "Upload images", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone accept=\"image/*\" label=\"Upload images\" multiple></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Ensure files are provided before form submission. This example enforces validation using the `required` attribute.", - "codeblock": { - "title": "Require file upload", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone name=\"file\" required label=\"Upload file\"></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Block uploads while files are being processed. This example demonstrates the `disabled` state during an active upload.", - "codeblock": { - "title": "Disable uploads during processing", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone label=\"Upload not available\" disabled></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Accept only specific file formats. This example restricts uploads to PDF and DOC files using the `accept` property.", - "codeblock": { - "title": "Restrict file types", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone\n accept=\".pdf,.doc,.docx\"\n label=\"Upload documents\"\n multiple\n></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate why an upload failed. This example displays error messaging when files are rejected.", - "codeblock": { - "title": "Show upload errors", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone\n label=\"Upload file\"\n error=\"File size must be less than 5mb\"\n></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Support screen reader users with clear labels. This example configures custom accessibility announcements.", - "codeblock": { - "title": "Configure accessibility labels", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone\n label=\"Upload files\"\n accessibilityLabel=\"Upload files using drag and drop or file selector\"\n labelAccessibilityVisibility=\"exclusive\"\n multiple\n></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - }, - { - "title": "Complete workflow", - "examples": [ - { - "description": "Handle the complete upload lifecycle with validation and feedback. This example combines type and size validation, error states, and disabled state during processing.", - "codeblock": { - "title": "Upload with validation", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone \n id=\"upload\" \n label=\"Product images\" \n accept=\"image/*\" \n multiple\n></s-drop-zone>\n\n<script>\n const dropzone = document.getElementById('upload');\n\n dropzone.addEventListener('change', async (e) => {\n const files = e.currentTarget.files;\n\n // Validate size (5MB max per file)\n const maxSize = 5 * 1024 * 1024;\n if (files.some(f => f.size > maxSize)) {\n dropzone.error = 'Files must be under 5MB';\n return;\n }\n dropzone.error = '';\n\n // Disable during upload\n dropzone.disabled = true;\n\n const formData = new FormData();\n files.forEach(f => formData.append('images[]', f));\n\n try {\n await fetch('/api/upload', { method: 'POST', body: formData });\n dropzone.value = ''; // Clear for next upload\n // Show success feedback\n } catch (error) {\n dropzone.error = 'Upload failed. Please try again.';\n } finally {\n dropzone.disabled = false;\n }\n });\n\n dropzone.addEventListener('droprejected', () => {\n dropzone.error = 'Only image files are accepted';\n });\n</script>\n", - "language": "html" - }, - { - "code": "\n\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Email field", - "description": "The email field component captures email address input. Use it to collect email information in forms, customer profiles, or contact workflows.\n\nEmail field doesn't perform automatic email validation. Implement your own validation logic, and use the `error` property to display validation results. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/emailfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Write descriptive labels:** Use specific labels like **Customer Email**, **Receipt Email Address**, or **Order Notification Email** rather than generic **Email** or **Email Address**.\n- **Provide context in details:** Use `details` for additional context like \"Required for digital receipts\" or \"We'll send order updates to this address.\"\n- **Show format examples in placeholders:** Use placeholders like **you@example.com** or **support@yourstore.com** to demonstrate expected format, but don't repeat the label text.\n- **Write actionable error messages:** Provide clear validation messages like \"Please enter a valid email address\" or \"Email must include @ symbol\" that help merchants correct their input." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Email addresses can't exceed 254 characters total per RFC 5321. Setting `maxLength` higher than 254 allows values that will fail during email delivery.\n- Different browsers implement email validation differently. Always validate email format server-side for critical functionality." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the email field component.", - "type": "EmailField", - "typeDefinitions": { - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.", - "isOptional": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The email field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "EmailFieldEvents", - "typeDefinitions": { - "EmailFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailFieldEvents", - "description": "The email field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the email field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the email field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the email field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the email field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface EmailFieldEvents {\n /**\n * A callback fired when the email field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the email field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the email field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the email field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "emailfield-default.png", - "description": "Collect an email address from merchants with a labeled input and helper text. This example shows a basic email field with a placeholder and details text.", - "codeblock": { - "title": "Add a basic email field", - "tabs": [ - { - "title": "html", - "code": "<s-email-field\n label=\"Email\"\n placeholder=\"bernadette.lapresse@jadedpixel.com\"\n details=\"Used for sending notifications\"\n></s-email-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Display an error message and help text to guide merchants toward entering a valid email. This example shows a required email field with both a details hint and an error message.", - "codeblock": { - "title": "Show an error with help text", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-email-field\n label=\"Contact email\"\n details=\"We'll send your order confirmation here\"\n error=\"Please enter a valid email address\"\n required\n ></s-email-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display an existing email address that merchants can see but not edit. This example shows a read-only email field with a pre-filled value.", - "codeblock": { - "title": "Make an email field read-only", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-email-field\n label=\"Account email\"\n value=\"user@example.com\"\n readOnly\n ></s-email-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable an email field to prevent all interaction while keeping the value visible. This example shows a disabled field with a pre-filled email address.", - "codeblock": { - "title": "Disable an email field", - "tabs": [ - { - "title": "html", - "code": "<s-email-field\n label=\"Account email\"\n value=\"admin@example.com\"\n disabled\n></s-email-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set minimum and maximum character lengths to add validation beyond the standard email format check. This example shows a required email field with minLength and maxLength constraints.", - "codeblock": { - "title": "Set character length constraints", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-email-field\n label=\"Business email\"\n minLength=\"5\"\n maxLength=\"100\"\n required\n ></s-email-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Form", - "description": "The form component wraps form controls and enables implicit submission, allowing users to submit from any input by pressing **Enter**. Use form to group related input fields and handle form submission through JavaScript event handlers.\n\nUnlike HTML forms, form doesn't automatically submit data using HTTP—you must register a `submit` event to process form data programmatically. For Shopify Functions configuration forms, use [function settings](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/function-settings).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/form.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Group related fields logically:** Organize fields by category or workflow step so merchants can complete forms efficiently.\n- **Validate with specific error messages:** Instead of **Invalid input**, provide actionable feedback like **Email must include @ symbol** or **Password must be at least 8 characters**.\n- **Mark required fields clearly:** Use the `required` property and show validation errors only after user interaction or submission attempt.\n- **Choose field types that match data:** Use [email field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/email-field) for emails, [number field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/number-field) for quantities, and [date field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/date-field) for dates to provide appropriate keyboards and pickers.\n- **Provide submission feedback:** Show loading states during processing and clear success or error messages after completion. Prevent duplicate submissions while processing.\n- **Handle unsaved changes:** For long or complex forms, consider auto-saving drafts or prompting before navigation when changes exist." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Unlike native HTML forms, the component doesn't automatically submit data using HTTP. You must register a `submit` event handler to process form data programmatically." - } - ], - "definitions": [ - { - "title": "Events", - "description": "The form component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "FormEvents", - "typeDefinitions": { - "FormEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FormEvents", - "description": "The form component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "reset", - "value": "CallbackEventListener | null", - "description": "A callback that is run when the form is reset.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "submit", - "value": "CallbackExtendableEventListener | null", - "description": "A callback that is run when the form is submitted.", - "isOptional": true - } - ], - "value": "export interface FormEvents {\n /**\n * A callback that is run when the form is submitted.\n */\n submit: CallbackExtendableEventListener | null = null;\n /**\n * A callback that is run when the form is reset.\n */\n reset: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - }, - "CallbackExtendableEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackExtendableEventListener", - "value": "(EventListener & {\n (event: CallbackExtendableEvent): void;\n }) | null", - "description": "A function that handles extendable events from UI components. This type represents an event listener callback that can use `waitUntil` to extend the event lifetime.", - "isPublicDocs": true - }, - "CallbackExtendableEvent": { - "filePath": "src/surfaces/admin/components.ts", - "name": "CallbackExtendableEvent", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "AT_TARGET", - "value": "2", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "bubbles", - "value": "boolean", - "description": "The **`bubbles`** read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/bubbles)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "BUBBLING_PHASE", - "value": "3", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "cancelable", - "value": "boolean", - "description": "The **`cancelable`** read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelable)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "cancelBubble", - "value": "boolean", - "description": "The **`cancelBubble`** property of the Event interface is deprecated.", - "deprecationMessage": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelBubble)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "CAPTURING_PHASE", - "value": "1", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "composed", - "value": "boolean", - "description": "The read-only **`composed`** property of the or not the event will propagate across the shadow DOM boundary into the standard DOM.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composed)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "composedPath", - "value": "() => EventTarget[]", - "description": "The **`composedPath()`** method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composedPath)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "currentTarget", - "value": "EventTarget | null", - "description": "The **`currentTarget`** read-only property of the Event interface identifies the element to which the event handler has been attached.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "defaultPrevented", - "value": "boolean", - "description": "The **`defaultPrevented`** read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/defaultPrevented)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "eventPhase", - "value": "number", - "description": "The **`eventPhase`** read-only property of the being evaluated.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/eventPhase)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "initEvent", - "value": "(type: string, bubbles?: boolean, cancelable?: boolean) => void", - "description": "The **`Event.initEvent()`** method is used to initialize the value of an event created using Document.createEvent().", - "deprecationMessage": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/initEvent)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "isTrusted", - "value": "boolean", - "description": "The **`isTrusted`** read-only property of the when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and `false` when the event was dispatched via The only exception is the `click` event, which initializes the `isTrusted` property to `false` in user agents.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/isTrusted)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "NONE", - "value": "0", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "preventDefault", - "value": "() => void", - "description": "The **`preventDefault()`** method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/preventDefault)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "returnValue", - "value": "boolean", - "description": "The Event property **`returnValue`** indicates whether the default action for this event has been prevented or not.", - "deprecationMessage": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/returnValue)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "srcElement", - "value": "EventTarget | null", - "description": "The deprecated **`Event.srcElement`** is an alias for the Event.target property.", - "deprecationMessage": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/srcElement)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "stopImmediatePropagation", - "value": "() => void", - "description": "The **`stopImmediatePropagation()`** method of the If several listeners are attached to the same element for the same event type, they are called in the order in which they were added.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "stopPropagation", - "value": "() => void", - "description": "The **`stopPropagation()`** method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "target", - "value": "EventTarget | null", - "description": "The read-only **`target`** property of the dispatched.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "timeStamp", - "value": "DOMHighResTimeStamp", - "description": "The **`timeStamp`** read-only property of the Event interface returns the time (in milliseconds) at which the event was created.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/timeStamp)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The **`type`** read-only property of the Event interface returns a string containing the event's type.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/type)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "waitUntil", - "value": "(promise: Promise) => void", - "description": "A method that accepts a promise signaling the duration and eventual success or failure of event-related actions.\n\nCan be called multiple times to add promises to the event, but must be called synchronously during event dispatch. Cannot be called after a `setTimeout` or within a microtask.", - "isOptional": true - } - ], - "value": "export interface CallbackExtendableEvent<\n TTagName extends keyof HTMLElementTagNameMap,\n> extends CallbackEvent,\n Pick {}" - } - } - } - ], - "defaultExample": { - "description": "Group input fields that submit together when a merchant presses Enter or clicks a submit button. This example shows a basic form with a [text field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/text-field) and submit [button](/docs/api/admin-extensions/{API_VERSION}/web-components/actions/button).", - "codeblock": { - "title": "Submit a basic form", - "tabs": [ - { - "title": "html", - "code": "<s-form>\n <s-text-field label=\"Email address\" />\n <s-button variant=\"primary\" type=\"submit\">Submit</s-button>\n</s-form>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n \n Submit\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use specialized field types like [date field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/date-field) and [money field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/money-field) to collect structured campaign data. This example includes a reset button alongside submit so merchants can clear and start over.", - "codeblock": { - "title": "Build a campaign form with date and money fields", - "tabs": [ - { - "title": "html", - "code": "<s-form>\n <s-stack direction=\"block\" gap=\"base\">\n <s-text-field label=\"Campaign name\" name=\"campaign\" required></s-text-field>\n <s-date-field label=\"Start date\" name=\"startDate\" required></s-date-field>\n <s-date-field label=\"End date\" name=\"endDate\"></s-date-field>\n <s-money-field label=\"Budget\" name=\"budget\"></s-money-field>\n <s-stack direction=\"inline\" gap=\"base\">\n <s-button variant=\"primary\" type=\"submit\">Create campaign</s-button>\n <s-button type=\"reset\">Reset</s-button>\n </s-stack>\n </s-stack>\n</s-form>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n \n Create campaign\n Reset\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display specific error messages on individual fields to guide merchants toward valid input. This example shows a required [text field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/text-field) and [number field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/number-field) with inline validation errors.", - "codeblock": { - "title": "Show field validation errors", - "tabs": [ - { - "title": "html", - "code": "<s-form>\n <s-stack direction=\"block\" gap=\"base\">\n <s-text-field label=\"Product title\" name=\"title\" required error=\"Product title is required\"></s-text-field>\n <s-number-field label=\"Price\" name=\"price\" min=\"0\" step=\"0.01\" prefix=\"$\" error=\"Price must be greater than 0\"></s-number-field>\n <s-button variant=\"primary\" type=\"submit\">Create product</s-button>\n </s-stack>\n</s-form>\n", - "language": "html" - }, - { - "code": "\n \n \n \n Create product\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Mix text inputs with [selects](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/select) and [checkboxes](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/checkbox) to capture different kinds of merchant decisions. This example combines a text field, a select dropdown, and a checkbox for creating a discount.", - "codeblock": { - "title": "Use select and checkbox fields", - "tabs": [ - { - "title": "html", - "code": "<s-form>\n <s-stack direction=\"block\" gap=\"base\">\n <s-text-field label=\"Discount code\" name=\"code\" required></s-text-field>\n <s-select label=\"Discount type\" name=\"type\">\n <s-option value=\"percentage\">Percentage</s-option>\n <s-option value=\"fixed\">Fixed amount</s-option>\n <s-option value=\"shipping\">Free shipping</s-option>\n </s-select>\n <s-checkbox label=\"Apply to all products\" name=\"allProducts\" checked></s-checkbox>\n <s-button variant=\"primary\" type=\"submit\">Create discount</s-button>\n </s-stack>\n</s-form>\n", - "language": "html" - }, - { - "code": "\n \n \n \n Percentage\n Fixed amount\n Free shipping\n \n \n Create discount\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Organize a longer form into labeled groups so merchants can scan and complete it more easily. This example uses [sections](/docs/api/admin-extensions/{API_VERSION}/web-components/layout-and-structure/section) to separate contact information from shipping preferences.", - "codeblock": { - "title": "Group fields into sections", - "tabs": [ - { - "title": "html", - "code": "<s-form>\n <s-stack direction=\"block\" gap=\"large\">\n <s-section heading=\"Contact information\">\n <s-stack direction=\"block\" gap=\"base\">\n <s-text-field label=\"Full name\" name=\"name\" required></s-text-field>\n <s-email-field label=\"Email address\" name=\"email\" required></s-email-field>\n </s-stack>\n </s-section>\n <s-section heading=\"Shipping preferences\">\n <s-stack direction=\"block\" gap=\"base\">\n <s-select label=\"Shipping speed\" name=\"speed\">\n <s-option value=\"standard\">Standard (5–7 days)</s-option>\n <s-option value=\"express\">Express (2–3 days)</s-option>\n <s-option value=\"overnight\">Overnight</s-option>\n </s-select>\n <s-checkbox label=\"Require signature on delivery\" name=\"signature\"></s-checkbox>\n </s-stack>\n </s-section>\n <s-button variant=\"primary\" type=\"submit\">Save preferences</s-button>\n </s-stack>\n</s-form>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n \n \n \n \n \n Standard (5–7 days)\n Express (2–3 days)\n Overnight\n \n \n \n \n Save preferences\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Function settings", - "description": "The function settings component configures metafield settings for [Shopify Functions](/docs/api/functions). Use function settings to create configuration interfaces that allow merchants to customize function behavior through structured input fields and controls.\n\nThis component provides a standardized layout for settings forms and integrates with the native save bar to handle form submission and reset actions automatically. For general form submission, use [form](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/form).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "requires": "the [Discount Function Settings API](/docs/api/admin-extensions/{API_VERSION}/target-apis/contextual-apis/discount-function-settings-api), [Validation Settings API](/docs/api/admin-extensions/{API_VERSION}/target-apis/contextual-apis/validation-settings-api), or [Order Routing Rule API](/docs/api/admin-extensions/{API_VERSION}/target-apis/contextual-apis/order-routing-rule-api).", - "thumbnail": "/assets/templated-apis-screenshots/admin/components/form.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Label settings clearly:** Instead of technical names like **Max threshold**, use merchant-friendly labels like **Maximum discount amount** or **Order value limit**.\n- **Validate with specific feedback:** Check that percentages are between 0-100, that monetary values are positive, and that required fields are filled. Provide clear error messages when validation fails.\n- **Explain impact with field details:** Use the `details` property on individual field components (for example, [text field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/text-field) or [number field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/number-field)) to explain what each setting does and how it affects the user's workflow.\n- **Set appropriate defaults:** Pre-select the most common configuration to reduce setup friction for merchants.\n- **Group related settings:** Use sections to organize settings by function so merchants can find what they need quickly." - } - ], - "definitions": [ - { - "title": "Events", - "description": "The function settings component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "FormEvents", - "typeDefinitions": { - "FormEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "FormEvents", - "description": "The form component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "reset", - "value": "CallbackEventListener | null", - "description": "A callback that is run when the form is reset.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "submit", - "value": "CallbackExtendableEventListener | null", - "description": "A callback that is run when the form is submitted.", - "isOptional": true - } - ], - "value": "export interface FormEvents {\n /**\n * A callback that is run when the form is submitted.\n */\n submit: CallbackExtendableEventListener | null = null;\n /**\n * A callback that is run when the form is reset.\n */\n reset: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - }, - "CallbackExtendableEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackExtendableEventListener", - "value": "(EventListener & {\n (event: CallbackExtendableEvent): void;\n }) | null", - "description": "A function that handles extendable events from UI components. This type represents an event listener callback that can use `waitUntil` to extend the event lifetime.", - "isPublicDocs": true - }, - "CallbackExtendableEvent": { - "filePath": "src/surfaces/admin/components.ts", - "name": "CallbackExtendableEvent", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "AT_TARGET", - "value": "2", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "bubbles", - "value": "boolean", - "description": "The **`bubbles`** read-only property of the Event interface indicates whether the event bubbles up through the DOM tree or not.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/bubbles)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "BUBBLING_PHASE", - "value": "3", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "cancelable", - "value": "boolean", - "description": "The **`cancelable`** read-only property of the Event interface indicates whether the event can be canceled, and therefore prevented as if the event never happened.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelable)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "cancelBubble", - "value": "boolean", - "description": "The **`cancelBubble`** property of the Event interface is deprecated.", - "deprecationMessage": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/cancelBubble)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "CAPTURING_PHASE", - "value": "1", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "composed", - "value": "boolean", - "description": "The read-only **`composed`** property of the or not the event will propagate across the shadow DOM boundary into the standard DOM.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composed)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "composedPath", - "value": "() => EventTarget[]", - "description": "The **`composedPath()`** method of the Event interface returns the event's path which is an array of the objects on which listeners will be invoked.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/composedPath)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "currentTarget", - "value": "EventTarget | null", - "description": "The **`currentTarget`** read-only property of the Event interface identifies the element to which the event handler has been attached.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/currentTarget)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "defaultPrevented", - "value": "boolean", - "description": "The **`defaultPrevented`** read-only property of the Event interface returns a boolean value indicating whether or not the call to Event.preventDefault() canceled the event.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/defaultPrevented)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "eventPhase", - "value": "number", - "description": "The **`eventPhase`** read-only property of the being evaluated.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/eventPhase)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "initEvent", - "value": "(type: string, bubbles?: boolean, cancelable?: boolean) => void", - "description": "The **`Event.initEvent()`** method is used to initialize the value of an event created using Document.createEvent().", - "deprecationMessage": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/initEvent)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "isTrusted", - "value": "boolean", - "description": "The **`isTrusted`** read-only property of the when the event was generated by the user agent (including via user actions and programmatic methods such as HTMLElement.focus()), and `false` when the event was dispatched via The only exception is the `click` event, which initializes the `isTrusted` property to `false` in user agents.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/isTrusted)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "NONE", - "value": "0", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "preventDefault", - "value": "() => void", - "description": "The **`preventDefault()`** method of the Event interface tells the user agent that if the event does not get explicitly handled, its default action should not be taken as it normally would be.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/preventDefault)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "returnValue", - "value": "boolean", - "description": "The Event property **`returnValue`** indicates whether the default action for this event has been prevented or not.", - "deprecationMessage": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/returnValue)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "srcElement", - "value": "EventTarget | null", - "description": "The deprecated **`Event.srcElement`** is an alias for the Event.target property.", - "deprecationMessage": "[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/srcElement)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "stopImmediatePropagation", - "value": "() => void", - "description": "The **`stopImmediatePropagation()`** method of the If several listeners are attached to the same element for the same event type, they are called in the order in which they were added.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopImmediatePropagation)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "stopPropagation", - "value": "() => void", - "description": "The **`stopPropagation()`** method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/stopPropagation)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "target", - "value": "EventTarget | null", - "description": "The read-only **`target`** property of the dispatched.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/target)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "timeStamp", - "value": "DOMHighResTimeStamp", - "description": "The **`timeStamp`** read-only property of the Event interface returns the time (in milliseconds) at which the event was created.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/timeStamp)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The **`type`** read-only property of the Event interface returns a string containing the event's type.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/Event/type)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "waitUntil", - "value": "(promise: Promise) => void", - "description": "A method that accepts a promise signaling the duration and eventual success or failure of event-related actions.\n\nCan be called multiple times to add promises to the event, but must be called synchronously during event dispatch. Cannot be called after a `setTimeout` or within a microtask.", - "isOptional": true - } - ], - "value": "export interface CallbackExtendableEvent<\n TTagName extends keyof HTMLElementTagNameMap,\n> extends CallbackEvent,\n Pick {}" - } - } - } - ], - "defaultExample": { - "description": "Configure a [Shopify Function](/docs/api/functions/) with a settings form that integrates with the native save bar. This example shows a [number field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/number-field) for a discount percentage input inside a function settings component.", - "codeblock": { - "title": "Add a settings field for a function", - "tabs": [ - { - "title": "html", - "code": "<s-function-settings>\n <s-number-field\n step=\"1\"\n suffix=\"%\"\n label=\"Percentage\"\n name=\"percentage\"\n value=\"10\"\n ></s-number-field>\n</s-function-settings>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Organize settings into repeating groups for tiered or multi-level configurations. This example uses [sections](/docs/api/admin-extensions/{API_VERSION}/web-components/layout-and-structure/section) to define two volume discount tiers, each with a quantity threshold and percentage.", - "codeblock": { - "title": "Set up tiered discount rules", - "tabs": [ - { - "title": "html", - "code": "<s-function-settings>\n <s-stack direction=\"block\" gap=\"base\">\n <s-section heading=\"Tier 1\">\n <s-stack direction=\"inline\" gap=\"base\">\n <s-number-field label=\"Minimum quantity\" name=\"tier1Qty\" value=\"5\" min=\"1\" step=\"1\"></s-number-field>\n <s-number-field label=\"Discount\" name=\"tier1Discount\" value=\"10\" min=\"0\" max=\"100\" step=\"1\" suffix=\"%\"></s-number-field>\n </s-stack>\n </s-section>\n <s-section heading=\"Tier 2\">\n <s-stack direction=\"inline\" gap=\"base\">\n <s-number-field label=\"Minimum quantity\" name=\"tier2Qty\" value=\"10\" min=\"1\" step=\"1\"></s-number-field>\n <s-number-field label=\"Discount\" name=\"tier2Discount\" value=\"20\" min=\"0\" max=\"100\" step=\"1\" suffix=\"%\"></s-number-field>\n </s-stack>\n </s-section>\n </s-stack>\n</s-function-settings>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n \n \n \n \n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display validation errors when settings values are out of range or missing. This example shows required [number fields](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/number-field) with inline error messages.", - "codeblock": { - "title": "Show validation errors on settings", - "tabs": [ - { - "title": "html", - "code": "<s-function-settings>\n <s-stack direction=\"block\" gap=\"base\">\n <s-number-field\n step=\"1\"\n suffix=\"%\"\n label=\"Discount percentage\"\n name=\"percentage\"\n min=\"0\"\n max=\"100\"\n required\n error=\"Enter a percentage between 0 and 100\"\n ></s-number-field>\n <s-number-field\n step=\"0.01\"\n prefix=\"$\"\n label=\"Maximum discount amount\"\n name=\"maxDiscount\"\n min=\"0\"\n required\n error=\"Enter a positive dollar amount\"\n ></s-number-field>\n </s-stack>\n</s-function-settings>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Let merchants choose from predefined options to control function behavior. This example uses a [select](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/select) dropdown to pick a discount target and a [text field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/text-field) for a filter value.", - "codeblock": { - "title": "Add a select dropdown to settings", - "tabs": [ - { - "title": "html", - "code": "<s-function-settings>\n <s-stack direction=\"block\" gap=\"base\">\n <s-select label=\"Apply discount to\" name=\"target\">\n <s-option value=\"all\">All products</s-option>\n <s-option value=\"collection\">Specific collection</s-option>\n <s-option value=\"tagged\">Products with tag</s-option>\n </s-select>\n <s-text-field label=\"Collection or tag\" name=\"identifier\"></s-text-field>\n </s-stack>\n</s-function-settings>\n", - "language": "html" - }, - { - "code": "\n \n \n All products\n Specific collection\n Products with tag\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Let merchants enable or disable a feature with a [switch](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/switch) and configure its threshold. This example pairs a toggle for free shipping with a minimum order amount [number field](/docs/api/admin-extensions/{API_VERSION}/web-components/forms/number-field).", - "codeblock": { - "title": "Toggle a feature with a switch", - "tabs": [ - { - "title": "html", - "code": "<s-function-settings>\n <s-stack direction=\"block\" gap=\"base\">\n <s-switch label=\"Enable free shipping threshold\" name=\"freeShippingEnabled\" checked></s-switch>\n <s-number-field\n step=\"0.01\"\n prefix=\"$\"\n label=\"Minimum order amount\"\n name=\"freeShippingThreshold\"\n value=\"75.00\"\n min=\"0\"\n ></s-number-field>\n </s-stack>\n</s-function-settings>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Grid", - "description": "The grid component organizes content in a matrix of rows and columns to create responsive page layouts. Use grid to build complex, multi-column layouts that adapt to different screen sizes and maintain consistent alignment.\n\nGrid follows the CSS grid layout pattern and supports flexible column configurations, gap spacing, and alignment properties for precise layout control. For simpler linear layouts (horizontal or vertical), use [stack](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/stack).", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Design for different screen sizes:** Layouts that work well on desktop often fail on mobile. Plan how your grid should reflow or reconfigure for smaller screens rather than creating a fixed layout that doesn't adapt.\n- **Keep spacing consistent:** Consistent spacing between grid items creates visual rhythm and makes layouts easier to scan. Avoid mixing different spacing approaches within the same grid.\n- **Consider content overflow:** Grid cells have fixed dimensions, but content length varies. Plan how your layout handles content that's too long or too wide, whether through wrapping, truncation, or scrolling.\n- **Use semantic alternatives when appropriate:** Before using the component, consider whether simpler layout components would work. Grid's power comes with complexity, so use it when you need its specific capabilities." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't support CSS subgrid for aligning nested grid tracks with parent grids. If you need nested grids to align with parent grid lines, you'll need to manually coordinate the sizing or use a different layout approach." - } - ], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/grid.png", - "isVisualComponent": true, - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the grid component.", - "type": "Grid", - "typeDefinitions": { - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The grid component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "GridSlots", - "typeDefinitions": { - "GridSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridSlots", - "description": "The grid component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The child elements displayed within the grid component, which are arranged in a flexible grid layout with configurable columns, rows, and spacing.", - "isOptional": true - } - ], - "value": "export interface GridSlots {\n /**\n * The child elements displayed within the grid component, which are arranged in a flexible grid layout with configurable columns, rows, and spacing.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Grid item", - "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.\n\nGrid 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.", - "type": "GridItem", - "typeDefinitions": { - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The grid item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "GridItemSlots", - "typeDefinitions": { - "GridItemSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItemSlots", - "description": "The grid item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface GridItemSlots {\n /**\n * The content displayed within the grid item component, which represents a single cell in the grid layout and can span multiple columns or rows.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "grid-default.png", - "description": "Create a grid layout with columns and grid items that span them. This example shows a two-column grid with a full-width header row and two equal columns below.", - "codeblock": { - "title": "Add a grid layout with column spans", - "tabs": [ - { - "title": "html", - "code": "<s-grid\n gridTemplateColumns=\"repeat(2, 1fr)\"\n gap=\"small\"\n justifyContent=\"center\"\n>\n <s-grid-item gridColumn=\"span 2\" border=\"base\" borderStyle=\"dashed\">\n Summary of sales\n </s-grid-item>\n <s-grid-item gridColumn=\"span 1\" border=\"base\" borderStyle=\"dashed\">\n Orders\n </s-grid-item>\n <s-grid-item gridColumn=\"auto\" border=\"base\" borderStyle=\"dashed\">\n Customers\n </s-grid-item>\n</s-grid>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n \n Summary of sales\n \n \n Orders\n \n \n Customers\n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Create a simple two-column layout. This example uses a 12-column grid system with equal-width columns.", - "codeblock": { - "title": "Create a two-column layout", - "tabs": [ - { - "title": "html", - "code": "<s-grid gridTemplateColumns=\"repeat(12, 1fr)\" gap=\"base\">\n <s-grid-item gridColumn=\"span 6\" gridRow=\"span 1\">\n <s-section>\n <s-text>Left column</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 6\" gridRow=\"span 1\">\n <s-section>\n <s-text>Right column</s-text>\n </s-section>\n </s-grid-item>\n</s-grid>\n", - "language": "html" - }, - { - "code": "\n \n \n Left column\n \n \n \n \n Right column\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use a 12-column grid system with spans to create full-width, half-width, and third-width column arrangements. This example shows multiple rows with progressively narrower columns.", - "codeblock": { - "title": "Build layouts with column spans", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-grid gridTemplateColumns=\"repeat(12, 1fr)\" gap=\"base\">\n <s-grid-item gridColumn=\"span 12\" gridRow=\"span 1\">\n <s-section>\n <s-text>Full width field</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 6\" gridRow=\"span 2\">\n <s-section>\n <s-text>Half width field</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 6\" gridRow=\"span 2\">\n <s-section>\n <s-text>Half width field</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 4\" gridRow=\"span 3\">\n <s-section>\n <s-text>Third width field</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 4\" gridRow=\"span 3\">\n <s-section>\n <s-text>Third width field</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 4\" gridRow=\"span 3\">\n <s-section>\n <s-text>Third width field</s-text>\n </s-section>\n </s-grid-item>\n </s-grid>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n Full width field\n \n \n \n \n Half width field\n \n \n \n \n Half width field\n \n \n \n \n Third width field\n \n \n \n \n Third width field\n \n \n \n \n Third width field\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `gridTemplateColumns` property with container queries to automatically adjust the column count based on available width. This example shows a grid that switches from a single column in narrow containers to three columns in wider ones.", - "codeblock": { - "title": "Create a responsive grid with container queries", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-text type=\"strong\">Narrow container (375px)</s-text>\n <s-box inlineSize=\"375px\">\n <s-query-container>\n <s-grid\n gridTemplateColumns=\"@container (inline-size > 400px) 1fr 1fr 1fr, 1fr\"\n gap=\"base\"\n >\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 1</s-text>\n </s-box>\n </s-grid-item>\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 2</s-text>\n </s-box>\n </s-grid-item>\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 3</s-text>\n </s-box>\n </s-grid-item>\n </s-grid>\n </s-query-container>\n </s-box>\n\n <s-text type=\"strong\">Wide container (450px)</s-text>\n <s-box inlineSize=\"450px\">\n <s-query-container>\n <s-grid\n gridTemplateColumns=\"@container (inline-size > 400px) 1fr 1fr 1fr, 1fr\"\n gap=\"base\"\n >\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 1</s-text>\n </s-box>\n </s-grid-item>\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 2</s-text>\n </s-box>\n </s-grid-item>\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 3</s-text>\n </s-box>\n </s-grid-item>\n </s-grid>\n </s-query-container>\n </s-box>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Narrow container (375px)\n \n \n 400px) 1fr 1fr 1fr, 1fr\"\n gap=\"base\"\n >\n \n \n Item 1\n \n \n \n \n Item 2\n \n \n \n \n Item 3\n \n \n \n \n \n\n Wide container (450px)\n \n \n 400px) 1fr 1fr 1fr, 1fr\"\n gap=\"base\"\n >\n \n \n Item 1\n \n \n \n \n Item 2\n \n \n \n \n Item 3\n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Heading", - "description": "The heading component renders hierarchical titles to communicate the structure and organization of page content. Use heading to create section titles and content headers that help users understand information hierarchy and navigate content.\n\nHeading levels adjust automatically based on nesting within parent [section](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/section) components, ensuring meaningful and accessible page outlines without manual level management.", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/heading.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use headings to structure content hierarchy:** The component creates a clear outline of your interface that helps merchants navigate and understand content organization. Every major section should have a heading.\n- **Let the component handle semantic levels:** The component automatically assigns appropriate HTML heading levels (h2, h3, h4) based on nesting depth. This ensures proper document structure for screen readers without manual management.\n- **Write clear, descriptive headings:** Headings should clearly describe the section they introduce. Avoid vague headings like \"Details\" when \"Product details\" or \"Customer details\" would be clearer.\n- **Use line clamping sparingly:** Line clamping helps manage long headings in constrained spaces like cards, but truncated headings can hide important information. Only clamp when it's absolutely necessary.\n- **Maintain consistent styling within contexts:** Use similar heading styles for similar content types. For example, all card headings in a list should look the same." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Heading levels (h2, h3, h4) are determined automatically based on nesting depth. You can't set a specific heading level, but you can remove heading semantics entirely by setting `accessibilityRole` to `\"presentation\"` or `\"none\"`.\n- Line clamping truncates text visually but doesn't provide a way to show the full heading text on hover or through other interactions. Truncated content might not be fully accessible to screen readers." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the heading component.", - "type": "Heading", - "typeDefinitions": { - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The heading component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "HeadingSlots", - "typeDefinitions": { - "HeadingSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "HeadingSlots", - "description": "The heading component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The heading text displayed within the heading component, which provides a title or section header for content.", - "isOptional": true - } - ], - "value": "export interface HeadingSlots {\n /**\n * The heading text displayed within the heading component, which provides a title or section header for content.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "heading-default.png", - "description": "Create a heading for a content section. This example shows the basic heading component with default styling and automatic heading level assignment.", - "codeblock": { - "title": "Add a basic heading", - "tabs": [ - { - "title": "html", - "code": "<s-heading>Online store dashboard</s-heading>\n", - "language": "html", - "editable": false - }, - { - "code": "
Online store dashboard\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Limit the number of visible lines in a heading using the `lineClamp` property. This example shows a heading truncated to two lines with an ellipsis, useful for long product names in constrained layouts.", - "codeblock": { - "title": "Truncate long headings with line clamping", - "tabs": [ - { - "title": "html", - "code": "<s-box inlineSize=\"200px\">\n <s-heading lineClamp=\"2\">\n Premium organic cotton t-shirt with sustainable manufacturing practices\n </s-heading>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n Premium organic cotton t-shirt with sustainable manufacturing practices\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Configure the heading's ARIA role and visibility for assistive technologies. This example shows a heading with `accessibilityRole` set to presentation and `accessibilityVisibility` set to hidden, removing it from the document outline.", - "codeblock": { - "title": "Customize accessibility roles and visibility", - "tabs": [ - { - "title": "html", - "code": "<s-heading accessibilityRole=\"presentation\" accessibilityVisibility=\"hidden\">\n Sale badge\n</s-heading>\n", - "language": "html" - }, - { - "code": "\n Sale badge\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Nest headings inside section components to automatically assign appropriate heading levels (h2, h3, h4). This example shows how the heading level increments with each nested section, creating proper document structure for screen readers.", - "codeblock": { - "title": "Create a heading hierarchy with nested sections", - "tabs": [ - { - "title": "html", - "code": "<s-section>\n <s-heading>Order information</s-heading>\n <!-- Renders as h2 -->\n <s-section>\n <s-heading>Shipping details</s-heading>\n <!-- Renders as h3 -->\n <s-section>\n <s-heading>Tracking updates</s-heading>\n <!-- Renders as h4 -->\n </s-section>\n </s-section>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n Order information\n \n \n Shipping details\n \n \n Tracking updates\n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Icon", - "description": "The icon component renders graphic symbols to visually communicate actions, status, and navigation throughout the interface. Use icon to reinforce button actions, indicate status states, or provide wayfinding cues that help users understand available functionality.\n\nIcons support multiple sizes, tones for semantic meaning, and can be integrated with other components like [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button), [badge](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/badge), and [chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/chip) to enhance visual communication.", - "category": "Web components", - "subCategory": "Media and visuals", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/icon.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Available icons", - "type": "Generic", - "anchorLink": "available-icons", - "sectionContent": "Search and filter across all the available icons: \n \n " - }, - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use icons to support actions and status, not decorate**: Icons should clarify what an action does or indicate state. Use the trash icon for delete actions, a checkmark for completed status, or a warning icon for errors. Avoid adding icons purely for visual interest.\n- **Maintain consistency across your interface**: Always use the same icon for the same action or concept throughout your extension. If you use a pencil for edit in one place, use it everywhere. Inconsistent icon usage confuses merchants.\n- **Pair icons with text labels whenever possible**: Icons work best as visual reinforcement alongside text. Without text, even common icons can be ambiguous—a gear might mean settings, preferences, or configuration. Only use icons alone in space-constrained contexts like icon-only buttons with proper accessibility labels.\n- **Choose icons that are universally recognizable**: Stick to icons with established meanings like magnifying glass (search), trash (delete), and plus (add). Test any icon you're unsure about—if it needs explanation, it's not the right choice.\n- **Use semantic tones to communicate meaning**: Apply tones like `critical` for destructive actions, `success` for positive states, and `warning` for caution. Tones should convey information, not serve as decoration." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Icons are limited to the predefined set provided by the component. Custom SVG icons, icon fonts, or external icon libraries aren't supported.\n- Icons can't be animated or include interactive states beyond color changes. For complex graphics or illustrations, use the [image](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/image) component instead.\n- Icon color is determined by the `tone` and `color` properties. Custom colors or gradients aren't available." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the icon component.", - "type": "Icon", - "typeDefinitions": { - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`.", - "isOptional": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - } - ], - "defaultExample": { - "image": "icon-default.png", - "description": "Add visual cues to help users understand available actions. This example displays common icons for home, orders, products, and settings.", - "codeblock": { - "title": "Display icons", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-icon type=\"home\"></s-icon>\n <s-icon type=\"order\"></s-icon>\n <s-icon type=\"product\"></s-icon>\n <s-icon type=\"settings\"></s-icon>\n</s-stack>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n \n \n \n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Communicate status through color-coded icons. This example displays icons with warning, success, info, and caution tones.", - "codeblock": { - "title": "Apply semantic tones", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-icon type=\"alert-circle\" tone=\"warning\"></s-icon>\n <s-icon type=\"check-circle\" tone=\"success\"></s-icon>\n <s-icon type=\"info\" tone=\"info\"></s-icon>\n <s-icon type=\"alert-triangle\" tone=\"caution\"></s-icon>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Fit icons into tight layouts without losing clarity. This example uses a small-sized icon that takes up minimal space.", - "codeblock": { - "title": "Reduce the size", - "tabs": [ - { - "title": "html", - "code": "<s-icon type=\"search\" size=\"small\"></s-icon>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "De-emphasize icons for secondary content. This example displays a subdued icon with lower contrast for supporting information.", - "codeblock": { - "title": "Apply subdued color", - "tabs": [ - { - "title": "html", - "code": "<s-icon type=\"question-circle\" color=\"subdued\"></s-icon>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Target icons in scripts or stylesheets. This example adds an ID attribute for JavaScript event handling or custom CSS styling.", - "codeblock": { - "title": "Add an ID", - "tabs": [ - { - "title": "html", - "code": "<s-icon type=\"settings\" id=\"settings-icon\"></s-icon>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Improve accessibility for screen reader users. This example connects an icon to related interactive content using the `interest` attribute.", - "codeblock": { - "title": "Connect to related content", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"info-tooltip\">\n SKU must be unique across all products and cannot be changed after creation\n</s-tooltip>\n<s-icon type=\"info\" tone=\"info\" interestFor=\"info-tooltip\" />", - "language": "html" - }, - { - "code": "\n SKU must be unique across all products and cannot be changed after creation\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Reinforce button actions with visual cues. This example places icons in buttons for add and delete actions with appropriate tones.", - "codeblock": { - "title": "Use in buttons", - "tabs": [ - { - "title": "html", - "code": "<s-button-group>\n <s-button slot=\"secondary-actions\" icon=\"plus\">Add product</s-button>\n <s-button slot=\"secondary-actions\" icon=\"delete\" tone=\"critical\">\n Delete\n </s-button>\n</s-button-group>\n", - "language": "html" - }, - { - "code": "\n Add product\n \n Delete\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Enhance status badges with visual indicators. This example pairs badges with icons for active and pending states.", - "codeblock": { - "title": "Use in badges", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-badge tone=\"success\" icon=\"check-circle\">Active</s-badge>\n <s-badge tone=\"warning\" icon=\"alert-triangle\">Pending</s-badge>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Active\n Pending\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Image", - "description": "The image component embeds images within the interface with control over presentation and loading behavior. Use image to visually illustrate concepts, showcase products, display user content, or support tasks and interactions with visual context.\n\nImages support responsive sizing, alt text for accessibility, aspect ratio control, and loading states for progressive enhancement. For small preview images in lists or tables, use [thumbnail](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/thumbnail). For profile images, use [avatar](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/avatar).", - "category": "Web components", - "subCategory": "Media and visuals", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/image.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Always provide descriptive alternative text:** Write alt text that describes what's in the image, not what the image is for. Use \"Blue cotton t-shirt with crew neck\" instead of \"Product image.\" For decorative images that don't add information, use an empty alt attribute.\n- **Use images for meaningful content, not decoration:** Display product photos, diagrams, charts, or instructional screenshots. For icons or decorative elements, use the [Icon](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/icon) component instead.\n- **Ensure images are accessible and performant:** Use appropriate image formats (WebP for photos, PNG for graphics with transparency, SVG for logos). Ensure images load from reliable sources with proper CORS configuration if cross-origin.\n- **Consider the image's purpose and context:** Use images to help merchants understand products, visualize data, or follow instructions. Every image should serve a clear purpose in your interface." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Images can be loaded from remote URLs or local file resources. Cross-origin images require proper CORS headers from the image host.\n- The component displays images at their intrinsic aspect ratio. Use `aspectRatio` (for example, `'16/9'`) to set a fixed ratio, and `objectFit` (`'cover'` or `'contain'`) to control how the image resizes within its container.\n- The component provides a basic placeholder while images load but doesn't include built-in loading skeletons or progressive loading features." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the image component.", - "type": "Image", - "typeDefinitions": { - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset).", - "isOptional": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The image component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ImageEvents", - "typeDefinitions": { - "ImageEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ImageEvents", - "description": "The image component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "error", - "value": "OnErrorEventHandler", - "description": "A callback fired when the image fails to load.\n\nLearn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "load", - "value": "CallbackEventListener | null", - "description": "A callback fired when the image successfully loads.\n\nLearn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).", - "isOptional": true - } - ], - "value": "export interface ImageEvents {\n /**\n * A callback fired when the image successfully loads.\n *\n * Learn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).\n */\n load: CallbackEventListener | null = null;\n /**\n * A callback fired when the image fails to load.\n *\n * Learn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).\n */\n error: OnErrorEventHandler = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "image-default.png", - "description": "Display a product thumbnail with metadata in a grid layout. This example demonstrates how to control image sizing with `aspectRatio`, `objectFit`, and `inlineSize`, and round corners with `borderRadius`.", - "codeblock": { - "title": "Display a product thumbnail", - "tabs": [ - { - "title": "html", - "code": "<s-grid gridTemplateColumns=\"80px 1fr\" gap=\"base\" alignItems=\"center\">\n <s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Indoor plant\"\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n borderRadius=\"base\"\n inlineSize=\"fill\"\n />\n <s-stack gap=\"small\">\n <s-text type=\"strong\">Indoor Plant</s-text>\n <s-text color=\"subdued\">SKU: PLT-001</s-text>\n <s-text tone=\"success\">In stock</s-text>\n </s-stack>\n</s-grid>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n \n \n Indoor Plant\n SKU: PLT-001\n In stock\n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Control image proportions with a fixed aspect ratio. This example displays a 16:9 image that scales to fill its container using `objectFit=\"cover\"`, with lazy loading for performance.", - "codeblock": { - "title": "Set an aspect ratio", - "tabs": [ - { - "title": "html", - "code": "<s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Featured product\"\n aspectRatio=\"16/9\"\n objectFit=\"cover\"\n loading=\"lazy\"\n></s-image>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set up responsive image sources using `srcSet` and `sizes`. This example demonstrates how to configure the browser to select appropriate image sources based on viewport width.", - "codeblock": { - "title": "Use responsive images", - "tabs": [ - { - "title": "html", - "code": "<s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n srcSet=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png 400w,\n https://cdn.shopify.com/static/sample-product/House-Plant1.png 800w\"\n sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 400px\"\n alt=\"Product detail\"\n aspectRatio=\"16/9\"\n objectFit=\"cover\"\n></s-image>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add visual emphasis with border styling. This example displays an image with border width, color, and rounded corners.", - "codeblock": { - "title": "Add border styling", - "tabs": [ - { - "title": "html", - "code": "<s-box inlineSize=\"300px\">\n <s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Product thumbnail\"\n borderWidth=\"large\"\n borderStyle=\"solid\"\n borderColor=\"strong\"\n borderRadius=\"large\"\n objectFit=\"cover\"\n aspectRatio=\"1/1\"\n ></s-image>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Hide images from screen readers when purely decorative. This example presents an image with empty `alt` text and `presentation` role for accessibility.", - "codeblock": { - "title": "Mark as decorative", - "tabs": [ - { - "title": "html", - "code": "<s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"\"\n accessibilityRole=\"presentation\"\n objectFit=\"cover\"\n></s-image>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Build a product image gallery with consistent sizing using [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid). This example arranges three product photos in a row, each constrained to a square with rounded corners so they line up evenly.", - "codeblock": { - "title": "Use in a grid layout", - "tabs": [ - { - "title": "html", - "code": "<s-grid gridTemplateColumns=\"repeat(3, 150px)\" gap=\"base\" alignItems=\"center\">\n <s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Main view\"\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n borderRadius=\"base\"\n inlineSize=\"fill\"\n ></s-image>\n <s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Side view\"\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n borderRadius=\"base\"\n inlineSize=\"fill\"\n ></s-image>\n <s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Detail view\"\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n borderRadius=\"base\"\n inlineSize=\"fill\"\n ></s-image>\n</s-grid>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Link", - "description": "The link component makes text interactive, allowing users to navigate to other pages or perform specific actions. Use link for navigation, external references, or triggering actions while maintaining standard link semantics and accessibility.\n\nLinks support standard URLs, custom protocols, navigation within Shopify admin pages, and can open in new windows for external destinations. For prominent actions or form submissions, use [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) instead.", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/link.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Open external links in new tabs:** Use `target=\"_blank\"` only for external URLs (like help documentation or partner sites). Keep internal admin links in the same tab to maintain workflow context." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Links within extensions have limited control over navigation behavior in the Shopify admin. Some admin navigation patterns might override link behavior for consistency.\n- Links with `target=\"_blank\"` automatically get `rel=\"noopener noreferrer\"` for security, but external URLs are still subject to browser security policies. Some browsers might block external navigation from extensions or show security warnings.\n- Links don't have a built-in loading or disabled state. If clicking a link triggers a slow navigation or async operation, you must implement loading feedback yourself.\n- The `download` attribute for forcing file downloads has inconsistent browser support. It works reliably for same-origin files but might be ignored for cross-origin resources. Safari on iOS doesn't support the download attribute at all." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the link component.", - "type": "Link", - "typeDefinitions": { - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The link component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "LinkEvents", - "typeDefinitions": { - "LinkEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "LinkEvents", - "description": "The link component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "CallbackEventListener | null", - "description": "A callback fired when the link is clicked.\n\nLearn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", - "isOptional": true - } - ], - "value": "export interface LinkEvents {\n /**\n * A callback fired when the link is clicked.\n *\n * Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).\n */\n click: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The link component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "LinkSlots", - "typeDefinitions": { - "LinkSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "LinkSlots", - "description": "The link component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text or elements displayed within the link component, which navigates users to a different location when activated.", - "isOptional": true - } - ], - "value": "export interface LinkSlots {\n /**\n * The text or elements displayed within the link component, which navigates users to a different location when activated.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "link-default.png", - "description": "Add an inline link to let merchants navigate to another page. This example shows a basic text link with an `href` property.", - "codeblock": { - "title": "Add a basic link", - "tabs": [ - { - "title": "html", - "code": "<s-link href=\"#beep\">fulfilling orders</s-link>", - "language": "html", - "editable": false - }, - { - "code": "
fulfilling orders
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Embed links within a [Paragraph](/docs/api/app-home/web-components/typography-and-content/paragraph) so merchants can navigate to related content inline. This example shows two links inside a paragraph that inherit the surrounding text tone.", - "codeblock": { - "title": "Embed links in paragraph text", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph>\n Your product catalog is empty. Start by <s-link href=\"javascript:void(0)\">adding your first product</s-link> or <s-link href=\"javascript:void(0)\">importing existing inventory</s-link>.\n</s-paragraph>\n", - "language": "html" - }, - { - "code": "\n Your product catalog is empty. Start by adding your first product or importing existing inventory.\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place links inside banners to provide direct actions alongside important notifications. This example shows a link inside an info banner prompting merchants to create a campaign.", - "codeblock": { - "title": "Add links inside a banner", - "tabs": [ - { - "title": "html", - "code": "<s-banner tone=\"info\">\n <s-paragraph>\n Black Friday campaigns are now available!\n <s-link href=\"javascript:void(0)\">Create your campaign</s-link>\n </s-paragraph>\n</s-banner>\n", - "language": "html" - }, - { - "code": "\n \n Black Friday campaigns are now available!\n Create your campaign\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place links inside a box container to provide navigation within a visually distinct content area. This example shows two links inside a bordered box with background and padding.", - "codeblock": { - "title": "Add links inside a box container", - "tabs": [ - { - "title": "html", - "code": "<s-box padding=\"base\" background=\"base\" borderWidth=\"base\" borderColor=\"base\">\n <s-paragraph>\n Boost your store's conversion with professional themes. <s-link href=\"javascript:void(0)\">Browse theme store</s-link> or <s-link href=\"javascript:void(0)\">customize your current theme</s-link>.\n </s-paragraph>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n Boost your store's conversion with professional themes. Browse theme store or customize your current theme.\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `download` property to trigger a file download when the link is clicked. This example shows a link that downloads a CSV file for customer data export.", - "codeblock": { - "title": "Trigger a file download", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph>\n Export your customer data for marketing analysis. <s-link href=\"javascript:void(0)\" download=\"customer-export.csv\">Download customer list</s-link>\n</s-paragraph>\n", - "language": "html" - }, - { - "code": "\n Export your customer data for marketing analysis. Download customer list\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Open external URLs in a new tab so merchants stay on the current page. This example shows two links with `target=\"_blank\"` pointing to external documentation.", - "codeblock": { - "title": "Open external links in a new tab", - "tabs": [ - { - "title": "html", - "code": "<s-box padding=\"base\">\n <s-paragraph>\n Need help with policies? Read our <s-link href=\"javascript:void(0)\" target=\"_blank\">billing docs</s-link> or review the <s-link href=\"javascript:void(0)\" target=\"_blank\">terms of service</s-link>.\n </s-paragraph>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n Need help with policies? Read our billing docs or review the terms of service.\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `lang` property so screen readers pronounce the link text correctly. This example shows a French-language link with the `lang` attribute set.", - "codeblock": { - "title": "Set the language for a link", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph>\n Voir en français: <s-link lang=\"fr\">Gérer les produits</s-link>\n</s-paragraph>", - "language": "html" - }, - { - "code": "\n Voir en français: Gérer les produits\n", - "language": "preview" - } - ] - } - }, - { - "description": "Configure links that inherit the tone of their parent paragraph and match the surrounding context. This example shows links inside paragraphs with six different tones.", - "codeblock": { - "title": "Match link tone to surrounding context", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-paragraph>\n Default tone: <s-link>View orders</s-link>\n </s-paragraph>\n\n <s-paragraph tone=\"success\">\n Neutral tone: <s-link>Inventory help</s-link>\n </s-paragraph>\n\n <s-paragraph tone=\"critical\">\n Critical tone: <s-link>Close store</s-link>\n </s-paragraph>\n\n <s-paragraph tone=\"warning\">\n Warning tone: <s-link>Update billing info</s-link>\n </s-paragraph>\n\n <s-paragraph tone=\"info\">\n Info tone: <s-link>Learn more about reports</s-link>\n </s-paragraph>\n\n <s-paragraph tone=\"caution\">\n Subdued tone: <s-link>View archived products</s-link>\n </s-paragraph>\n</s-stack>", - "language": "html" - }, - { - "code": "\n \n Default tone: View orders\n \n\n \n Neutral tone: Inventory help\n \n\n \n Critical tone: Close store\n \n\n \n Warning tone: Update billing info\n \n\n \n Info tone: Learn more about reports\n \n\n \n Subdued tone: View archived products\n \n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Menu", - "description": "The menu component displays a list of actions that can be performed on a resource or within a specific context. Use menu to present multiple related actions in a compact dropdown format, reducing visual clutter while maintaining discoverability.\n\nMenus support action grouping, icons for visual clarity, and keyboard navigation for efficient interaction.", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/menu.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Reserve for secondary actions:** Place primary actions directly in the UI (like **Save** in the page header). Use menus for less frequent or destructive actions (like **Archive**, **Duplicate**, or **Export data**) that shouldn't take up permanent space.\n- **Write action-oriented labels:** Use the `{verb}+{noun}` format: **Edit details**, **Export as CSV**, **Duplicate product**, **Archive order**. Never use vague labels like **Options**, **More**, or **Settings**.\n- **Group related actions with sections:** When you have 4+ menu items, organize into sections with headings: group **Edit details**, **Duplicate product** under **Manage**, and **Archive product**, **Delete product** under **Danger zone**.\n- **Use icons to reinforce meaning:** Add icons to menu items to provide visual recognition: use an edit icon for **Edit**, trash icon for **Delete**, or download icon for **Export**. Icons should clarify, not replace, text labels.\n- **Only disable temporarily unavailable actions:** Use disabled items when an action's contextually unavailable (like **Refund order** when already refunded). If an action's never available, remove it from the menu entirely." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Menus automatically reposition to stay within the viewport boundaries, but in extremely constrained spaces (like narrow mobile screens or small modals), the menu might partially overflow or be cut off.\n- While there's no hard technical limit on menu items, menus with more than 10-12 items become difficult to scan. Performance remains acceptable up to ~50 items, but beyond this, consider pagination, search, or alternative UI patterns.\n- The component doesn't support nested submenus (like cascading dropdowns). All menu items must be at a single level, organized into sections if needed.\n- When navigating with arrow keys, focus moves sequentially through all items regardless of section boundaries. Section headings aren't focusable and serve only as visual separators.\n- The menu renders in a popover layer with a specific z-index. If placed within containers that have their own stacking contexts (like modals, sticky headers, or elements with transforms), the menu might appear behind other elements or clip unexpectedly." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the menu component.", - "type": "Menu", - "typeDefinitions": { - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@11751", - "value": "HTMLElement", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@11750", - "value": "boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@11752", - "value": "number", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The menu component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "MenuSlots", - "typeDefinitions": { - "MenuSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MenuSlots", - "description": "The menu component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface MenuSlots {\n /**\n * The items displayed within the menu. Only accepts button and section components. Use button for individual menu actions and section to group related items.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "menu-default.png", - "description": "Add a dropdown menu of actions triggered by a button. This example shows a menu with three icon buttons including a critical delete action.", - "codeblock": { - "title": "Add a basic actions menu", - "tabs": [ - { - "title": "html", - "code": "<s-button commandFor=\"customer-menu\">Edit customer</s-button>\n\n<s-menu id=\"customer-menu\" accessibilityLabel=\"Customer actions\">\n <s-button icon=\"merge\">Merge customer</s-button>\n <s-button icon=\"incoming\">Request customer data</s-button>\n <s-button icon=\"delete\" tone=\"critical\">Delete customer</s-button>\n</s-menu>\n", - "language": "html", - "editable": false - }, - { - "code": "
Edit customer\n\n\n Merge customer\n Request customer data\n Delete customer\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Organize menu items into labeled groups so merchants can find related actions. This example shows two sections with headings separating product actions from export options.", - "codeblock": { - "title": "Organize items into sections", - "tabs": [ - { - "title": "html", - "code": "<s-button commandFor=\"organized-menu\">Bulk actions</s-button>\n\n<s-menu id=\"organized-menu\" accessibilityLabel=\"Organized menu\">\n <s-section heading=\"Product actions\">\n <s-button icon=\"edit\">Edit selected</s-button>\n <s-button icon=\"duplicate\">Duplicate selected</s-button>\n <s-button icon=\"archive\">Archive selected</s-button>\n </s-section>\n <s-section heading=\"Export options\">\n <s-button icon=\"export\">Export as CSV</s-button>\n <s-button icon=\"print\">Print barcodes</s-button>\n </s-section>\n</s-menu>\n", - "language": "html" - }, - { - "code": "Bulk actions\n\n\n \n Edit selected\n Duplicate selected\n Archive selected\n \n \n Export as CSV\n Print barcodes\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Mix link-based, standard, and disabled buttons in a single menu. This example shows a menu with a link that opens in a new tab, a disabled action, and a download link.", - "codeblock": { - "title": "Add links and disabled items to a menu", - "tabs": [ - { - "title": "html", - "code": "<s-button commandFor=\"mixed-menu\">Options</s-button>\n\n<s-menu id=\"mixed-menu\" accessibilityLabel=\"Mixed menu options\">\n <s-button href=\"javascript:void(0)\" target=\"_blank\">\n View product page\n </s-button>\n <s-button disabled>Unavailable action</s-button>\n <s-button download href=\"javascript:void(0)\">Download report</s-button>\n</s-menu>\n", - "language": "html" - }, - { - "code": "Options\n\n\n \n View product page\n \n Unavailable action\n Download report\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Combine sections with root-level items to separate grouped actions from standalone ones like a destructive action. This example shows two sections for customer management alongside a root-level delete button.", - "codeblock": { - "title": "Mix sections with root-level actions", - "tabs": [ - { - "title": "html", - "code": "<s-button commandFor=\"customer-menu\">Edit customer</s-button>\n\n<s-menu id=\"customer-menu\" accessibilityLabel=\"Customer actions\">\n <s-section heading=\"Customer management\">\n <s-button icon=\"edit\">Edit customer</s-button>\n <s-button icon=\"email\">Send email</s-button>\n <s-button icon=\"order\">View orders</s-button>\n </s-section>\n <s-section heading=\"Account actions\">\n <s-button icon=\"reset\">Reset password</s-button>\n <s-button icon=\"lock\">Disable account</s-button>\n </s-section>\n <s-button tone=\"critical\" icon=\"delete\">Delete customer</s-button>\n</s-menu>\n", - "language": "html" - }, - { - "code": "Edit customer\n\n\n \n Edit customer\n Send email\n View orders\n \n \n Reset password\n Disable account\n \n Delete customer\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Build a settings-style menu with multiple sections and a standalone action at the bottom. This example shows account and store settings sections with a root-level sign-out link.", - "codeblock": { - "title": "Build a settings menu with sections", - "tabs": [ - { - "title": "html", - "code": "<s-button icon=\"settings\" commandFor=\"admin-settings\">Settings</s-button>\n\n<s-menu id=\"admin-settings\" accessibilityLabel=\"Settings menu\">\n <s-section heading=\"Account\">\n <s-button icon=\"profile\">Profile settings</s-button>\n <s-button icon=\"lock\">Security</s-button>\n <s-button>Billing information</s-button>\n </s-section>\n <s-section heading=\"Store\">\n <s-button icon=\"store\">Store settings</s-button>\n <s-button>Payment providers</s-button>\n <s-button icon=\"delivery\">Shipping rates</s-button>\n </s-section>\n <s-button href=\"javascript:void(0)\" icon=\"person-exit\">Sign out</s-button>\n</s-menu>\n", - "language": "html" - }, - { - "code": "Settings\n\n\n \n Profile settings\n Security\n Billing information\n \n \n Store settings\n Payment providers\n Shipping rates\n \n Sign out\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use an icon-only button as the menu trigger for a compact \"more actions\" pattern. This example shows a three-dot icon button that opens a menu with common product actions.", - "codeblock": { - "title": "Trigger a menu from an icon-only button", - "tabs": [ - { - "title": "html", - "code": "<s-button\n icon=\"menu-horizontal\"\n variant=\"tertiary\"\n accessibilityLabel=\"More actions\"\n commandFor=\"more-actions-menu\"\n></s-button>\n\n<s-menu id=\"more-actions-menu\" accessibilityLabel=\"More actions\">\n <s-button icon=\"edit\">Edit product</s-button>\n <s-button icon=\"duplicate\">Duplicate product</s-button>\n <s-button icon=\"archive\">Archive product</s-button>\n <s-button icon=\"delete\" tone=\"critical\">Delete product</s-button>\n</s-menu>\n", - "language": "html" - }, - { - "code": "\n\n\n Edit product\n Duplicate product\n Archive product\n Delete product\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Money field", - "description": "The money field component collects monetary values from users with built-in currency formatting and validation. Use money field for prices, costs, or financial amounts to provide proper currency symbols, decimal handling, and numeric validation.\n\nMoney fields support currency codes, automatic formatting, and min/max constraints to ensure users enter valid monetary values. For non-currency numeric input, use [number field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/number-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/moneyfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Set realistic min/max constraints:** For product prices, use `min={0.01}` to prevent zero prices. For discounts, use `min={0}` and `max={orderTotal}`. For refunds, use `max={amountPaid}`. Always validate against business logic limits.\n- **Provide specific validation feedback:** Instead of **Invalid amount**, show **Price must be at least $0.01** or **Discount can't exceed $50.00 order total**. Explain the exact constraint violated.\n- **Never add currency symbols to labels:** Don't add **$** or other currency symbols to the label or placeholder, as this can create confusion with any currency formatting the component provides.\n- **Label by specific monetary purpose:** Use labels like **Product base price**, **Discount amount**, **Shipping rate per kg**, or **Subscription renewal fee** instead of vague **Amount** or **Price**.\n- **Pre-fill when editing existing values:** Always populate the field with the current value when editing. For new entries, consider smart defaults like **0.00** or typical price points for your product category." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component outputs values as strings, but converting to JavaScript numbers for arithmetic can cause floating-point precision errors. Always perform critical financial calculations on the server using decimal-precise arithmetic or integer cents (multiply by 100).\n- The component formats currency based on the merchant's store currency and locale. The same numeric value might display as **$1,234.56** (en-US) vs **1 234,56 $** (fr-FR). Test your UI with various currency/locale combinations if you operate internationally.\n- Currencies like JPY (¥), KRW (₩), and VND (₫) don't use decimal places. The component might still allow decimal input but this will be invalid for these currencies. Validate the currency's decimal places on the backend.\n- The component doesn't perform currency conversion. If you need to display amounts in multiple currencies, you must handle conversion rates and calculations separately." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the money field component.", - "type": "MoneyField", - "typeDefinitions": { - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.", - "isOptional": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The money field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "MoneyFieldEvents", - "typeDefinitions": { - "MoneyFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyFieldEvents", - "description": "The money field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the money field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the money field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the money field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the money field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface MoneyFieldEvents {\n /**\n * A callback fired when the money field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the money field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the money field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the money field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "description": "Capture monetary values with automatic currency formatting. This example pairs a label with placeholder text and helper details.", - "codeblock": { - "title": "Collect a currency value", - "tabs": [ - { - "title": "html", - "code": "<s-money-field\n label=\"Regional Price\"\n placeholder=\"99.99\"\n details=\"Recommended price for the European market\"\n></s-money-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Set input boundaries for valid amounts. This example configures min/max limits to constrain the accepted value range.", - "codeblock": { - "title": "Add a label and constraints", - "tabs": [ - { - "title": "html", - "code": "<s-money-field\n label=\"Price\"\n value=\"19.99\"\n min=\"0\"\n max=\"1000\"\n></s-money-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate input problems clearly to users. This example displays an error message when the entered value is invalid.", - "codeblock": { - "title": "Handle validation errors", - "tabs": [ - { - "title": "html", - "code": "<s-money-field\n label=\"Product cost\"\n min=\"0.01\"\n error=\"Product cost is required\"\n></s-money-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Collect multiple monetary values in a single form. This example groups money fields for price, compare-at price, and cost with individual constraints.", - "codeblock": { - "title": "Combine multiple fields in a form", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"block\" gap=\"base\">\n <s-money-field\n label=\"Price\"\n value=\"0.00\"\n min=\"0.01\"\n max=\"99999.99\"\n details=\"Customers will see this price\"\n ></s-money-field>\n\n <s-money-field\n label=\"Compare at price\"\n value=\"\"\n min=\"0\"\n max=\"99999.99\"\n details=\"Show customers the original price when on sale\"\n ></s-money-field>\n\n <s-money-field\n label=\"Cost per item\"\n value=\"\"\n min=\"0\"\n max=\"99999.99\"\n details=\"Customers won't see this\"\n ></s-money-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n \n\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Number field", - "description": "The number field component captures numeric input with built-in number validation. Use it to collect quantities, prices, or other numeric information.\n\nThe component supports min/max constraints and step increments for guided numeric entry. For monetary values with currency formatting, use [money field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/money-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/numberfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for numeric-only input:** Choose the component when you need strictly numeric values like quantities, measurements, or percentages. For values that might contain letters or symbols (like product codes or phone numbers), use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field) instead.\n- **Provide context with units:** Display units of measurement using prefix or suffix to clarify what the number represents. Without context, merchants might not know if they're entering dollars, kilograms, or percentages.\n- **Set realistic constraints:** Define minimum and maximum values that reflect actual business rules. This guides merchants toward valid inputs and prevents unrealistic values before form submission.\n- **Validate and provide clear feedback:** Always validate numeric input and show specific error messages that explain what went wrong and how to fix it. Generic error messages don't help merchants understand what value to enter." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Setting `inputMode` suggests a keyboard layout on mobile but doesn't prevent merchants from entering non-numeric characters. Always validate input values in your `change` event handler." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the number field component.", - "type": "NumberField", - "typeDefinitions": { - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).", - "isOptional": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The number field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "NumberFieldEvents", - "typeDefinitions": { - "NumberFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberFieldEvents", - "description": "The number field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the number field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the number field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the number field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the number field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface NumberFieldEvents {\n /**\n * A callback fired when the number field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the number field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the number field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the number field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "numberfield-default.png", - "description": "Collect a numeric value from merchants with step controls and a defined range. This example shows a number field with a label, placeholder, step increment, and min/max bounds.", - "codeblock": { - "title": "Add a basic number field", - "tabs": [ - { - "title": "html", - "code": "<s-number-field\n label=\"Quantity\"\n details=\"Number of items in stock\"\n placeholder=\"0\"\n step=\"5\"\n min=\"0\"\n max=\"100\"\n></s-number-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Add a prefix and suffix to provide context for the expected value, such as a currency symbol or unit. This example shows a price field with a dollar sign prefix, currency suffix, and decimal input mode.", - "codeblock": { - "title": "Add a prefix and suffix for currency input", - "tabs": [ - { - "title": "html", - "code": "<s-number-field\n label=\"Product price\"\n value=\"29.99\"\n prefix=\"$\"\n suffix=\"CAD\"\n inputMode=\"decimal\"\n step=\"0.01\"\n min=\"0\"\n></s-number-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display an error message when a value is outside the accepted range or a required field is empty. This example shows a required number field with an error indicating the minimum allowed value.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-number-field\n label=\"Order quantity\"\n value=\"0\"\n min=\"1\"\n max=\"999\"\n step=\"1\"\n required\n error=\"Quantity must be at least 1\"\n></s-number-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Prevent editing by making a number field read-only or fully disabled. This example shows a read-only price field and a disabled tax rate field, both with pre-filled values.", - "codeblock": { - "title": "Disable or make a number field read-only", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-number-field\n label=\"Base price\"\n value=\"49.99\"\n prefix=\"$\"\n readOnly\n ></s-number-field>\n\n <s-number-field\n label=\"Tax rate\"\n value=\"13\"\n suffix=\"%\"\n disabled\n ></s-number-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Ordered list", - "description": "The ordered list component displays a numbered list of related items in a specific sequence. Use ordered list to present step-by-step instructions, ranked items, procedures, or any content where order and sequence matter to understanding.\n\nOrdered lists automatically number items and support nested lists for hierarchical content organization. For items where order doesn't matter, use [unordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/unordered-list).", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/ordered-list.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use when order matters:** Ordered lists communicate sequence, priority, or ranking. Use them for step-by-step instructions, prioritized recommendations, or any content where the numbering provides meaningful information. When order doesn't matter, use [unordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/unordered-list) instead.\n- **Keep items parallel in structure:** Consistent grammar and structure across list items makes content easier to scan and understand. Mixing different writing styles within a list creates cognitive friction for readers.\n- **Write concise items:** List items work best as brief, scannable content. When items become long or complex, they lose the clarity and efficiency that makes lists valuable. Consider restructuring long items into separate sections.\n- **Limit nesting depth:** Nested lists help organize hierarchical content, but deep nesting becomes difficult to follow. When you find yourself nesting beyond two levels, the content structure might be too complex for a list format." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't support custom numbering styles (like Roman numerals, letters, or custom start numbers). All ordered lists use standard decimal numbering (1, 2, 3). If you need alternative numbering schemes, you'll need to create custom list styling." - } - ], - "definitions": [ - { - "title": "Slots", - "description": "The ordered list component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "OrderedListSlots", - "typeDefinitions": { - "OrderedListSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedListSlots", - "description": "The ordered list component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface OrderedListSlots {\n /**\n * 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.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "List item", - "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.\n\nList 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.", - "type": "ListItem", - "typeDefinitions": { - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The list item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ListItemSlots", - "typeDefinitions": { - "ListItemSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItemSlots", - "description": "The list item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the list item, which represents a single entry in an ordered or unordered list.", - "isOptional": true - } - ], - "value": "export interface ListItemSlots {\n /**\n * The content displayed within the list item, which represents a single entry in an ordered or unordered list.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "ordered-list-default.png", - "description": "Create a numbered list of sequential steps. This example shows a basic ordered list with three setup instructions.", - "codeblock": { - "title": "Add a numbered step list", - "tabs": [ - { - "title": "html", - "code": "<s-ordered-list>\n <s-list-item>Add products to your catalog</s-list-item>\n <s-list-item>Set up payment methods</s-list-item>\n <s-list-item>Configure shipping zones</s-list-item>\n</s-ordered-list>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Add products to your catalog\n Set up payment methods\n Configure shipping zones\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Nest ordered lists inside list items to break down complex steps into sub-steps. This example shows a product setup workflow where the first step has nested instructions.", - "codeblock": { - "title": "Create nested steps with sub-instructions", - "tabs": [ - { - "title": "html", - "code": "<s-ordered-list>\n <s-list-item>\n Create product listing with title and description\n <s-ordered-list>\n <s-list-item>Add high-quality product images</s-list-item>\n <s-list-item>Set SEO title and meta description</s-list-item>\n </s-ordered-list>\n </s-list-item>\n <s-list-item>Configure pricing and inventory tracking</s-list-item>\n <s-list-item>Set up product variants (size, color, material)</s-list-item>\n <s-list-item>Enable inventory tracking and set stock levels</s-list-item>\n <s-list-item>Review and publish product to storefront</s-list-item>\n</s-ordered-list>\n", - "language": "html" - }, - { - "code": "\n \n Create product listing with title and description\n \n Add high-quality product images\n Set SEO title and meta description\n \n \n Configure pricing and inventory tracking\n Set up product variants (size, color, material)\n Enable inventory tracking and set stock levels\n Review and publish product to storefront\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Paragraph", - "description": "The paragraph component displays blocks of text content and can contain inline elements like buttons, links, or emphasized text. Use paragraph to present standalone blocks of readable content, descriptions, or explanatory text.\n\nParagraphs support alignment options and can wrap inline components to create rich, formatted content blocks. For inline text styling, use [text](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/text).", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/paragraph.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Write in short, scannable blocks:** Keep paragraphs to 2-4 sentences to improve readability. Merchants scan more than they read, so break long content into digestible chunks. Use plain language and avoid jargon.\n- **Apply tones to communicate intent:** Use semantic tones like critical for errors, caution for warnings, and success for confirmations. Tones help merchants quickly understand the nature of information, but don't rely on color alone—pair with clear language.\n- **Consider accessibility in all contexts:** Use screen-reader-only text to provide context that sighted merchants get from layout or icons. Make sure tone colors have sufficient contrast for readability.\n- **Use line clamping strategically:** Line clamping helps manage space in constrained layouts like cards or previews, but truncated content should never hide critical information." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Paragraphs render as block-level elements with spacing above and below. This spacing is designed for body content and might create unwanted gaps in tightly packed layouts.\n- Line clamping truncates text visually but doesn't provide tooltips or expandable content. Truncated information isn't fully accessible unless you provide an alternative way to view the complete text.\n- Tone colors are optimized for light backgrounds. Using toned paragraphs on dark or colored backgrounds might result in insufficient contrast for accessibility." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the paragraph component.", - "type": "Paragraph", - "typeDefinitions": { - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The paragraph component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ParagraphSlots", - "typeDefinitions": { - "ParagraphSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ParagraphSlots", - "description": "The paragraph component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The paragraph text content displayed within the paragraph component, which presents a block of related text with appropriate styling.", - "isOptional": true - } - ], - "value": "export interface ParagraphSlots {\n /**\n * The paragraph text content displayed within the paragraph component, which presents a block of related text with appropriate styling.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "paragraph-default.png", - "description": "Create a paragraph for body text content. This example shows the basic paragraph component using default styling.", - "codeblock": { - "title": "Add a basic paragraph", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph>\n Shopify POS is the easiest way to sell your products in person. Available for\n iPad, iPhone, and Android.\n</s-paragraph>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Shopify POS is the easiest way to sell your products in person. Available for\n iPad, iPhone, and Android.\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Apply semantic tones to convey different types of information through color. This example shows all five tones—`info`, `success`, `caution`, `warning`, and `critical`—for common merchant-facing messages.", - "codeblock": { - "title": "Communicate status with tones", - "tabs": [ - { - "title": "html", - "code": "<s-section>\n <s-paragraph tone=\"info\" color=\"base\">\n Your order will be processed within 2-3 business days.\n </s-paragraph>\n\n <s-paragraph tone=\"success\" color=\"base\">\n Payment successfully processed.\n </s-paragraph>\n\n <s-paragraph tone=\"caution\" color=\"base\">\n Review shipping address before processing.\n </s-paragraph>\n\n <s-paragraph tone=\"warning\" color=\"base\">\n Inventory levels are running low for this product.\n </s-paragraph>\n\n <s-paragraph tone=\"critical\" color=\"base\">\n This order requires immediate attention due to shipping delays.\n </s-paragraph>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n Your order will be processed within 2-3 business days.\n \n\n \n Payment successfully processed.\n \n\n \n Review shipping address before processing.\n \n\n \n Inventory levels are running low for this product.\n \n\n \n This order requires immediate attention due to shipping delays.\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Limit the number of visible lines in a paragraph using the `lineClamp` property. This example shows a product description truncated to a single line with an ellipsis in a constrained container.", - "codeblock": { - "title": "Truncate long text with line clamping", - "tabs": [ - { - "title": "html", - "code": "<s-box inlineSize=\"300px\">\n <s-paragraph lineClamp=\"1\">\n Premium organic cotton t-shirt featuring sustainable manufacturing\n processes, ethically sourced materials, and carbon-neutral shipping.\n Available in multiple colors and sizes with customization options for your\n brand.\n </s-paragraph>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n Premium organic cotton t-shirt featuring sustainable manufacturing\n processes, ethically sourced materials, and carbon-neutral shipping.\n Available in multiple colors and sizes with customization options for your\n brand.\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use `fontVariantNumeric` set to tabular-nums to render numbers with consistent widths for even alignment. This example shows tabular number formatting for financial data.", - "codeblock": { - "title": "Align numbers with tabular formatting", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph fontVariantNumeric=\"tabular-nums\">\n Orders: 1,234 Revenue: $45,678.90 Customers: 890\n</s-paragraph>\n", - "language": "html" - }, - { - "code": "\n Orders: 1,234 Revenue: $45,678.90 Customers: 890\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `accessibilityVisibility` property to create text that is only available to screen readers. This example shows a paragraph providing sort context for a table that assistive technologies can read.", - "codeblock": { - "title": "Add screen-reader-only text", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph accessibilityVisibility=\"exclusive\">\n Table sorted by date, newest first.\n</s-paragraph>\n", - "language": "html" - }, - { - "code": "\n Table sorted by date, newest first.\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `color` property to `subdued` for secondary information like helper text, disclaimers, and supplementary descriptions. This example shows a subdued paragraph providing guidance below a form action.", - "codeblock": { - "title": "De-emphasize secondary text with subdued color", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph color=\"subdued\">\n Changes will take effect the next time the customer visits your store.\n</s-paragraph>\n", - "language": "html" - }, - { - "code": "\n Changes will take effect the next time the customer visits your store.\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `dir` property to rtl for right-to-left languages like Arabic and Hebrew. This example shows a paragraph rendered in Arabic with right-to-left text direction.", - "codeblock": { - "title": "Render right-to-left text", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph dir=\"rtl\">\n محتوى النص باللغة العربية\n</s-paragraph>", - "language": "html" - }, - { - "code": "\n محتوى النص باللغة العربية\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Password field", - "description": "The password field component securely collects sensitive information from users. Use password field for password entry, where input characters are automatically masked for privacy.\n\nPassword fields support validation, help text, and accessibility features to create secure and user-friendly authentication experiences. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/passwordfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Support password managers:** Ensure the component works correctly with password managers by setting appropriate autocomplete values. Password managers help merchants create and store strong passwords, improving overall security.\n- **Communicate requirements clearly:** Show all password requirements before merchants start typing, not after they've already entered an invalid password. This prevents frustration and reduces form abandonment.\n- **Provide helpful feedback for password creation:** When merchants create new passwords, show real-time strength feedback and explain what would make their password stronger. Help them understand security trade-offs rather than just enforcing arbitrary rules.\n- **Never block paste functionality:** Merchants rely on password managers and other tools that use paste. Blocking paste forces merchants toward weaker passwords they can remember and type manually.\n- **Validate server-side:** Always validate passwords on the server. Client-side constraints can be bypassed by password managers, browser extensions, or merchants with developer tools. Use client-side validation for immediate feedback, not security." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't include a built-in show/hide password toggle. If you need this feature (recommended for better UX), you must implement it yourself by conditionally switching between a password field and a text field." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the password field component.", - "type": "PasswordField", - "typeDefinitions": { - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.", - "isOptional": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The password field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "PasswordFieldEvents", - "typeDefinitions": { - "PasswordFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordFieldEvents", - "description": "The password field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the password field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the password field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the password field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the password field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface PasswordFieldEvents {\n /**\n * A callback fired when the password field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the password field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the password field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the password field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "description": "Securely collect sensitive credentials from users. This example pairs a label with masked input.", - "codeblock": { - "title": "Collect a password", - "tabs": [ - { - "title": "html", - "code": "<s-password-field\n label=\"Password\"\n placeholder=\"Enter your password\"\n details=\"Must be at least 8 characters long\"\n minLength=\"8\"\n></s-password-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Enforce password requirements before submission. This example configures a required field with minimum length validation and autocomplete for new passwords.", - "codeblock": { - "title": "Set validation rules", - "tabs": [ - { - "title": "html", - "code": "<s-password-field\n label=\"Password\"\n name=\"password\"\n required\n minLength=\"8\"\n autocomplete=\"new-password\"\n></s-password-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate password problems clearly to users. This example displays an error message when the password doesn't meet length requirements.", - "codeblock": { - "title": "Show validation errors", - "tabs": [ - { - "title": "html", - "code": "<s-password-field\n label=\"Password\"\n name=\"password\"\n error=\"Password must be at least 8 characters\"\n minLength=\"8\"\n autocomplete=\"new-password\"\n></s-password-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Help users understand password requirements upfront. This example adds helper text beneath the field explaining what makes a valid password.", - "codeblock": { - "title": "Add helper text", - "tabs": [ - { - "title": "html", - "code": "<s-password-field\n label=\"Create password\"\n name=\"new-password\"\n details=\"Password must be at least 8 characters and include uppercase, lowercase, and numbers\"\n minLength=\"8\"\n autocomplete=\"new-password\"\n></s-password-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Create a complete authentication form. This example combines a password field with an email field for login or registration.", - "codeblock": { - "title": "Build a login form", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-email-field\n label=\"Email\"\n name=\"email\"\n autocomplete=\"username\"\n required\n ></s-email-field>\n <s-password-field\n label=\"Password\"\n name=\"password\"\n autocomplete=\"current-password\"\n required\n ></s-password-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display a password requirements checklist alongside the field. This example lists requirements like character length and case requirements.", - "codeblock": { - "title": "Display a requirement checklist", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"large-100\">\n <s-password-field\n label=\"Create password\"\n name=\"password\"\n value=\"example-password\"\n autocomplete=\"new-password\"\n required\n ></s-password-field>\n <s-stack gap=\"small-200\">\n <s-text tone=\"success\">✓ At least 8 characters</s-text>\n <s-text color=\"subdued\">○ Contains uppercase letter</s-text>\n <s-text color=\"subdued\">○ Contains lowercase letter</s-text>\n <s-text color=\"subdued\">○ Contains number</s-text>\n </s-stack>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n ✓ At least 8 characters\n ○ Contains uppercase letter\n ○ Contains lowercase letter\n ○ Contains number\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Query container", - "description": "The query container component establishes a container query context for responsive design. Use query container to define an element as a containment context, enabling child components or styles to adapt based on the container's size rather than viewport width.\n\nQuery containers support modern responsive patterns where components respond to their container dimensions, creating more flexible and reusable layouts.", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "requires": "", - "thumbnail": "/assets/templated-apis-screenshots/admin/components/querycontainer.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for component-level responsiveness:** Query containers allow components to adapt based on their container size rather than viewport size. This is valuable for components that appear in different contexts with varying widths, like a product card that might appear in a sidebar or main content area.\n- **Name containers when you have multiple:** When you have multiple query container components and need to target specific ones with different queries, provide descriptive container names. Without names, all containers respond to the same queries.\n- **Understand the relationship with CSS:** query container establishes the containment context, but you must write the actual container query CSS rules. The component doesn't automatically make content responsive - it enables you to write responsive CSS.\n- **Consider performance impact:** Each query container adds browser work to track container dimensions and apply conditional styles. Use them where you need container-based responsiveness, not as a wrapper for every element." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The query container component doesn't expose the container's current dimensions to JavaScript. It's purely for enabling CSS container queries. If you need to access container dimensions programmatically, you'll need to use the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) directly." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the query container component.", - "type": "QueryContainer", - "typeDefinitions": { - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The query container component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "QueryContainerSlots", - "typeDefinitions": { - "QueryContainerSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainerSlots", - "description": "The query container component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface QueryContainerSlots {\n /**\n * 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.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "ordered-list-default.png", - "description": "Wrap content in a query container to enable responsive styling based on the container's width. This example shows a box whose padding changes when the container exceeds 500px.", - "codeblock": { - "title": "Add a responsive container", - "tabs": [ - { - "title": "html", - "code": "<s-query-container>\n <s-box\n padding=\"@container (inline-size > 500px) large-500, none\"\n background=\"strong\"\n >\n Padding is applied when the inline-size '>' 500px\n </s-box>\n</s-query-container>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n 500px) large-500, none\"\n background=\"strong\"\n >\n Padding is applied when the inline-size '>' 500px\n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `containerName` property to target a specific query container when multiple containers are present. This example shows the same named container at two different widths (375px and 450px) to demonstrate how the responsive padding changes at the 400px breakpoint.", - "codeblock": { - "title": "Target a named container for responsive queries", - "tabs": [ - { - "title": "html", - "code": "<s-box inlineSize=\"375px\">\n <s-query-container id=\"product-section\" containerName=\"product\">\n <s-box padding=\"@container product (inline-size > 400px) large-500, none\">\n <s-text>Padding is different depending on the container size</s-text>\n </s-box>\n </s-query-container>\n</s-box>\n\n<s-box inlineSize=\"450px\">\n <s-query-container id=\"product-section\" containerName=\"product\">\n <s-box padding=\"@container product (inline-size > 400px) large-500, none\">\n <s-text>Padding is different depending on the container size</s-text>\n </s-box>\n </s-query-container>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n 400px) large-500, none\">\n Padding is different depending on the container size\n \n \n\n\n\n \n 400px) large-500, none\">\n Padding is different depending on the container size\n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Search field", - "description": "The search field component captures search terms for filtering and search functionality. Use it to enable inline search within specific sections or lists, like filtering products or searching customers. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/searchfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for inline search:** Choose the component for filtering content within specific sections or lists. For global navigation or complex multi-step searches, use a more robust search pattern.\n- **Make the search scope clear:** Users need to understand what they're searching through. Use specific labels and placeholders that explain what content will be searched and what attributes they can search by.\n- **Provide immediate feedback:** Show search results or filtered content as merchants type when possible. Immediate feedback helps merchants refine their search query and builds confidence in the search functionality.\n- **Handle empty states gracefully:** When the search field is cleared or returns no results, show appropriate messaging. For cleared searches, restore the full content list. For no results, suggest alternative actions or broaden the search criteria.\n- **Set appropriate search thresholds:** Prevent searches that would return overwhelming or meaningless results. Starting searches after 2-3 characters gives the system enough information to provide useful results." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the search field component.", - "type": "SearchField", - "typeDefinitions": { - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.", - "isOptional": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The search field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "SearchFieldEvents", - "typeDefinitions": { - "SearchFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchFieldEvents", - "description": "The search field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the search field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the search field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the search field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the search field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface SearchFieldEvents {\n /**\n * A callback fired when the search field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the search field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the search field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the search field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "searchfield-default.png", - "description": "Add a search input so merchants can find items quickly. This example shows a search field with a visually hidden label and placeholder text.", - "codeblock": { - "title": "Add a basic search field", - "tabs": [ - { - "title": "html", - "code": "<s-search-field\n label=\"Search\"\n labelAccessibilityVisibility=\"exclusive\"\n placeholder=\"Search items\"\n></s-search-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Display an error message when a search query is invalid or encounters a problem. This example shows a search field with a pre-filled query and a static error message.", - "codeblock": { - "title": "Show a search error", - "tabs": [ - { - "title": "html", - "code": "<s-search-field\n label=\"Search orders\"\n name=\"orderSearch\"\n error=\"No results found\"\n value=\"xyz123\"\n></s-search-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable a search field to prevent interaction when search is temporarily unavailable. This example shows a disabled search field with placeholder text explaining the state.", - "codeblock": { - "title": "Disable a search field", - "tabs": [ - { - "title": "html", - "code": "<s-search-field\n label=\"Search customers\"\n name=\"customerSearch\"\n disabled\n placeholder=\"Search is currently unavailable\"\n></s-search-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set minimum and maximum character lengths to control the search query length. This example shows a search field that requires at least 3 characters and allows up to 50.", - "codeblock": { - "title": "Set character length limits", - "tabs": [ - { - "title": "html", - "code": "<s-search-field\n label=\"Search collections\"\n name=\"collectionSearch\"\n minLength=\"3\"\n maxLength=\"50\"\n placeholder=\"Enter at least 3 characters\"\n></s-search-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Section", - "description": "The section component groups related content into clearly-defined thematic areas with consistent styling and structure. Use section to organize page content into logical blocks, each with its own heading and visual container.\n\nSections automatically adapt their styling based on nesting depth and adjust heading levels to maintain meaningful, accessible page hierarchies. For simple visual separation without headings, use [divider](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/divider).", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "isVisualComponent": true, - "thumbnail": "/assets/templated-apis-screenshots/admin/components/section.png", - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use to group related content:** The component provides semantic structure and visual hierarchy for grouping related content. Each section should contain a cohesive set of information or controls that belong together.\n- **Provide meaningful headings:** Section headings help merchants scan and navigate content. Write headings that clearly describe what's in the section rather than using vague labels.\n- **Nest thoughtfully:** Nested sections create visual and semantic hierarchy, but excessive nesting creates overly complex structures. Limit nesting to 2-3 levels where the hierarchy is meaningful and helps merchants understand the content organization.\n- **Consider when to remove padding:** Full-width content like tables or images might need to extend to section edges. Remove padding when the content design requires it, but ensure nested content within has appropriate spacing.\n- **Use accessibility labels when needed:** When the visible heading doesn't fully convey the section's purpose to screen reader users, provide an accessibility label with additional context." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't include expand/collapse functionality. If you need collapsible sections, you'll need to implement this using additional state management and accessibility attributes.\n- Section headings automatically increment their semantic level based on nesting depth, but they stop at h4 for deeply nested sections. Content nested beyond three levels might have less clear document structure." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the section component.", - "type": "Section", - "typeDefinitions": { - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The section component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "SectionSlots", - "typeDefinitions": { - "SectionSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SectionSlots", - "description": "The section component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the section component, which groups related elements together in a logical unit with an optional heading.", - "isOptional": true - } - ], - "value": "export interface SectionSlots {\n /**\n * The content displayed within the section component, which groups related elements together in a logical unit with an optional heading.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "section-default.png", - "description": "Create a section with a heading to group related content. This example shows a basic section with a title and description text.", - "codeblock": { - "title": "Add a content section with a heading", - "tabs": [ - { - "title": "html", - "code": "<s-section heading=\"Online store dashboard\">\n <s-paragraph>View a summary of your online store’s performance.</s-paragraph>\n</s-section>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n View a summary of your online store’s performance.\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use a section with a heading and form fields to group related inputs. This example shows a customer information form with text and email fields inside a top-level section.", - "codeblock": { - "title": "Group form fields in a section", - "tabs": [ - { - "title": "html", - "code": "<!-- Level 1 section - elevated with shadow on desktop -->\n<s-section heading=\"Customer information\">\n <s-text-field label=\"First name\" value=\"John\"></s-text-field>\n <s-text-field label=\"Last name\" value=\"Doe\"></s-text-field>\n <s-email-field label=\"Email\" value=\"john@example.com\"></s-email-field>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Nest sections to create visual and semantic hierarchy that automatically adjusts heading levels and styling. This example shows three levels of nesting for order details, customer information, and a billing address.", - "codeblock": { - "title": "Create nested sections with automatic visual hierarchy", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <!-- Level 1 section -->\n <s-section heading=\"Order details\">\n <s-paragraph>Order #1234 placed on January 15, 2024</s-paragraph>\n\n <!-- Level 2 section - nested with different visual treatment -->\n <s-section heading=\"Customer\">\n <s-text-field label=\"Name\" value=\"Jane Smith\"></s-text-field>\n <s-text-field label=\"Email\" value=\"jane@example.com\"></s-text-field>\n\n <!-- Level 3 section - further nested -->\n <s-section heading=\"Billing address\">\n <s-text-field label=\"Street\" value=\"123 Main St\"></s-text-field>\n <s-text-field label=\"City\" value=\"Toronto\"></s-text-field>\n </s-section>\n </s-section>\n\n <!-- Another Level 2 section -->\n <s-section heading=\"Items\">\n <s-paragraph>2 items totaling $49.99</s-paragraph>\n </s-section>\n </s-section>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n Order #1234 placed on January 15, 2024\n\n \n \n \n \n\n \n \n \n \n \n \n\n \n \n 2 items totaling $49.99\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `accessibilityLabel` property to provide screen readers with additional context beyond the visible heading. This example shows a payment summary section and a label describing the contents of the section.", - "codeblock": { - "title": "Add an accessibility label for screen readers", - "tabs": [ - { - "title": "html", - "code": "<s-section\n heading=\"Payment summary\"\n accessibilityLabel=\"Order payment breakdown and totals\"\n>\n <s-stack gap=\"base\">\n <s-paragraph>Subtotal: $42.99</s-paragraph>\n <s-paragraph>Tax: $5.59</s-paragraph>\n <s-paragraph>Shipping: $1.41</s-paragraph>\n <s-paragraph>\n <s-text type=\"strong\">Total: $49.99</s-text>\n </s-paragraph>\n </s-stack>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n Subtotal: $42.99\n Tax: $5.59\n Shipping: $1.41\n \n Total: $49.99\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `padding` property to `none` so that content like tables can extend to the section edges. This example shows a product table rendered full-width within a section.", - "codeblock": { - "title": "Remove padding for full-width content", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Product</s-table-header>\n <s-table-header listSlot=\"labeled\">Price</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>Cotton t-shirt</s-table-cell>\n <s-table-cell>$29.99</s-table-cell>\n <s-table-cell><s-badge tone=\"success\">Active</s-badge></s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n Product\n Price\n Status\n \n \n \n Cotton t-shirt\n $29.99\n Active\n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Select", - "description": "The select component allows users to choose one option from a dropdown menu. Use select when presenting four or more choices to keep interfaces uncluttered and scannable, or when space is limited.\n\nSelect components support option grouping, placeholder text, help text, and validation states to create clear selection interfaces. For more visual selection layouts with radio buttons or checkboxes, use [choice list](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/choice-list).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/select.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for choosing from predefined options:** Select works best when merchants pick from a known list of options. When merchants need to enter custom values or search through many options, consider [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field) with autocomplete or a searchable dropdown pattern instead.\n- **Organize options thoughtfully:** The order of options affects how quickly merchants find what they need. Group related options together, put common choices first, or use alphabetical order when no natural hierarchy exists.\n- **Make options scannable:** Merchants should be able to quickly distinguish between options. Include enough context in each option label so merchants don't need to open and read multiple options to find the right one.\n- **Handle default selections appropriately:** Pre-select an option when there's a clear default choice, but use a placeholder when merchants should make an intentional selection. Avoid confusing merchants with unclear initial states.\n- **Provide clear validation feedback:** When selection is required or invalid, explain what the merchant needs to do. Context-specific error messages help merchants complete forms faster than generic validation messages." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't include search or filtering functionality. For option lists where merchants need to search (like country selection with 200+ countries), implement a custom autocomplete or searchable dropdown pattern.\n- The component only supports selecting one option at a time. For multi-select scenarios, use a [choice list](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/choice-list) with checkboxes or build a custom multi-select component.\n- Rendering 500+ options can cause performance issues, especially on mobile devices. The browser must render all options in the DOM even though only one's visible.\n- Browser native select dropdowns have limited styling capabilities. Dropdown appearance varies by browser and OS, and can't be fully customized with CSS. For custom-styled dropdowns, you must build a custom component using [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) and [menu](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/menu).\n- Options only support plain text. You can't include icons, images, badges, or formatted text within option labels. For rich option content, build a custom dropdown using [menu](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/menu) components." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the select component.", - "type": "Select", - "typeDefinitions": { - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@12030", - "value": "boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@12029", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.", - "isOptional": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The select component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "SelectEvents", - "typeDefinitions": { - "SelectEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SelectEvents", - "description": "The select component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the select value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the select.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface SelectEvents {\n /**\n * A callback fired when the select value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the select.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The select component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "SelectSlots", - "typeDefinitions": { - "SelectSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SelectSlots", - "description": "The select component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface SelectSlots {\n /**\n * 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.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Option", - "description": "Represents a single option within a select component. Use only as a child of `s-select` components.", - "type": "Option", - "typeDefinitions": { - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\".", - "isOptional": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The option component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "OptionSlots", - "typeDefinitions": { - "OptionSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionSlots", - "description": "The option component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text or elements displayed as the option label, which identifies the selectable choice to users in a dropdown or selection list.", - "isOptional": true - } - ], - "value": "export interface OptionSlots {\n /**\n * The text or elements displayed as the option label, which identifies the selectable choice to users in a dropdown or selection list.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Option group", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "type": "OptionGroup", - "typeDefinitions": { - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The option group component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "OptionGroupSlots", - "typeDefinitions": { - "OptionGroupSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroupSlots", - "description": "The option group component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The selectable options displayed in the dropdown list. Accepts option components for individual selectable items within this group.", - "isOptional": true - } - ], - "value": "export interface OptionGroupSlots {\n /**\n * The selectable options displayed in the dropdown list. Accepts option components for individual selectable items within this group.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "description": "Let users pick one option from a predefined list. This example pairs a label with selectable options.", - "codeblock": { - "title": "Create a dropdown menu", - "tabs": [ - { - "title": "html", - "code": "<s-select label=\"Date range\">\n <s-option value=\"1\">Today</s-option>\n <s-option value=\"2\">Yesterday</s-option>\n <s-option value=\"3\">Last 7 days</s-option>\n <s-option-group label=\"Custom ranges\">\n <s-option value=\"4\">Last 30 days</s-option>\n <s-option value=\"5\">Last 90 days</s-option>\n </s-option-group>\n</s-select>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Today\n Yesterday\n Last 7 days\n \n Last 30 days\n Last 90 days\n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Provide sorting controls for lists or tables. This example configures sort options with a pre-selected default value.", - "codeblock": { - "title": "Add sorting options", - "tabs": [ - { - "title": "html", - "code": "<s-select label=\"Sort products by\" value=\"newest\">\n <s-option value=\"newest\">Newest first</s-option>\n <s-option value=\"oldest\">Oldest first</s-option>\n <s-option value=\"title\">Title A–Z</s-option>\n <s-option value=\"price-low\">Price: low to high</s-option>\n <s-option value=\"price-high\">Price: high to low</s-option>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n Newest first\n Oldest first\n Title A–Z\n Price: low to high\n Price: high to low\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Show instructional text before a selection is made. This example uses placeholder text to describe what the user should choose.", - "codeblock": { - "title": "Add placeholder text", - "tabs": [ - { - "title": "html", - "code": "<s-select\n label=\"Product category\"\n placeholder=\"Choose category for better organization\"\n>\n <s-option value=\"clothing\">Clothing & apparel</s-option>\n <s-option value=\"accessories\">Accessories & jewelry</s-option>\n <s-option value=\"home-garden\">Home & garden</s-option>\n <s-option value=\"electronics\">Electronics & tech</s-option>\n <s-option value=\"books\">Books & media</s-option>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n Clothing & apparel\n Accessories & jewelry\n Home & garden\n Electronics & tech\n Books & media\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate selection problems clearly to users. This example displays an error message when a required selection is missing.", - "codeblock": { - "title": "Show validation errors", - "tabs": [ - { - "title": "html", - "code": "<s-select\n label=\"Shipping origin\"\n error=\"Select your primary shipping location to calculate accurate rates for customers\"\n required\n>\n <s-option value=\"ca\">Canada</s-option>\n <s-option value=\"us\">United States</s-option>\n <s-option value=\"mx\">Mexico</s-option>\n <s-option value=\"uk\">United Kingdom</s-option>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n Canada\n United States\n Mexico\n United Kingdom\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Make long option lists easier to scan. This example organizes options into logical groups like geographical regions.", - "codeblock": { - "title": "Group options by category", - "tabs": [ - { - "title": "html", - "code": "<s-select label=\"Shipping destination\">\n <s-option-group label=\"North America\">\n <s-option value=\"ca\">Canada</s-option>\n <s-option value=\"us\">United States</s-option>\n <s-option value=\"mx\">Mexico</s-option>\n </s-option-group>\n <s-option-group label=\"Europe\">\n <s-option value=\"uk\">United Kingdom</s-option>\n <s-option value=\"fr\">France</s-option>\n <s-option value=\"de\">Germany</s-option>\n <s-option value=\"it\">Italy</s-option>\n </s-option-group>\n <s-option-group label=\"Asia Pacific\">\n <s-option value=\"au\">Australia</s-option>\n <s-option value=\"jp\">Japan</s-option>\n <s-option value=\"sg\">Singapore</s-option>\n </s-option-group>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n \n Canada\n United States\n Mexico\n \n \n United Kingdom\n France\n Germany\n Italy\n \n \n Australia\n Japan\n Singapore\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Visually indicate the purpose of a select field. This example adds a sort icon that signals filtering functionality.", - "codeblock": { - "title": "Add an icon", - "tabs": [ - { - "title": "html", - "code": "<s-select label=\"Filter orders by\" icon=\"sort\">\n <s-option value=\"date\">Order date</s-option>\n <s-option value=\"status\">Fulfillment status</s-option>\n <s-option value=\"total\">Order total</s-option>\n <s-option value=\"customer\">Customer name</s-option>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n Order date\n Fulfillment status\n Order total\n Customer name\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Lock a selection when changes aren't allowed. This example disables a dropdown while preserving its selected value.", - "codeblock": { - "title": "Disable the select", - "tabs": [ - { - "title": "html", - "code": "<s-select label=\"Product type\" disabled value=\"physical\">\n <s-option value=\"physical\">Physical product</s-option>\n <s-option value=\"digital\">Digital product</s-option>\n <s-option value=\"service\">Service</s-option>\n <s-option value=\"gift-card\">Gift card</s-option>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n Physical product\n Digital product\n Service\n Gift card\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Spinner", - "description": "The spinner component displays an animated indicator showing users that content or actions are loading. Use spinner to communicate ongoing processes like fetching data, processing requests, or waiting for operations to complete.\n\nSpinners support multiple sizes and should be used for page or section loading states. For button loading states, use the `loading` property on the [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) component instead.", - "category": "Web components", - "subCategory": "Feedback and status indicators", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/spinner.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Show for asynchronous operations:** Display spinners when loading takes longer than 500ms for operations like saving forms, fetching data, or processing actions. For instant actions, spinners might flash distractingly.\n- **Scope to specific areas:** Place spinners within the component being loaded (like inside a button during save, or in a section during data fetch) rather than blocking the entire interface.\n- **Provide context with labels:** Always include `accessibilityLabel` describing what's loading, like **Loading products**, **Saving changes**, or **Processing payment**. This helps screen reader users understand what's happening.\n- **Pair with action feedback:** After a spinner completes, show clear success or error messages so merchants know the operation finished and its outcome." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component shows indeterminate loading only. It can't display progress percentage or time remaining. For operations with known duration or measurable progress, consider using a progress bar component or custom solution.\n- The component continues spinning indefinitely until you remove it. It doesn't automatically stop after a timeout or show error states. You must implement timeout logic and error handling yourself.\n- Rendering many spinners simultaneously (like in a table with 50+ rows each showing a spinner) can cause performance issues, especially on older mobile devices.\n- The component itself doesn't provide a way to cancel the loading operation. If merchants need to cancel, you must implement separate UI controls like a **Cancel** [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) alongside the spinner." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the spinner component.", - "type": "Spinner", - "typeDefinitions": { - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'", - "isOptional": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - } - ], - "defaultExample": { - "image": "spinner-default.png", - "description": "Create a spinner with an accessibility label to indicate a loading state. This example shows an extra large spinner with a descriptive label for screen readers.", - "codeblock": { - "title": "Add a loading spinner", - "tabs": [ - { - "title": "html", - "code": "<s-spinner accessibilityLabel=\"Loading\" size=\"large-100\"></s-spinner>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `size` property to match the spinner to its context. This example shows all three sizes—base for inline use, large for section loading, and large-100 for full-page states.", - "codeblock": { - "title": "Use spinners of different sizes", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" alignItems=\"center\" gap=\"large\">\n <s-spinner accessibilityLabel=\"Loading\" size=\"base\"></s-spinner>\n <s-spinner accessibilityLabel=\"Loading\" size=\"large\"></s-spinner>\n <s-spinner accessibilityLabel=\"Loading\" size=\"large-100\"></s-spinner>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Center a spinner with a text label in a section to communicate when content is loading. This example shows a vertically stacked spinner and status message for a product list.", - "codeblock": { - "title": "Show a loading state in a content section", - "tabs": [ - { - "title": "html", - "code": "<s-stack alignItems=\"center\" gap=\"base\" padding=\"large\">\n <s-spinner accessibilityLabel=\"Loading products\" size=\"large\"></s-spinner>\n <s-text>Loading products...</s-text>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Loading products...\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place a compact spinner inline with a text label for form submissions and quick actions. This example shows a horizontal layout with a spinner and saving status message.", - "codeblock": { - "title": "Display an inline loading indicator", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" alignItems=\"center\" gap=\"small\">\n <s-spinner accessibilityLabel=\"Saving\"></s-spinner>\n <s-text>Saving...</s-text>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Saving...\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Stack", - "description": "The stack component organizes elements horizontally or vertically along the block or inline axis. Use stack to structure layouts, group related components, control spacing between elements, or create flexible arrangements that adapt to content.\n\nStacks support gap spacing, alignment, wrapping, and distribution properties to create consistent, responsive layouts without custom CSS. For complex multi-column layouts with precise grid positioning, use [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid).", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/stack.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Match spacing to content relationships:** Spacing communicates how closely related items are. Tight spacing suggests items belong together, while generous spacing separates distinct groups. Choose spacing that reflects your content hierarchy.\n- **Understand wrapping behavior:** Inline stacks wrap automatically when content doesn't fit. This is often desired, but if you need precise control over line breaks or multi-row layouts, consider alternative layout approaches.\n- **Use alignment intentionally:** Alignment properties determine how items distribute within the stack. Default alignment works for most cases, but consider alignment when items have different sizes or when you need specific positioning." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't support variable spacing between individual items. All items in a stack have uniform gap spacing. If you need different spacing between specific items, you'll need to nest multiple stacks or use a different layout approach." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the stack component.", - "type": "Stack", - "typeDefinitions": { - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The stack component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "StackSlots", - "typeDefinitions": { - "StackSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "StackSlots", - "description": "The stack component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The child elements displayed within the stack component, which are arranged vertically or horizontally with consistent spacing.", - "isOptional": true - } - ], - "value": "export interface StackSlots {\n /**\n * The child elements displayed within the stack component, which are arranged vertically or horizontally with consistent spacing.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "stack-default.png", - "description": "Create a vertical stack to arrange items with consistent spacing. This example shows badges stacked vertically with base gap spacing.", - "codeblock": { - "title": "Add a vertical stack", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-badge>Paid</s-badge>\n <s-badge>Processing</s-badge>\n <s-badge>Filled</s-badge>\n <s-badge>Completed</s-badge>\n</s-stack>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Paid\n Processing\n Filled\n Completed\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `direction` property to arrange items horizontally. This example shows badges laid out side by side with spacing between them.", - "codeblock": { - "title": "Arrange items horizontally with an inline stack", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"large-100\">\n <s-badge>Item 1</s-badge>\n <s-badge>Item 2</s-badge>\n <s-badge>Item 3</s-badge>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Item 1\n Item 2\n Item 3\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `justifyContent` and `alignItems` properties to control how items are positioned within the stack. This example shows items vertically centered and aligned at the right, center, and left positions in the stack.", - "codeblock": { - "title": "Control item alignment and distribution", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" justifyContent=\"space-between\" alignItems=\"center\">\n <s-text>Left aligned</s-text>\n <s-text>Centered text</s-text>\n <s-text>Right aligned</s-text>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Left aligned\n Centered text\n Right aligned\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the ``gap`, `rowGap`, and `columnGap properties` to fine-tune spacing between items in different directions. This example shows a stack with separate row and column gap values.", - "codeblock": { - "title": "Fine-tune spacing with row and column gaps", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"large-100 large-500\" rowGap=\"large-300\" columnGap=\"large-200\">\n <s-box\n padding=\"large-100\"\n borderColor=\"base\"\n borderWidth=\"small\"\n borderRadius=\"large-100\"\n >\n Box with custom spacing\n </s-box>\n <s-box\n padding=\"large-100\"\n borderColor=\"base\"\n borderWidth=\"small\"\n borderRadius=\"large-100\"\n >\n Another box\n </s-box>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Box with custom spacing\n \n \n Another box\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use container queries to change the stack direction and gap based on available width. This example shows a stack that switches from vertical to horizontal when the container exceeds 500px.", - "codeblock": { - "title": "Create a responsive stack with container queries", - "tabs": [ - { - "title": "html", - "code": "<s-query-container>\n <s-stack\n direction=\"@container (inline-size > 500px) inline, block\"\n gap=\"@container (inline-size > 500px) base, small-300\"\n >\n <s-box\n padding=\"large-100\"\n borderColor=\"base\"\n borderWidth=\"small\"\n borderRadius=\"large-100\"\n >\n Content 1\n </s-box>\n <s-box\n padding=\"large-100\"\n borderColor=\"base\"\n borderWidth=\"small\"\n borderRadius=\"large-100\"\n >\n Content 2\n </s-box>\n </s-stack>\n</s-query-container>", - "language": "html" - }, - { - "code": "\n 500px) inline, block\"\n gap=\"@container (inline-size > 500px) base, small-300\"\n >\n \n Content 1\n \n \n Content 2\n \n \n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Switch", - "description": "The switch component provides a clear way for users to toggle options or settings on and off. Use switch for binary controls that take effect immediately, like enabling features, activating settings, or controlling visibility.\n\nSwitches provide instant visual feedback and are ideal for settings that don't require a save action to apply changes. For selections that require explicit submission, use [checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox) instead.", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/switch.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Don't combine with save buttons:** Switches apply changes instantly when toggled, so combining them with save buttons creates confusion about when changes take effect.\n- **Make the controlled setting clear:** Merchants should immediately understand what setting the switch controls and what each state means. Ambiguous labels force merchants to toggle the switch just to figure out what it does.\n- **Explain the impact:** Merchants need to understand the consequences of toggling a switch, especially for settings that affect important functionality or data. Without context, merchants might hesitate to change settings or make uninformed decisions.\n- **Organize related settings thoughtfully:** When presenting multiple switches, group related settings together and order them logically. A well-organized settings interface helps merchants find and configure options efficiently.\n- **Make unavailable options understandable:** When a switch is disabled due to permissions, dependencies, or plan limitations, explain why. Users should know whether the limitation is temporary or permanent and what they need to do to access the setting." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the switch component.", - "type": "Switch", - "typeDefinitions": { - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked.", - "isOptional": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The switch component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "SwitchEvents", - "typeDefinitions": { - "SwitchEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SwitchEvents", - "description": "The switch component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the switch value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the switch.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface SwitchEvents {\n /**\n * A callback fired when the switch value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the switch.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "description": "Give users a clear way to turn a feature on or off. This example pairs a label with a toggle switch.", - "codeblock": { - "title": "Toggle a setting", - "tabs": [ - { - "title": "html", - "code": "<s-switch\n label=\"Enable feature\"\n details=\"Ensure all criteria are met before enabling\"\n></s-switch>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Indicate when a feature isn't available. This example locks a switch to prevent interaction while displaying its current state.", - "codeblock": { - "title": "Show a disabled switch", - "tabs": [ - { - "title": "html", - "code": "<s-switch\n id=\"disabled-switch\"\n label=\"Feature locked (Premium plan required)\"\n checked\n disabled\n></s-switch>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Collect multiple settings that save together. This example groups switches in a form for batch submission.", - "codeblock": { - "title": "Submit multiple settings in a form", - "tabs": [ - { - "title": "html", - "code": "<form>\n <s-stack gap=\"base\">\n <s-switch\n id=\"email-notifications\"\n label=\"Email notifications\"\n name=\"emailNotifications\"\n value=\"enabled\"\n ></s-switch>\n <s-switch\n id=\"sms-notifications\"\n label=\"SMS notifications\"\n name=\"smsNotifications\"\n value=\"enabled\"\n ></s-switch>\n <s-button type=\"submit\">Save preferences</s-button>\n </s-stack>\n</form>\n", - "language": "html" - }, - { - "code": "
\n \n \n \n Save preferences\n \n
\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Organize settings in a panel layout. This example arranges switches in a stack to display related preferences together.", - "codeblock": { - "title": "Apply multiple settings immediately", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-switch id=\"notifications-setting\" label=\"Push notifications\"></s-switch>\n <s-switch id=\"autosave-setting\" label=\"Auto-save drafts\"></s-switch>\n <s-switch\n id=\"analytics-setting\"\n label=\"Usage analytics\"\n checked\n ></s-switch>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Keep switches accessible when labels aren't visually needed. This example uses a visually hidden label that screen readers can still announce.", - "codeblock": { - "title": "Hide the label visually", - "tabs": [ - { - "title": "html", - "code": "<s-switch\n id=\"hidden-label-switch\"\n labelAccessibilityVisibility=\"exclusive\"\n label=\"Toggle feature\"\n checked\n></s-switch>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate switch-related problems clearly. This example displays helper text with an error message when a required switch isn't enabled.", - "codeblock": { - "title": "Show validation errors", - "tabs": [ - { - "title": "html", - "code": "<s-switch\n id=\"terms-switch\"\n label=\"Agree to terms and conditions\"\n details=\"You must agree to continue with the purchase\"\n error=\"Agreement is required\"\n name=\"termsAgreement\"\n required\n value=\"agreed\"\n></s-switch>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Provide extra context for screen reader users. This example adds an accessibility label that gives more detail than the visible label alone.", - "codeblock": { - "title": "Add an accessibility label", - "tabs": [ - { - "title": "html", - "code": "<s-switch\n id=\"event-switch\"\n label=\"Feature toggle\"\n accessibilityLabel=\"Toggle feature on or off\"\n></s-switch>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Table", - "description": "The table component displays data clearly in rows and columns, helping users view, analyze, and compare structured information. Use table to present datasets, product lists, order details, or any tabular content that benefits from organized rows and columns.\n\nTables automatically adapt to screen size, rendering as lists on small screens and tables on larger ones for optimal readability across devices.", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/table.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for structured, comparable data:** The component works best when displaying multiple records with consistent attributes that merchants need to scan and compare. For simple lists without comparison needs, consider using a simpler component.\n- **Design for mobile transformation:** The component automatically converts to a list layout on mobile devices. Ensure your column headers and data make sense when displayed as stacked key-value pairs rather than a grid.\n- **Keep column counts reasonable:** Tables with many columns become difficult to scan and require horizontal scrolling. Aim for the minimum columns needed to support user tasks, and consider whether some data could be revealed on demand.\n- **Provide clear column headers:** Column headers help merchants understand what each column represents. Write concise, descriptive headers that clearly identify the data type or attribute.\n- **Consider data volume:** Large tables impact performance and user experience. Use pagination for datasets with more than 50-100 rows, or consider whether filtering or search would help merchants find specific records more efficiently." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't include built-in sorting or search functionality. You'll need to implement these features yourself if merchants need to organize data within the table. For filtering, use the `filters` slot to add filter UI such as a search field.\n- The component doesn't support sticky headers that remain visible during scrolling. If merchants need to reference column headers while viewing data further down the table, consider using pagination to keep datasets smaller." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the table component.", - "type": "Table", - "typeDefinitions": { - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@12105", - "value": "AddedContext", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@12106", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers.", - "isOptional": true - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableSlots", - "typeDefinitions": { - "TableSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableSlots", - "description": "The table component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The table structure defining headers and data rows.\n\nAccepts table header row (for column headers) and table body (for data rows) components. Structure your table with a table header row first, followed by table body.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "filters", - "value": "HTMLElement", - "description": "Filter controls displayed above the table.\n\nAccepts input components like search field or select for filtering table data. These controls appear in a dedicated area above the table content.", - "isOptional": true - } - ], - "value": "export interface TableSlots {\n /**\n * The table structure defining headers and data rows.\n *\n * Accepts table header row (for column headers) and table body (for data rows) components. Structure your table with a table header row first, followed by table body.\n */\n children?: HTMLElement;\n /**\n * Filter controls displayed above the table.\n *\n * Accepts input components like search field or select for filtering table data. These controls appear in a dedicated area above the table content.\n */\n filters?: HTMLElement;\n}" - } - } - }, - { - "title": "Events", - "description": "The table component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "TableEvents", - "typeDefinitions": { - "TableEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableEvents", - "description": "The table component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "nextpage", - "value": "CallbackEventListener | null", - "description": "A callback fired when the user navigates to the next page.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "previouspage", - "value": "CallbackEventListener | null", - "description": "A callback fired when the user navigates to the previous page.", - "isOptional": true - } - ], - "value": "export interface TableEvents {\n /**\n * A callback fired when the user navigates to the previous page.\n */\n previouspage: CallbackEventListener | null = null;\n /**\n * A callback fired when the user navigates to the next page.\n */\n nextpage: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Table body", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "type": "TableBody", - "typeDefinitions": { - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table body component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableBodySlots", - "typeDefinitions": { - "TableBodySlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBodySlots", - "description": "The table body component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The data rows displayed in the table body.\n\nAccepts table row components, with each row representing a single record or entry in the table.", - "isOptional": true - } - ], - "value": "export interface TableBodySlots {\n /**\n * The data rows displayed in the table body.\n *\n * Accepts table row components, with each row representing a single record or entry in the table.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Table cell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "type": "TableCell", - "typeDefinitions": { - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@12128", - "value": "HeaderFormat", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table cell component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableCellSlots", - "typeDefinitions": { - "TableCellSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCellSlots", - "description": "The table cell component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The data value displayed in this cell.\n\nAccepts text content or inline components representing the cell's data value.", - "isOptional": true - } - ], - "value": "export interface TableCellSlots {\n /**\n * The data value displayed in this cell.\n *\n * Accepts text content or inline components representing the cell's data value.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Table header", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "type": "TableHeader", - "typeDefinitions": { - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table header component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableHeaderSlots", - "typeDefinitions": { - "TableHeaderSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderSlots", - "description": "The table header component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The column heading text.\n\nThis text labels the column in table variant and appears as a label for data in list variant.", - "isOptional": true - } - ], - "value": "export interface TableHeaderSlots {\n /**\n * The column heading text.\n *\n * This text labels the column in table variant and appears as a label for data in list variant.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Table header row", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "type": "TableHeaderRow", - "typeDefinitions": { - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table header row component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableHeaderRowSlots", - "typeDefinitions": { - "TableHeaderRowSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRowSlots", - "description": "The table header row component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The column headers displayed in the table header row.\n\nAccepts table header components, with each header defining a column and providing its label.", - "isOptional": true - } - ], - "value": "export interface TableHeaderRowSlots {\n /**\n * The column headers displayed in the table header row.\n *\n * Accepts table header components, with each header defining a column and providing its label.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Table row", - "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.\n\nTable 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.", - "type": "TableRow", - "typeDefinitions": { - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table row component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableRowSlots", - "typeDefinitions": { - "TableRowSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRowSlots", - "description": "The table row component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The data cells displayed in this table row.\n\nAccepts table cell components, with each cell containing a data value for the corresponding column.", - "isOptional": true - } - ], - "value": "export interface TableRowSlots {\n /**\n * The data cells displayed in this table row.\n *\n * Accepts table cell components, with each cell containing a data value for the corresponding column.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "table-default.png", - "description": "Create a data table with header columns and rows of structured content. This example shows a customer table with name, email, order count, and phone columns.", - "codeblock": { - "title": "Add a data table", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table>\n <s-table-header-row>\n <s-table-header>Name</s-table-header>\n <s-table-header>Email</s-table-header>\n <s-table-header format=\"numeric\">Orders placed</s-table-header>\n <s-table-header>Phone</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>John Smith</s-table-cell>\n <s-table-cell>john@example.com</s-table-cell>\n <s-table-cell>23</s-table-cell>\n <s-table-cell>123-456-7890</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Jane Johnson</s-table-cell>\n <s-table-cell>jane@example.com</s-table-cell>\n <s-table-cell>15</s-table-cell>\n <s-table-cell>234-567-8901</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Brandon Williams</s-table-cell>\n <s-table-cell>brandon@example.com</s-table-cell>\n <s-table-cell>42</s-table-cell>\n <s-table-cell>345-678-9012</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html", - "editable": false - }, - { - "code": "\n \n \n Name\n Email\n Orders placed\n Phone\n \n \n \n John Smith\n john@example.com\n 23\n 123-456-7890\n \n \n Jane Johnson\n jane@example.com\n 15\n 234-567-8901\n \n \n Brandon Williams\n brandon@example.com\n 42\n 345-678-9012\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `listSlot` property on table headers to control how columns are displayed when the table is converted to a list layout on mobile. This example shows a product table with badges and appropriate slot assignments for mobile readability.", - "codeblock": { - "title": "Configure columns for mobile list layout", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Product</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n <s-table-header listSlot=\"labeled\">Inventory</s-table-header>\n <s-table-header listSlot=\"labeled\">Price</s-table-header>\n </s-table-header-row>\n\n <s-table-body>\n <s-table-row>\n <s-table-cell>Water bottle</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>128</s-table-cell>\n <s-table-cell>$24.99</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>T-shirt</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"warning\">Low stock</s-badge>\n </s-table-cell>\n <s-table-cell>15</s-table-cell>\n <s-table-cell>$19.99</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Cutting board</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"critical\">Out of stock</s-badge>\n </s-table-cell>\n <s-table-cell>0</s-table-cell>\n <s-table-cell>$34.99</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n Product\n Status\n Inventory\n Price\n \n\n \n \n Water bottle\n \n Active\n \n 128\n $24.99\n \n \n T-shirt\n \n Low stock\n \n 15\n $19.99\n \n \n Cutting board\n \n Out of stock\n \n 0\n $34.99\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `paginate`, `hasPreviousPage`, and `hasNextPage` properties to display pagination controls for navigating large datasets. This example shows a paginated product table with next and previous page buttons.", - "codeblock": { - "title": "Add pagination for large datasets", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table paginate hasPreviousPage hasNextPage>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Product</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n <s-table-header listSlot=\"secondary\" format=\"numeric\">Sales</s-table-header>\n </s-table-header-row>\n\n <s-table-body>\n <s-table-row>\n <s-table-cell>Product 1</s-table-cell>\n <s-table-cell>Active</s-table-cell>\n <s-table-cell>250</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Product 2</s-table-cell>\n <s-table-cell>Active</s-table-cell>\n <s-table-cell>180</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Product 3</s-table-cell>\n <s-table-cell>Paused</s-table-cell>\n <s-table-cell>95</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n Product\n Status\n Sales\n \n\n \n \n Product 1\n Active\n 250\n \n \n Product 2\n Active\n 180\n \n \n Product 3\n Paused\n 95\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `loading` property to display a loading overlay while fetching or refreshing table data. This example shows a product table with the loading state active.", - "codeblock": { - "title": "Show a loading state while fetching data", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table loading>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Product</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n <s-table-header listSlot=\"labeled\">Inventory</s-table-header>\n </s-table-header-row>\n\n <s-table-body>\n <s-table-row>\n <s-table-cell>Water bottle</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>128</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>T-shirt</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"warning\">Low stock</s-badge>\n </s-table-cell>\n <s-table-cell>15</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Cutting board</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"critical\">Out of stock</s-badge>\n </s-table-cell>\n <s-table-cell>0</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Notebook set</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>245</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n Product\n Status\n Inventory\n \n\n \n \n Water bottle\n \n Active\n \n 128\n \n \n T-shirt\n \n Low stock\n \n 15\n \n \n Cutting board\n \n Out of stock\n \n 0\n \n \n Notebook set\n \n Active\n \n 245\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `filters` slot to add search or filter controls above the table. This example shows a search field that lets merchants filter products by name.", - "codeblock": { - "title": "Add a search filter to a table", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table>\n <s-search-field slot=\"filters\" label=\"Search products\" labelAccessibilityVisibility=\"exclusive\" placeholder=\"Search products\"></s-search-field>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Product</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n <s-table-header listSlot=\"labeled\">Inventory</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>Water bottle</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>128</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>T-shirt</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"warning\">Low stock</s-badge>\n </s-table-cell>\n <s-table-cell>15</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n \n Product\n Status\n Inventory\n \n \n \n Water bottle\n \n Active\n \n 128\n \n \n T-shirt\n \n Low stock\n \n 15\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `variant` property to display data as stacked key-value pairs instead of as a grid. This is the default layout on mobile devices. This example shows a customer table rendered in list format.", - "codeblock": { - "title": "Display data in list format", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table variant=\"list\">\n <s-table-header-row>\n <s-table-header listSlot=\"kicker\">ID</s-table-header>\n <s-table-header listSlot=\"primary\">Customer</s-table-header>\n <s-table-header listSlot=\"secondary\">Email</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n <s-table-header listSlot=\"labeled\" format=\"numeric\">\n Orders\n </s-table-header>\n <s-table-header listSlot=\"labeled\" format=\"currency\">\n Total spent\n </s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>#1001</s-table-cell>\n <s-table-cell>Sarah Johnson</s-table-cell>\n <s-table-cell>sarah@example.com</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>23</s-table-cell>\n <s-table-cell>$1,245.50</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>#1002</s-table-cell>\n <s-table-cell>Mike Chen</s-table-cell>\n <s-table-cell>mike@example.com</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"neutral\">Inactive</s-badge>\n </s-table-cell>\n <s-table-cell>7</s-table-cell>\n <s-table-cell>$432.75</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>#1003</s-table-cell>\n <s-table-cell>Emma Davis</s-table-cell>\n <s-table-cell>emma@example.com</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>15</s-table-cell>\n <s-table-cell>$892.25</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n ID\n Customer\n Email\n Status\n \n Orders\n \n \n Total spent\n \n \n \n \n #1001\n Sarah Johnson\n sarah@example.com\n \n Active\n \n 23\n $1,245.50\n \n \n #1002\n Mike Chen\n mike@example.com\n \n Inactive\n \n 7\n $432.75\n \n \n #1003\n Emma Davis\n emma@example.com\n \n Active\n \n 15\n $892.25\n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Text", - "description": "The text component displays inline text with specific visual styles or tones. Use text to emphasize or differentiate words or phrases within paragraphs or other block-level components, applying weight, color, or semantic styling.\n\nText supports multiple visual variants, alignment options, and line clamping for flexible inline typography control. For block-level text content, use [paragraph](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/paragraph).", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/text.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Apply semantic types to improve meaning:** Use `strong` for key words or phrases that need emphasis, `address` for contact information like physical or email addresses, and `redundant` for screen reader context when content is visually duplicated. Semantic types help screen readers convey the correct meaning to merchants.\n- **Emphasize sparingly and strategically:** Use strong to emphasize key words or numbers within sentences, not entire sentences. Too much emphasis dilutes its effectiveness and makes content harder to scan.\n- **Choose appropriate tones for status:** Apply tones like critical, success, or caution to communicate status inline. Tones draw attention to important information but work best when paired with clear language, not used alone.\n- **Consider contrast for subdued text:** Subdued text works well for timestamps and metadata, but avoid using it for critical information that merchants must read." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Text renders inline by default and flows with surrounding content. For block-level text with spacing, use the [paragraph](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/paragraph) component or wrap in layout components.\n- The component doesn't include text truncation or ellipsis. Long text will wrap or overflow depending on the container. Use other components like [heading](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/heading) with line clamping if truncation is needed.\n- Tone colors are optimized for light backgrounds. Using tones on dark or colored backgrounds might not meet accessibility contrast requirements." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the text component.", - "type": "Text", - "typeDefinitions": { - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'", - "isOptional": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The text component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TextSlots", - "typeDefinitions": { - "TextSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextSlots", - "description": "The text component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text content displayed within the text component, which applies semantic meaning and styling appropriate to the specified text type.", - "isOptional": true - } - ], - "value": "export interface TextSlots {\n /**\n * The text content displayed within the text component, which applies semantic meaning and styling appropriate to the specified text type.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "text-default.png", - "description": "Create inline text elements with semantic types to add structure and meaning. This example shows strong text for a label paired with regular text for the value.", - "codeblock": { - "title": "Add inline text with emphasis", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph>\n <s-text type=\"strong\">Name: </s-text>\n <s-text>Jane Doe</s-text>\n</s-paragraph>", - "language": "html", - "editable": false - }, - { - "code": "
\n Name: \n Jane Doe\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Apply semantic tones to signal different statuses inline. This example shows `success`, `critical`, and `warning` tones for common order and inventory states.", - "codeblock": { - "title": "Communicate status with tones", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"small\">\n <s-text tone=\"success\">Order fulfilled</s-text>\n <s-text tone=\"critical\">Payment failed</s-text>\n <s-text tone=\"warning\">Low inventory</s-text>\n</s-stack>", - "language": "html" - }, - { - "code": "\n Order fulfilled\n Payment failed\n Low inventory\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `type` property to `address` to render contact information with proper semantic meaning. This example shows a formatted address that screen readers identify as address content.", - "codeblock": { - "title": "Display a semantic address", - "tabs": [ - { - "title": "html", - "code": "<s-text type=\"address\">\n 123 Commerce Street, Toronto, ON M5V 2H1\n</s-text>", - "language": "html" - }, - { - "code": "\n 123 Commerce Street, Toronto, ON M5V 2H1\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `color` property to `subdued` for secondary metadata like timestamps and supplementary details. This example shows a subdued text element for a last-updated indicator.", - "codeblock": { - "title": "De-emphasize secondary information", - "tabs": [ - { - "title": "html", - "code": "<s-text color=\"subdued\">\n Last updated 2 hours ago\n</s-text>", - "language": "html" - }, - { - "code": "\n Last updated 2 hours ago\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `fontVariantNumeric` property to `tabular-nums` to render numbers with consistent widths for even alignment in data displays. This example shows tabular number formatting for a price.", - "codeblock": { - "title": "Align numbers with tabular formatting", - "tabs": [ - { - "title": "html", - "code": "<s-text fontVariantNumeric=\"tabular-nums\">\n $1,234.56\n</s-text>", - "language": "html" - }, - { - "code": "\n $1,234.56\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `accessibilityVisibility` property to provide additional context for screen readers without affecting the visual layout. This example shows hidden text that communicates pricing context to assistive technologies.", - "codeblock": { - "title": "Add screen-reader-only text", - "tabs": [ - { - "title": "html", - "code": "<s-text accessibilityVisibility=\"exclusive\">\n Product prices include tax\n</s-text>", - "language": "html" - }, - { - "code": "\n Product prices include tax\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `interestFor` property to connect text to a tooltip, displaying additional context on hover or focus. This example shows explanatory text that triggers a tooltip with SKU details.", - "codeblock": { - "title": "Associate text with a tooltip", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"sku-tooltip\">\n SKU must be unique across all products and cannot be changed after creation\n</s-tooltip>\n<s-text color=\"subdued\" interestFor=\"sku-tooltip\">\n What is a product SKU?\n</s-text>", - "language": "html" - }, - { - "code": "\n SKU must be unique across all products and cannot be changed after creation\n\n\n What is a product SKU?\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `dir` property to `rtl` for right-to-left languages like Arabic and Hebrew. This example shows text rendered in Arabic with right-to-left direction.", - "codeblock": { - "title": "Render right-to-left text", - "tabs": [ - { - "title": "html", - "code": "<s-text dir=\"rtl\">\n محتوى النص باللغة العربية\n</s-text>", - "language": "html" - }, - { - "code": "\n محتوى النص باللغة العربية\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Text area", - "description": "The text area component captures multi-line text input. Use it to collect descriptions, notes, comments, or other extended text content.\n\nThe component supports configurable height, character limits, and validation. For single-line text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/textarea.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Set appropriate initial height:** The visible row count sets merchants' expectations for how much content to provide. A small textarea suggests brief input, while a larger one indicates more detailed content is expected.\n- **Set realistic length constraints:** Define maximum and minimum character limits that reflect actual requirements. Communicate these limits clearly so merchants understand how much content they need to provide.\n- **Provide helpful placeholder examples:** Show merchants what kind of content and level of detail you expect. Good placeholder text demonstrates format and tone rather than just stating the field's purpose.\n- **Give real-time feedback on length limits:** When enforcing maximum length, show merchants how many characters they have remaining. This helps them craft their content within constraints without exceeding limits." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The `maxLength` attribute prevents typing but doesn't reliably prevent pasting longer content. Browsers handle this differently. Always validate length server-side.\n- The component only accepts plain text. If you need bold, italics, lists, or other formatting, you must implement a rich text editor or use plain text with Markdown syntax." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the text area component.", - "type": "TextArea", - "typeDefinitions": { - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.", - "isOptional": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The text area component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "TextAreaEvents", - "typeDefinitions": { - "TextAreaEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextAreaEvents", - "description": "The text area component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text area loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text area value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text area receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the text area.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface TextAreaEvents {\n /**\n * A callback fired when the text area value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the text area.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the text area loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the text area receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "textarea-default.png", - "description": "Add a multi-line text input for collecting longer content from merchants. This example shows a text area with a pre-filled shipping address and a set number of visible rows.", - "codeblock": { - "title": "Add a basic text area", - "tabs": [ - { - "title": "html", - "code": "<s-text-area\n label=\"Shipping address\"\n value=\"1776 Barnes Street, Orlando, FL 32801\"\n rows=\"3\"\n></s-text-area>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Collect longer text like product descriptions with a placeholder to guide input. This example shows an empty text area with placeholder text and autocomplete disabled.", - "codeblock": { - "title": "Collect text with a placeholder", - "tabs": [ - { - "title": "html", - "code": "<s-text-area\n label=\"Product description\"\n placeholder=\"Enter a detailed description...\"\n autocomplete=\"off\"\n></s-text-area>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set a maximum character length to keep input concise, such as for SEO meta descriptions. This example shows a text area with a 160-character limit and help text explaining the constraint.", - "codeblock": { - "title": "Limit input length with a character cap", - "tabs": [ - { - "title": "html", - "code": "<s-text-area\n label=\"Meta description\"\n max-length=\"160\"\n details=\"Appears in search results. Keep under 160 characters for best visibility.\"\n placeholder=\"Write a compelling description that will appear in Google search results...\"\n rows=\"3\"\n autocomplete=\"off\"\n></s-text-area>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display an error message when the entered text does not meet validation requirements. This example shows a text area with a minimum length constraint and an error explaining what is needed.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-text-area\n label=\"Reason for return\"\n error=\"Please provide a detailed explanation for the return request. This helps us improve our products and process the refund faster.\"\n minLength=\"20\"\n placeholder=\"Explain why the customer is returning this item...\"\n rows=\"3\"\n autocomplete=\"off\"\n></s-text-area>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Prevent editing by making a text area read-only or fully disabled. This example shows a read-only field for viewing order notes and a disabled field for internal comments.", - "codeblock": { - "title": "Disable or make a text area read-only", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-text-area\n label=\"Order notes\"\n value=\"Customer requested gift wrapping.\"\n readOnly\n rows=\"2\"\n ></s-text-area>\n\n <s-text-area\n label=\"Internal comments\"\n value=\"Pending review by fulfillment team.\"\n disabled\n rows=\"2\"\n ></s-text-area>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Text field", - "description": "The text field component captures single-line text input. Use it to collect short, free-form information like names, titles, or identifiers.\n\nThe component supports various input configurations including placeholders, character limits, and validation. For multi-line text entry, use [text area](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-area). For specialized input types, use [email field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/email-field), [URL field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/url-field), [password field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/password-field), or [search field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/search-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/textfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Make expected input clear:** Merchants should immediately understand what to enter and in what format. Ambiguous labels and placeholders force merchants to guess, leading to validation errors and frustration.\n- **Provide visual context:** Prefixes and suffixes help merchants understand the type of value expected and its format. Without context, merchants might not know whether they're entering a complete URL or just a subdomain, a full price or just the amount.\n- **Set constraints that match requirements:** Define character limits and validation rules based on actual business needs, not arbitrary numbers. Communicate these constraints clearly so merchants know what's expected.\n- **Give helpful feedback:** Show merchants whether their input is valid as they type, not just after they submit. When input is invalid, explain specifically what's wrong and how to fix it rather than showing generic error messages." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The `maxLength` attribute prevents typing beyond the limit, but in some edge cases, pasted or programmatically set content might exceed `maxLength`. Always validate length server-side.\n- The `accessory` slot renders content at the end of the field. For best results, use [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) or [clickable](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/clickable) components with text content." - } - ], - "definitions": [ - { - "title": "TextField", - "description": "Configure the following properties on the text field component.", - "type": "TextField", - "typeDefinitions": { - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.", - "isOptional": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The text field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TextFieldSlots", - "typeDefinitions": { - "TextFieldSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextFieldSlots", - "description": "The text field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "accessory", - "value": "HTMLElement", - "description": "Additional interactive content displayed within the text field.\n\nAccepts button and clickable components with text content only. Other component types or complex layouts are not supported.", - "isOptional": true - } - ], - "value": "export interface TextFieldSlots {\n /**\n * Additional interactive content displayed within the text field.\n *\n * Accepts button and clickable components with text content only. Other component types or complex layouts are not supported.\n */\n accessory?: HTMLElement;\n}" - } - } - }, - { - "title": "Events", - "description": "The text field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "TextFieldEvents", - "typeDefinitions": { - "TextFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextFieldEvents", - "description": "The text field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the text field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface TextFieldEvents {\n /**\n * A callback fired when the text field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the text field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the text field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the text field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "textfield-default.png", - "description": "Add a single-line text input for collecting short-form information from merchants. This example shows a text field with a label, pre-filled value, and placeholder.", - "codeblock": { - "title": "Add a basic text field", - "tabs": [ - { - "title": "html", - "code": "<s-text-field\n label=\"Store name\"\n value=\"Jaded Pixel\"\n placeholder=\"Become a merchant\"\n></s-text-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Add an icon to a text field to help merchants quickly identify its purpose. This example shows a text field with a search icon and placeholder text.", - "codeblock": { - "title": "Add an icon to a text field", - "tabs": [ - { - "title": "html", - "code": "<s-text-field\n label=\"Search\"\n icon=\"search\"\n placeholder=\"Search products...\"\n></s-text-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Provide specific error messages to tell merchants what went wrong and what correction is needed. This example shows three text fields contrasting a vague error, a specific validation error, and a business rule error.", - "codeblock": { - "title": "Provide specific error messages for merchant context", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <!-- Generic error (avoid) -->\n <s-text-field label=\"Product weight\" error=\"Invalid value\"></s-text-field>\n\n <!-- Specific error (preferred) -->\n <s-text-field\n label=\"Product weight\"\n error=\"Weight must be greater than 0 and less than 500 pounds for shipping calculations\"\n ></s-text-field>\n\n <!-- Business rule error -->\n <s-text-field\n label=\"SKU\"\n error=\"SKU 'TSHIRT-001' already exists. SKUs must be unique across all products.\"\n ></s-text-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n\n \n \n\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add a prefix or suffix to provide context for the expected value, such as a country code or card type. This example shows a phone number field with a prefix and a credit card field with a suffix.", - "codeblock": { - "title": "Add a prefix and suffix", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"small\">\n <s-text-field label=\"Phone number\" prefix=\"+03\" />\n <s-text-field\n label=\"Credit Card Number\"\n value=\"1234 5678 9012 3456\"\n suffix=\"VISA\"\n />\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place an interactive element like an icon or button inside a text field using the accessory slot. This example shows a text field with an info icon that triggers a tooltip.", - "codeblock": { - "title": "Add an accessory to a text field", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"info-tooltip\">This is info tooltip</s-tooltip>\n<s-text-field label=\"Discount code\">\n <s-icon slot=\"accessory\" interestFor=\"info-tooltip\" type=\"info\" />\n</s-text-field>\n", - "language": "html" - }, - { - "code": "This is info tooltip\n\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Prevent editing by making a text field read-only or fully disabled. This example shows a read-only store URL that merchants can copy and a disabled account ID.", - "codeblock": { - "title": "Disable or make a text field read-only", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-text-field\n label=\"Store URL\"\n value=\"my-store.myshopify.com\"\n readOnly\n ></s-text-field>\n\n <s-text-field\n label=\"Account ID\"\n value=\"acct_12345\"\n disabled\n ></s-text-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Thumbnail", - "description": "The thumbnail component displays small preview images representing content, products, or media items. Use thumbnail to provide visual identification in lists, tables, or cards where space is constrained and quick recognition is important.\n\nThumbnails support multiple sizes, alt text for accessibility, and fallback states for missing images. For full-size images, use [image](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/image). For user profile images, use [avatar](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/avatar).", - "category": "Web components", - "subCategory": "Media and visuals", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/thumbnail.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Design for square cropping:** Thumbnails automatically crop images to a 1:1 aspect ratio from the center. If your images aren't square, important content near the edges might be cut off.\n- **Maintain visual consistency in groups:** Use the same thumbnail size throughout a single list, table, or grid. Mixing sizes creates visual chaos and makes interfaces harder to scan.\n- **Always provide descriptive alternative text:** Write alt text that describes the image content, not generic labels like \"thumbnail\" or \"product image.\" Good alt text helps all merchants understand what they're looking at.\n- **Choose appropriate sizes for your context:** Smaller thumbnails work better in dense layouts like tables, while larger sizes suit product-focused interfaces. Consider the merchant's task and the information density when choosing a size." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Thumbnails always render as 1:1 squares and will crop non-square images to fit. The component uses center cropping, which might cut off important image details.\n- Images can be loaded from remote URLs or local file resources. Cross-origin images require proper CORS headers from the image host.\n- The component shows a generic placeholder icon when images fail to load or no source is provided. Custom placeholder graphics or branded fallbacks aren't available.\n- Thumbnails don't include built-in lazy loading. In long lists with many thumbnails, all images load immediately, which might impact performance." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the thumbnail component.", - "type": "Thumbnail", - "typeDefinitions": { - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered.", - "isOptional": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The thumbnail component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ThumbnailEvents", - "typeDefinitions": { - "ThumbnailEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ThumbnailEvents", - "description": "The thumbnail component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "error", - "value": "OnErrorEventHandler", - "description": "A callback fired when the thumbnail image fails to load.\n\nLearn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "load", - "value": "CallbackEventListener | null", - "description": "A callback fired when the thumbnail image successfully loads.\n\nLearn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).", - "isOptional": true - } - ], - "value": "export interface ThumbnailEvents {\n /**\n * A callback fired when the thumbnail image successfully loads.\n *\n * Learn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).\n */\n load: CallbackEventListener | null = null;\n /**\n * A callback fired when the thumbnail image fails to load.\n *\n * Learn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).\n */\n error: OnErrorEventHandler = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "thumbnail-default.png", - "description": "Display small preview images for products or items. This example presents a basic thumbnail with source URL and alt text for accessibility.", - "codeblock": { - "title": "Display a thumbnail", - "tabs": [ - { - "title": "html", - "code": "<s-thumbnail\n alt=\"Image of white sneakers\"\n src=\"https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg\"\n></s-thumbnail>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Show a placeholder when no image is available. This example displays a thumbnail without a source that renders a default icon.", - "codeblock": { - "title": "Show an empty state", - "tabs": [ - { - "title": "html", - "code": "<s-thumbnail alt=\"No image available\" size=\"base\"></s-thumbnail>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Adapt thumbnail prominence to different contexts. This example displays `small-200`, `base`, and `large` sizes in a vertical stack.", - "codeblock": { - "title": "Adjust the size", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"large-100\">\n <s-thumbnail\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Image of indoor plant\"\n size=\"small-200\"\n ></s-thumbnail>\n <s-thumbnail\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Image of indoor plant\"\n size=\"base\"\n ></s-thumbnail>\n <s-thumbnail\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Image of indoor plant\"\n size=\"large\"\n ></s-thumbnail>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Respond to image loading success or failure. This example uses `load` and `error` event listeners to update the UI based on the loading result.", - "codeblock": { - "title": "Handle load events", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\" alignItems=\"center\">\n <s-thumbnail\n id=\"product-thumbnail\"\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Image of indoor plant\"\n size=\"small-200\"\n />\n <s-text id=\"status-text\">Loading...</s-text>\n</s-stack>\n\n<script>\n const thumbnail = document.getElementById('product-thumbnail');\n const statusText = document.getElementById('status-text');\n\n thumbnail.addEventListener('load', () => {\n statusText.textContent = 'Image loaded';\n });\n\n thumbnail.addEventListener('error', () => {\n statusText.textContent = 'Failed to load image';\n });\n</script>\n", - "language": "html" - }, - { - "code": "\n \n Loading...\n\n\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Tooltip", - "description": "The tooltip component displays helpful information in a small overlay when users hover over or focus on an element. Use tooltip to provide additional context, explain functionality, or clarify terms without cluttering the interface with permanent text.\n\nTooltips support keyboard accessibility, positioning options, and activation on both hover and focus for inclusive interaction patterns.", - "category": "Web components", - "subCategory": "Overlays", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/tooltip.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use tooltips for helpful but non-essential information:** The component works best for supplementary details that enhance understanding without being critical. Never hide essential information, errors, or required instructions in tooltips.\n- **Perfect for icon-only buttons:** Icon buttons need tooltips to clarify what they do. Include the button's action and keyboard shortcut if available to help merchants work efficiently.\n- **Keep tooltip content brief and clear:** Aim for a short sentence or phrase. Long tooltip content is hard to read and suggests the information might need a more prominent placement in the UI.\n- **Recognize when tooltips indicate a design problem:** If you're adding many tooltips to explain your interface, the design itself might be unclear. Consider improving labels, layout, or information architecture instead.\n- **Remember they're desktop-only:** Tooltips don't work on touch devices. If the information is important enough to need a tooltip, consider making it visible by default on mobile." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Tooltips only appear on devices with a mouse or trackpad. They don't work on touch devices like phones and tablets, which limits their usefulness for mobile merchants.\n- Tooltips can't contain interactive elements like links or buttons. They dismiss when the user moves away, making interaction impossible.\n- The component doesn't provide built-in positioning controls. Tooltip placement is automatic and might not always appear in the ideal location for complex layouts." - } - ], - "definitions": [ - { - "title": "Slots", - "description": "The tooltip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TooltipSlots", - "typeDefinitions": { - "TooltipSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TooltipSlots", - "description": "The tooltip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The informational text or elements displayed within the tooltip overlay, providing helpful context or explanations when users interact with the associated element.\n\nOnly accepts text, paragraph components, and raw `textContent`.", - "isOptional": true - } - ], - "value": "export interface TooltipSlots {\n /**\n * The informational text or elements displayed within the tooltip overlay, providing helpful context or explanations when users interact with the associated element.\n *\n * Only accepts text, paragraph components, and raw `textContent`.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "description": "Create a tooltip that provides supplementary information when a user hovers or focuses on a trigger element. This example shows a tooltip describing a toolbar button's action.", - "codeblock": { - "title": "Add a basic tooltip", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"bold-tooltip\">Bold</s-tooltip>\n<s-button interestFor=\"bold-tooltip\" accessibilityLabel=\"Bold\">B</s-button>\n", - "language": "html", - "editable": false - }, - { - "code": "
Bold\nB\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Attach a tooltip to inline text to provide a definition or additional context on hover. This example shows a tooltip triggered by a text label that explains the shipping status.", - "codeblock": { - "title": "Explain a term with a tooltip on text", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"shipping-tooltip\">This order has active shipping labels.</s-tooltip>\n<s-text interestFor=\"shipping-tooltip\">Shipping status</s-text>\n", - "language": "html" - }, - { - "code": "
This order has active shipping labels.\nShipping status\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Add a tooltip to an icon-only button to clarify its action and provide an accessible description. This example shows an info button that displays a tooltip with product details on hover.", - "codeblock": { - "title": "Describe an icon-only button with a tooltip", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"info-tooltip\">View product details and inventory status</s-tooltip>\n<s-button interestFor=\"info-tooltip\" accessibilityLabel=\"More information\">\n <s-icon type=\"info\"></s-icon>\n</s-button>\n", - "language": "html" - }, - { - "code": "
View product details and inventory status\n\n \n\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Include a keyboard shortcut in a tooltip to help merchants discover faster ways to perform actions. This example shows a Save button with a tooltip that displays the keyboard shortcut.", - "codeblock": { - "title": "Show a keyboard shortcut in a tooltip", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"save-shortcut\">Save (⌘S)</s-tooltip>\n<s-button interestFor=\"save-shortcut\">Save</s-button>\n", - "language": "html" - }, - { - "code": "
Save (⌘S)\nSave\n
", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "URL field", - "description": "The URL field component collects URLs from users with built-in formatting and validation. Use URL field for website addresses, link destinations, or any URL input to provide URL-specific keyboard layouts and automatic validation.\n\nURL fields support protocol prefixing, validation, and help text to guide users toward entering properly formatted web addresses. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/urlfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Validate URL structure:** Browser validation for URL fields is minimal and inconsistent. Implement your own validation to ensure URLs have proper structure, valid protocols, and acceptable formats for your use case.\n- **Make the expected format clear:** Users need to know whether to include protocols, what protocols are acceptable, and what type of URL you're expecting. Show complete example URLs in placeholders to demonstrate the required format.\n- **Handle missing protocols gracefully:** Users often forget to include `https://` when entering URLs. Decide whether to automatically add it, accept URLs without protocols, or show clear error messages explaining what's missing.\n- **Set realistic length constraints:** URL length limits vary across browsers and servers. Set constraints based on where the URL will be used, not just arbitrary maximums. Communicate these limits clearly when they're necessary.\n- **Provide clear context:** Make the URL's purpose obvious through labels and help text. Users entering a product image URL have different needs than those entering a social media profile link or external reference." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The HTML5 URL input type (`type=\"url\"`) has very basic validation that varies by browser. Most browsers only check for **://** somewhere in the string. Invalid URLs like **ht://invalid** might pass browser validation. Always implement comprehensive server-side URL validation.\n- While RFC 3986 doesn't specify a maximum URL length, the practical recommended limit for broad compatibility across web clients and servers is 2,048 characters. Modern browsers support much longer URLs, but many servers have lower limits for request URIs. Setting `maxLength` above 2,048 might create URLs that work in some contexts but fail in others.\n- URLs starting with **//** (protocol-relative, like **//example.com**) are technically valid but might not pass HTML5 URL validation. Users must include the full protocol (http:// or https://).\n- This component doesn't automatically prepend **https://** if merchants omit the protocol. A value like **example.com** will be invalid and require manual correction. You must implement this behavior yourself if desired.\n- URLs with special characters (spaces, quotes, Unicode) should be percent-encoded (%20, %22), but the component doesn't auto-encode. Provide guidance to merchants or implement encoding in your validation logic." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the URL field component.", - "type": "URLField", - "typeDefinitions": { - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@11381", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.", - "isOptional": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The URL field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "URLFieldEvents", - "typeDefinitions": { - "URLFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLFieldEvents", - "description": "The URL field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the URL field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the URL field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the URL field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the URL field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface URLFieldEvents {\n /**\n * A callback fired when the URL field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the URL field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the URL field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the URL field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "description": "Capture web addresses from users with URL-specific input. This example pairs a label with placeholder text guiding the expected format.", - "codeblock": { - "title": "Collect a URL", - "tabs": [ - { - "title": "html", - "code": "<s-url-field\n label=\"Your website\"\n details=\"Enter your business website\"\n placeholder=\"https://example.com\"\n></s-url-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Enforce URL requirements before form submission. This example configures required validation with length constraints and custom error messages.", - "codeblock": { - "title": "Set validation constraints", - "tabs": [ - { - "title": "html", - "code": "<s-url-field\n label=\"Company website\"\n required\n minLength=\"10\"\n maxLength=\"200\"\n error=\"Please enter a valid website URL\"\n></s-url-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display a URL that users can copy but not edit. This example uses readOnly to prevent changes while keeping the value selectable and included in form submissions.", - "codeblock": { - "title": "Pre-fill a URL", - "tabs": [ - { - "title": "html", - "code": "<s-url-field\n label=\"Profile URL\"\n value=\"https://shop.myshopify.com\"\n readOnly\n></s-url-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Show a URL in a non-interactive state. This example uses disabled to gray out the field and exclude it from form submission.", - "codeblock": { - "title": "Show a disabled field", - "tabs": [ - { - "title": "html", - "code": "<s-url-field\n label=\"Store URL\"\n value=\"https://your-store.myshopify.com\"\n disabled\n></s-url-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Unordered list", - "description": "The unordered list component displays a bulleted list of related items where sequence isn't critical. Use unordered list to present collections of features, options, requirements, or any group of items where order doesn't affect meaning.\n\nUnordered lists automatically add bullet points and support nested lists for hierarchical content organization. For sequential items where order is important, use [ordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/ordered-list).", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/unordered-list.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use when order doesn't matter:** Unordered lists communicate a collection of related items without sequence or ranking. Use them for features, options, or benefits where the order isn't meaningful. When sequence matters, use [ordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/ordered-list) instead.\n- **Keep items parallel in structure:** Consistent grammar and structure across list items makes content easier to scan and understand. Mixing different writing styles within a list creates cognitive friction for readers.\n- **Write concise items:** List items work best as brief, scannable content. When items become long or complex, they lose the clarity and efficiency that makes lists valuable. Consider restructuring long items into separate sections.\n- **Limit nesting depth:** Nested lists help organize hierarchical content, but deep nesting becomes difficult to follow. When you find yourself nesting beyond two levels, the content structure might be too complex for a list format." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't support custom bullet styles (like checkmarks, arrows, or custom icons). All unordered lists use standard bullet markers. If you need alternative markers, you'll need to create custom list styling." - } - ], - "definitions": [ - { - "title": "Slots", - "description": "The unordered list component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "UnorderedListSlots", - "typeDefinitions": { - "UnorderedListSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedListSlots", - "description": "The unordered list component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface UnorderedListSlots {\n /**\n * 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.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "List item", - "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.\n\nList 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.", - "type": "ListItem", - "typeDefinitions": { - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The list item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ListItemSlots", - "typeDefinitions": { - "ListItemSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItemSlots", - "description": "The list item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the list item, which represents a single entry in an ordered or unordered list.", - "isOptional": true - } - ], - "value": "export interface ListItemSlots {\n /**\n * The content displayed within the list item, which represents a single entry in an ordered or unordered list.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "unordered-list-default.png", - "description": "Create a bulleted list of related items. This example shows a simple list of product color options.", - "codeblock": { - "title": "Add a bulleted list", - "tabs": [ - { - "title": "html", - "code": "<s-unordered-list>\n <s-list-item>Red shirt</s-list-item>\n <s-list-item>Green shirt</s-list-item>\n <s-list-item>Blue shirt</s-list-item>\n</s-unordered-list>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Red shirt\n Green shirt\n Blue shirt\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Nest unordered lists inside list items to organize hierarchical content with sub-items. This example shows a store setup checklist with nested shipping options under a parent item.", - "codeblock": { - "title": "Create nested lists with sub-items", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-box borderWidth=\"small-100\" borderRadius=\"base\" padding=\"base\">\n <s-unordered-list>\n <s-list-item>Configure payment settings</s-list-item>\n <s-list-item>\n Set up shipping options\n <s-unordered-list>\n <s-list-item>Domestic shipping rates</s-list-item>\n <s-list-item>International shipping zones</s-list-item>\n </s-unordered-list>\n </s-list-item>\n <s-list-item>Add product descriptions</s-list-item>\n </s-unordered-list>\n </s-box>\n\n <s-box borderWidth=\"small-100\" borderRadius=\"base\" padding=\"base\">\n <s-unordered-list>\n <s-list-item>Enable online payments</s-list-item>\n <s-list-item>Set up shipping rates</s-list-item>\n <s-list-item>Configure tax settings</s-list-item>\n <s-list-item>Add product descriptions</s-list-item>\n </s-unordered-list>\n </s-box>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n Configure payment settings\n \n Set up shipping options\n \n Domestic shipping rates\n International shipping zones\n \n \n Add product descriptions\n \n \n\n \n \n Enable online payments\n Set up shipping rates\n Configure tax settings\n Add product descriptions\n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - } -] \ No newline at end of file diff --git a/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/generated_docs_data_v2.json index 5979f6e1f5..3c67652d30 100644 --- a/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/generated_docs_data_v2.json @@ -179,6 +179,13 @@ "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." }, + { + "filePath": "src/surfaces/admin/extension-targets.ts", + "syntaxKind": "PropertySignature", + "name": "admin.app.intent.render", + "value": "RenderExtension<\n IntentRenderApi<'admin.app.intent.render'>,\n FormExtensionComponents\n >", + "description": "Renders an admin extension for handling app intents." + }, { "filePath": "src/surfaces/admin/extension-targets.ts", "syntaxKind": "PropertySignature", @@ -706,7 +713,7 @@ "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." } ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" + "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n\n /**\n * Renders an admin extension for handling app intents.\n */\n 'admin.app.intent.render': RenderExtension<\n IntentRenderApi<'admin.app.intent.render'>,\n FormExtensionComponents\n >;\n}" } }, "RenderExtension": { @@ -917,9 +924,17 @@ "value": "string | URL", "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", "isOptional": true + }, + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "PropertySignature", + "name": "response", + "value": "IntentResponseApi", + "description": "Resolves the current intent from within an invoked extension. This property is only present when your extension is running inside an intent workflow.", + "isOptional": true } ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" + "value": "export interface Intents {\n /**\n * Resolves the current intent from within an invoked extension. This property is only present when your extension is running inside an intent workflow.\n */\n response?: IntentResponseApi;\n\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" } }, "IntentInvokeApi": { @@ -932,6 +947,71 @@ "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" } }, + "IntentResponseApi": { + "src/surfaces/admin/api/intents/intents.ts": { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "name": "IntentResponseApi", + "description": "The `IntentResponseApi` object provides methods for resolving the current intent from within an invoked extension. This API is only present when your extension is running inside an intent workflow.", + "members": [ + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "MethodSignature", + "name": "closed", + "value": "() => Promise", + "description": "Resolves the current intent as closed without completing the workflow." + }, + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "MethodSignature", + "name": "error", + "value": "(message: string, issues?: Issue[]) => Promise", + "description": "Resolves the current intent with an error. Use `issues` to provide field-specific validation details when available." + }, + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "MethodSignature", + "name": "ok", + "value": "(data?: { [key: string]: unknown; }) => Promise", + "description": "Resolves the current intent successfully. Pass output data when your intent defines a response schema." + } + ], + "value": "export interface IntentResponseApi {\n /**\n * Resolves the current intent successfully. Pass output data when your intent defines a response schema.\n */\n ok(data?: SuccessIntentResponse['data']): Promise;\n\n /**\n * Resolves the current intent with an error. Use `issues` to provide field-specific validation details when available.\n */\n error(message: string, issues?: Issue[]): Promise;\n\n /**\n * Resolves the current intent as closed without completing the workflow.\n */\n closed(): Promise;\n}" + } + }, + "Issue": { + "src/surfaces/admin/api/intents/intents.ts": { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "name": "Issue", + "description": "A structured issue describing a validation or workflow error.", + "members": [ + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "PropertySignature", + "name": "code", + "value": "string", + "description": "A machine-readable error code for this issue. Use this for programmatic error handling or logging.", + "isOptional": true + }, + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "PropertySignature", + "name": "message", + "value": "string", + "description": "A description of what's wrong with this field. Display this to help merchants understand how to fix the error.", + "isOptional": true + }, + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "PropertySignature", + "name": "path", + "value": "string[]", + "description": "The path to the field that has an error (for example, `['product', 'title']`). Use this to identify which field caused the validation failure.", + "isOptional": true + } + ], + "value": "export interface Issue {\n /** The path to the field that has an error (for example, `['product', 'title']`). Use this to identify which field caused the validation failure. */\n path?: string[];\n /** A description of what's wrong with this field. Display this to help merchants understand how to fix the error. */\n message?: string;\n /** A machine-readable error code for this issue. Use this for programmatic error handling or logging. */\n code?: string;\n}" + } + }, "PickerApi": { "src/surfaces/admin/api/picker/picker.ts": { "filePath": "src/surfaces/admin/api/picker/picker.ts", @@ -1242,7 +1322,7 @@ "syntaxKind": "PropertySignature", "name": "query", "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", + "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", "isOptional": true, "defaultValue": "''" }, @@ -1263,7 +1343,7 @@ "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." } ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" + "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" } }, "Filters": { @@ -1305,7 +1385,7 @@ "syntaxKind": "PropertySignature", "name": "query", "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", + "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", "isOptional": true }, { @@ -1318,7 +1398,7 @@ "defaultValue": "true" } ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" + "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" } }, "BaseResource": { @@ -1565,7 +1645,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", + "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | ... 541 more ... | \"x-circle-filled\"", "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." }, { @@ -2192,7 +2272,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", + "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | ... 541 more ... | \"x-circle-filled\"", "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." }, { @@ -2544,7 +2624,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -2889,7 +2969,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@2282", + "name": "__@internals$3@2303", "value": "ElementInternals", "description": "", "isPrivate": true @@ -3571,7 +3651,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -3674,7 +3754,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@2383", + "name": "__@internals$2@2404", "value": "ElementInternals", "description": "", "isPrivate": true @@ -3933,7 +4013,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -4095,7 +4175,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@2427", + "name": "__@dirtyStateSymbol@2448", "value": "boolean", "description": "", "isPrivate": true @@ -4103,7 +4183,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@2426", + "name": "__@internals$1@2447", "value": "ElementInternals", "description": "", "isPrivate": true @@ -4270,7 +4350,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@2462", + "name": "__@setFiles@2483", "value": "(files: File[]) => void", "description": "", "isPrivate": true @@ -4278,7 +4358,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@2464", + "name": "__@getFileInput@2485", "value": "() => HTMLInputElement", "description": "", "isPrivate": true @@ -4286,7 +4366,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals@2463", + "name": "__@internals@2484", "value": "ElementInternals", "description": "", "isPrivate": true @@ -4445,7 +4525,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", + "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"shipping email\" | \"shipping home email\" | \"shipping mobile email\" | ... 16 more ... | `section-${string} billing p...", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -4596,7 +4676,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -4706,7 +4786,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", + "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | ... 188 more ... | \"safe center safe center\"", "description": "A shorthand property for `justify-items` and `align-items`.", "defaultValue": "'normal normal'" }, @@ -4730,7 +4810,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", + "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | ... 229 more ... | \"space-evenly space-evenly\"", "description": "A shorthand property for `justify-content` and `align-content`.", "defaultValue": "'normal normal'" }, @@ -5515,7 +5595,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", + "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | ... 541 more ... | \"x-circle-filled\"", "description": "The icon to display from the icon library.\n\nSet 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'`." }, { @@ -6014,7 +6094,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@2598", + "name": "__@overlayHidden@2619", "value": "boolean", "description": "", "isPrivate": true @@ -6022,7 +6102,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@2599", + "name": "__@overlayActivator@2620", "value": "HTMLElement", "description": "", "isPrivate": true @@ -6030,7 +6110,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@2600", + "name": "__@overlayHideFrameId@2621", "value": "number", "description": "", "isPrivate": true @@ -6241,7 +6321,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -6364,7 +6444,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", + "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | ... 7 more ... | `section-${string} billing cc-csc`", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -6492,7 +6572,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -7083,7 +7163,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -7259,7 +7339,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", + "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | ... 141...", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -7387,7 +7467,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -7554,7 +7634,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", + "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | ... 541 more ... | \"x-circle-filled\"", "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." }, { @@ -7635,7 +7715,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@2877", + "name": "__@usedFirstOptionSymbol@2898", "value": "boolean", "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", "isPrivate": true @@ -7643,7 +7723,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@2878", + "name": "__@hasInitialValueSymbol@2899", "value": "boolean", "description": "", "isPrivate": true @@ -7673,7 +7753,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -8237,7 +8317,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -8352,7 +8432,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@2953", + "name": "__@actualTableVariantSymbol@2974", "value": "AddedContext", "description": "", "isPrivate": true @@ -8360,7 +8440,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@2954", + "name": "__@tableHeadersSharedDataSymbol@2975", "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", "description": "", "isPrivate": true @@ -8570,7 +8650,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@2976", + "name": "__@headerFormatSymbol@2997", "value": "HeaderFormat", "description": "", "isPrivate": true @@ -9022,7 +9102,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", + "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | ... 141...", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -9150,7 +9230,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -9218,7 +9298,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", + "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | ... 542 more ... | AnyString", "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", "defaultValue": "''" }, @@ -9265,7 +9345,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", + "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | ... 141...", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -9393,7 +9473,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -9550,7 +9630,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@2598", + "name": "__@overlayHidden@2619", "value": "boolean", "description": "", "isPrivate": true @@ -9558,7 +9638,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@2599", + "name": "__@overlayActivator@2620", "value": "HTMLElement", "description": "", "isPrivate": true @@ -9566,7 +9646,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@2600", + "name": "__@overlayHideFrameId@2621", "value": "number", "description": "", "isPrivate": true @@ -9709,7 +9789,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", + "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobi...", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -9860,7 +9940,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@2229", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -9917,16 +9997,6 @@ "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" } }, - "URLAutocompleteField": { - "src/surfaces/admin/components.ts": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - } - }, "AdminAction": { "src/surfaces/admin/components.ts": { "filePath": "src/surfaces/admin/components.ts", @@ -10377,6 +10447,100 @@ "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" } }, + "IntentRenderApi": { + "src/surfaces/admin/api/intents/intent-render.ts": { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "name": "IntentRenderApi", + "description": "The `IntentRenderApi` object provides methods for extensions that render in response to an app intent. Access the intent data to determine what action the merchant requested and use `intents.response` to resolve the intent when complete.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "auth", + "value": "Auth", + "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "extension", + "value": "{ target: ExtensionTarget; }", + "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "i18n", + "value": "I18n", + "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "intents", + "value": "IntentRenderIntents", + "description": "Provides methods for resolving the current intent. Always available for intent render extensions since they are always invoked inside an intent workflow." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "picker", + "value": "PickerApi", + "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "query", + "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", + "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "resourcePicker", + "value": "ResourcePickerApi", + "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "storage", + "value": "Storage", + "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." + } + ], + "value": "export interface IntentRenderApi\n extends StandardRenderingExtensionApi {\n /**\n * Provides methods for resolving the current intent. Always available for intent render extensions since they are always invoked inside an intent workflow.\n */\n intents: IntentRenderIntents;\n}" + } + }, + "IntentRenderIntents": { + "src/surfaces/admin/api/intents/intent-render.ts": { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "name": "IntentRenderIntents", + "description": "The intents API available to intent render extensions. Unlike other targets where `response` is optional, intent render extensions always run inside an intent workflow so `response` is guaranteed.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "response", + "value": "IntentResponseApi", + "description": "Resolves the current intent from within the invoked extension. Use `ok()` to signal success, `error()` to report failure, or `closed()` to indicate the merchant cancelled." + } + ], + "value": "export interface IntentRenderIntents {\n /**\n * Resolves the current intent from within the invoked extension. Use `ok()` to signal success, `error()` to report failure, or `closed()` to indicate the merchant cancelled.\n */\n response: IntentResponseApi;\n}" + } + }, + "FormExtensionComponents": { + "src/surfaces/admin/components/FormExtensionComponents.ts": { + "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "FormExtensionComponents", + "value": "StandardComponents | 'Form'", + "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." + } + }, "StandardApi": { "src/surfaces/admin/api/standard/standard.ts": { "filePath": "src/surfaces/admin/api/standard/standard.ts", @@ -11040,15 +11204,6 @@ "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." } }, - "FormExtensionComponents": { - "src/surfaces/admin/components/FormExtensionComponents.ts": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - } - }, "FunctionSettings": { "src/surfaces/admin/components.ts": { "filePath": "src/surfaces/admin/components.ts", @@ -12160,7 +12315,7 @@ "filePath": "src/surfaces/admin/api/intents/intents.ts", "syntaxKind": "PropertySignature", "name": "issues", - "value": "{ path?: string[]; message?: string; code?: string; }[]", + "value": "Issue[]", "description": "Specific validation issues or field errors. Present when validation fails on particular fields, allowing you to show targeted error messages.", "isOptional": true }, @@ -12173,7 +12328,7 @@ "isOptional": true } ], - "value": "export interface ErrorIntentResponse {\n /** Indicates the workflow failed. When `'error'`, the workflow encountered validation errors or other issues that prevented completion. */\n code?: 'error';\n /** A general error message describing what went wrong. Use this to display feedback when specific field errors aren't available. */\n message?: string;\n /** Specific validation issues or field errors. Present when validation fails on particular fields, allowing you to show targeted error messages. */\n issues?: {\n /** The path to the field that has an error (for example, `['product', 'title']`). Use this to identify which field caused the validation failure. */\n path?: string[];\n /** A description of what's wrong with this field. Display this to help merchants understand how to fix the error. */\n message?: string;\n /** A machine-readable error code for this issue. Use this for programmatic error handling or logging. */\n code?: string;\n }[];\n}" + "value": "export interface ErrorIntentResponse {\n /** Indicates the workflow failed. When `'error'`, the workflow encountered validation errors or other issues that prevented completion. */\n code?: 'error';\n /** A general error message describing what went wrong. Use this to display feedback when specific field errors aren't available. */\n message?: string;\n /** Specific validation issues or field errors. Present when validation fails on particular fields, allowing you to show targeted error messages. */\n issues?: Issue[];\n}" } }, "IntentResponse": { @@ -15500,7 +15655,7 @@ "syntaxKind": "PropertySignature", "name": "code", "value": "string", - "description": "A unique identifier describing the “class” of error. These will match the GraphQL error codes as closely as possible. For example the enums returned by the `metafieldsSet` mutation.\n\nLearn more about [MetafieldsSetUserErrorCode](https://shopify.dev/docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode)." + "description": "A unique identifier describing the “class” of error. These will match the GraphQL error codes as closely as possible. For example the enums returned by the `metafieldsSet` mutation.\n\nLearn more about [MetafieldsSetUserErrorCode](/docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode)." }, { "filePath": "src/surfaces/admin/components.ts", @@ -15525,7 +15680,7 @@ "isOptional": true } ], - "value": "export interface FunctionSettingsError extends Error {\n /**\n * A unique identifier describing the “class” of error. These will match\n * the GraphQL error codes as closely as possible. For example the enums\n * returned by the `metafieldsSet` mutation.\n *\n * Learn more about [MetafieldsSetUserErrorCode](https://shopify.dev/docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode).\n */\n code: string;\n /**\n * The error type name, always set to `FunctionSettingsError`.\n *\n * This helps identify errors specific to function settings, distinguishing them from other error types.\n */\n name: 'FunctionSettingsError';\n}" + "value": "export interface FunctionSettingsError extends Error {\n /**\n * A unique identifier describing the “class” of error. These will match\n * the GraphQL error codes as closely as possible. For example the enums\n * returned by the `metafieldsSet` mutation.\n *\n * Learn more about [MetafieldsSetUserErrorCode](/docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode).\n */\n code: string;\n /**\n * The error type name, always set to `FunctionSettingsError`.\n *\n * This helps identify errors specific to function settings, distinguishing them from other error types.\n */\n name: 'FunctionSettingsError';\n}" } }, "BaseTypographyProps": { @@ -15741,6 +15896,16 @@ "isPublicDocs": true } }, + "URLAutocompleteField": { + "src/surfaces/admin/components.ts": { + "filePath": "src/surfaces/admin/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "URLAutocompleteField", + "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", + "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", + "isPublicDocs": true + } + }, "Key": { "src/surfaces/admin/components.ts": { "filePath": "src/surfaces/admin/components.ts", @@ -18653,7 +18818,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@abortController@2658", + "name": "__@abortController@2679", "value": "AbortController", "description": "", "isPrivate": true @@ -18661,7 +18826,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@dialog@2652", + "name": "__@dialog@2673", "value": "HTMLDialogElement", "description": "", "isPrivate": true @@ -18669,7 +18834,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@focusedElement@2654", + "name": "__@focusedElement@2675", "value": "HTMLElement", "description": "", "isPrivate": true @@ -18677,7 +18842,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@nestedModals@2656", + "name": "__@nestedModals@2677", "value": "Map", "description": "", "isPrivate": true @@ -18685,7 +18850,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@childrenRerenderObserver@2660", + "name": "__@childrenRerenderObserver@2681", "value": "MutationObserver", "description": "", "isPrivate": true @@ -18693,7 +18858,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@shadowDomRerenderObserver@2661", + "name": "__@shadowDomRerenderObserver@2682", "value": "MutationObserver", "description": "", "isPrivate": true @@ -18701,7 +18866,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@onEscape@2655", + "name": "__@onEscape@2676", "value": "(event: KeyboardEvent) => void", "description": "", "isPrivate": true @@ -18709,7 +18874,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@onBackdropClick@2657", + "name": "__@onBackdropClick@2678", "value": "(event: MouseEvent) => void", "description": "", "isPrivate": true @@ -18717,7 +18882,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@onChildModalChange@2659", + "name": "__@onChildModalChange@2680", "value": "EventListenerOrEventListenerObject", "description": "", "isPrivate": true @@ -18725,7 +18890,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "GetAccessor", - "name": "__@isOpen@2651", + "name": "__@isOpen@2672", "value": "boolean", "description": "", "isPrivate": true @@ -18733,7 +18898,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "MethodDeclaration", - "name": "__@dismiss@2653", + "name": "__@dismiss@2674", "value": "() => void", "description": "", "isPrivate": true @@ -18741,7 +18906,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "GetAccessor", - "name": "__@hasOpenChildModal@2648", + "name": "__@hasOpenChildModal@2669", "value": "boolean", "description": "", "isPrivate": true @@ -18749,7 +18914,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "MethodDeclaration", - "name": "__@show@2649", + "name": "__@show@2670", "value": "() => Promise", "description": "", "isPrivate": true @@ -18757,7 +18922,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "MethodDeclaration", - "name": "__@hide@2650", + "name": "__@hide@2671", "value": "() => Promise", "description": "", "isPrivate": true @@ -18765,7 +18930,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@2598", + "name": "__@overlayHidden@2619", "value": "boolean", "description": "", "isPrivate": true @@ -18773,7 +18938,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@2599", + "name": "__@overlayActivator@2620", "value": "HTMLElement", "description": "", "isPrivate": true @@ -18781,7 +18946,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@2600", + "name": "__@overlayHideFrameId@2621", "value": "number", "description": "", "isPrivate": true @@ -19087,7 +19252,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@2598", + "name": "__@overlayHidden@2619", "value": "boolean", "description": "", "isPrivate": true @@ -19095,7 +19260,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@2599", + "name": "__@overlayActivator@2620", "value": "HTMLElement", "description": "", "isPrivate": true @@ -19103,7 +19268,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@2600", + "name": "__@overlayHideFrameId@2621", "value": "number", "description": "", "isPrivate": true @@ -21562,14 +21727,5 @@ ], "value": "export interface FunctionSettingsEvents {\n /**\n * An optional callback function that will be run by the admin when the user\n * commits their changes in the admin-rendered part of the function settings\n * experience. If `event.waitUntil` is called with a promise, the admin will wait for the\n * promise to resolve before committing any changes to Shopify’s servers. If\n * the promise rejects, the admin will abort the changes and display an error,\n * using the `message` property of the error you reject with.\n */\n submit: CallbackExtendableEventListener | null = null;\n /**\n * An optional callback function that will be run by the admin when\n * committing the changes to Shopify’s servers fails. The error event you receive includes\n * an `error` property that is an `AggregateError` object. This object includes\n * an array of errors that were caused by data your extension provided.\n * Network errors and user errors that are out of your control will not be reported here.\n *\n * In the `onError` callback, you should update your extension’s UI to\n * highlight the fields that caused the errors, and display the error messages\n * to the user.\n */\n error: CallbackErrorEventListener<\n typeof tagName,\n FunctionSettingsErrorEvent['error']['errors'][0]\n > | null = null;\n /**\n * A callback that is run when the function settings form is reset.\n */\n reset: CallbackEventListener | null = null;\n}" } - }, - "DataGeneratedType": { - "src/surfaces/admin/api/purchase-options-card-action.doc.ts": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.doc.ts", - "name": "DataGeneratedType", - "description": "Template schema for reference entity documentation pages.", - "isPublicDocs": true, - "value": "data: ReferenceEntityTemplateSchema = {\n name: 'Purchase Options Card Configuration API',\n description:\n 'The Purchase Options Card Configuration API provides access to purchase option selection data for products with [subscription](/docs/apps/build/purchase-options/subscriptions) and [selling plan](/docs/apps/build/purchase-options/subscriptions/selling-plans) configurations. Use this API to build action extensions that interact with selected [purchase options](/docs/apps/build/purchase-options) on product and product variant details pages.',\n isVisualComponent: false,\n type: 'API',\n requires:\n 'the [admin action](/docs/api/admin-extensions/{API_VERSION}/web-components/settings-and-templates/admin-action) component.',\n defaultExample: {\n description:\n 'Update a subscription by sending product and selling plan IDs to your backend. This example checks for selling plan presence, posts the update request, and shows a success banner before auto-closing the modal.',\n codeblock: {\n title: 'Manage a subscription',\n tabs: [\n {\n title: 'jsx',\n code: './purchase-options-card/examples/manage-subscription.jsx',\n language: 'jsx',\n },\n ],\n },\n },\n definitions: [\n {\n title: 'Properties',\n description:\n 'The `PurchaseOptionsCardConfigurationApi` object provides access to selected purchase option data. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to interact with currently selected products and selling plans in the `admin.product-purchase-option.action.render` and `admin.product-variant-purchase-option.action.render` targets.',\n type: 'PurchaseOptionsCardConfigurationApi',\n },\n ],\n examples: {\n description: 'Work with purchase options and selling plans',\n examples: [\n {\n description:\n 'Show a confirmation dialog before removing a product from a selling plan. This example demonstrates two-step confirmation with cancel option and success feedback after removal.',\n codeblock: {\n title: 'Remove from selling plan',\n tabs: [\n {\n title: 'jsx',\n code: './purchase-options-card/examples/remove-from-plan.jsx',\n language: 'jsx',\n },\n ],\n },\n },\n {\n description:\n 'Fetch selling plan name and options using the [GraphQL Admin API](/docs/api/admin-graphql) to validate the configuration. This example queries plan details, stores them in state, displays the information, and auto-closes after two seconds.',\n codeblock: {\n title: 'Validate selling plan',\n tabs: [\n {\n title: 'jsx',\n code: './purchase-options-card/examples/validate-selling-plan.jsx',\n language: 'jsx',\n },\n ],\n },\n },\n ],\n },\n category: 'Target APIs',\n subCategory: 'Contextual APIs',\n related: [],\n subSections: [\n {\n type: 'Generic',\n anchorLink: 'best-practices',\n title: 'Best practices',\n sectionContent:\n '- **Handle operations based on selling plan selection:** Items in `api.data.selected` have an optional `sellingPlanId` property. When present, perform subscription-specific operations. When absent, treat it as a one-time purchase.',\n },\n {\n type: 'Generic',\n anchorLink: 'limitations',\n title: 'Limitations',\n sectionContent:\n '- The action only appears when selling plan groups exist on the product or variant. The action is hidden for products without subscription options, even if your extension is installed.\\n' +\n '- Items in `api.data.selected` have an optional `sellingPlanId` property. When present, the merchant selected a specific selling plan. When absent, they selected the product/variant without a specific plan.\\n' +\n \"- Your extension can't modify selling plan configurations. The API is read-only for selling plan data. Use GraphQL mutations to update selling plans if needed.\\n\" +\n '- Selection data only includes IDs. You must query GraphQL for full product, variant, and selling plan details like billing policy and pricing adjustments. Selling plan group data is also unavailable. Your extension only receives individual selling plan IDs but not the parent selling plan group structure.',\n },\n ],\n}" - } } } \ No newline at end of file diff --git a/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/targets.json b/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/targets.json index e2f71779fa..a71fa8f202 100644 --- a/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/targets.json +++ b/packages/ui-extensions/docs/surfaces/admin/generated/admin_extensions/2026-04-rc/targets.json @@ -2930,6 +2930,68 @@ "ValidationSettingsApi" ] }, + "admin.app.intent.render": { + "components": [ + "Avatar", + "Badge", + "Banner", + "Box", + "Button", + "ButtonGroup", + "Checkbox", + "Chip", + "Choice", + "ChoiceList", + "Clickable", + "ClickableChip", + "ColorField", + "ColorPicker", + "DateField", + "DatePicker", + "Divider", + "DropZone", + "EmailField", + "Form", + "Grid", + "GridItem", + "Heading", + "Icon", + "Image", + "Link", + "ListItem", + "Menu", + "MoneyField", + "NumberField", + "Option", + "OptionGroup", + "OrderedList", + "Paragraph", + "PasswordField", + "QueryContainer", + "SearchField", + "Section", + "Select", + "Spinner", + "Stack", + "Switch", + "Table", + "TableBody", + "TableCell", + "TableHeader", + "TableHeaderRow", + "TableRow", + "Text", + "TextArea", + "TextField", + "Thumbnail", + "Tooltip", + "URLField", + "UnorderedList" + ], + "apis": [ + "IntentRenderApi" + ] + }, "admin.customers.segmentation-templates.data": { "components": [], "apis": [ @@ -3193,6 +3255,11 @@ "admin.settings.validation.render" ] }, + "IntentRenderApi": { + "targets": [ + "admin.app.intent.render" + ] + }, "CustomerSegmentTemplateApi": { "targets": [ "admin.customers.segmentation-templates.data" @@ -3257,6 +3324,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3308,6 +3376,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3359,6 +3428,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3410,6 +3480,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3461,6 +3532,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3512,6 +3584,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3563,6 +3636,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3614,6 +3688,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3665,6 +3740,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3716,6 +3792,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3767,6 +3844,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3818,6 +3896,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3869,6 +3948,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3920,6 +4000,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -3971,6 +4052,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4022,6 +4104,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4073,6 +4156,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4124,6 +4208,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4175,6 +4260,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4225,6 +4311,7 @@ "Form": { "targets": [ "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.block.render", "admin.collection-details.block.render", "admin.company-details.block.render", @@ -4247,6 +4334,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4298,6 +4386,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4349,6 +4438,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4400,6 +4490,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4451,6 +4542,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4502,6 +4594,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4553,6 +4646,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4604,6 +4698,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4655,6 +4750,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4706,6 +4802,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4757,6 +4854,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4808,6 +4906,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4859,6 +4958,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4910,6 +5010,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -4961,6 +5062,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5012,6 +5114,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5063,6 +5166,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5114,6 +5218,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5165,6 +5270,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5216,6 +5322,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5267,6 +5374,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5318,6 +5426,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5369,6 +5478,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5420,6 +5530,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5471,6 +5582,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5522,6 +5634,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5573,6 +5686,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5624,6 +5738,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5675,6 +5790,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5726,6 +5842,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5777,6 +5894,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5828,6 +5946,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5879,6 +5998,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5930,6 +6050,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", @@ -5981,6 +6102,7 @@ "targets": [ "admin.abandoned-checkout-details.action.render", "admin.abandoned-checkout-details.block.render", + "admin.app.intent.render", "admin.catalog-details.action.render", "admin.catalog-details.block.render", "admin.collection-details.action.render", diff --git a/packages/ui-extensions/docs/surfaces/admin/generated/app_home/generated_docs_data.json b/packages/ui-extensions/docs/surfaces/admin/generated/app_home/generated_docs_data.json deleted file mode 100644 index a6e53b4b60..0000000000 --- a/packages/ui-extensions/docs/surfaces/admin/generated/app_home/generated_docs_data.json +++ /dev/null @@ -1,30833 +0,0 @@ -[ - { - "name": "App nav", - "overviewPreviewDescription": "Creates a navigation menu for your app.", - "description": "The app nav component creates a navigation menu for your app. On desktop, the navigation appears in the app nav on the left side of the screen. On Shopify mobile, it appears in a dropdown from the title bar.\n\nAdd links to define navigation items. You can designate a home route with `rel=\"home\"` to set the default landing page. To trigger navigation from JavaScript code, use the [Navigation API](/docs/api/app-home/apis/navigation).", - "isVisualComponent": true, - "category": "App Bridge web components", - "thumbnail": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/navigation-menu.png", - "definitions": [ - { - "title": "Properties", - "description": "Properties for the app nav element. This element configures the app nav in the Shopify admin.", - "type": "SAppNavAttributes", - "typeDefinitions": { - "SAppNavAttributes": { - "filePath": "src/features/s-app-nav.ts", - "name": "SAppNavAttributes", - "description": "Attributes for the app nav element. It creates a navigation menu for your app that appears in the app nav sidebar on desktop or in a dropdown from the title bar on Shopify mobile. Commonly used to provide consistent navigation across all pages of your app.", - "members": [ - { - "filePath": "src/features/s-app-nav.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "any", - "description": "The navigation items to display, provided as link child elements. Each link creates a navigation item in the app's navigation menu. Include one link with `rel=\"home\"` to set the default landing page. Commonly used to organize your app into logical sections (like \"Products\", \"Orders\", or \"Settings\").", - "isOptional": true - } - ], - "value": "export interface SAppNavAttributes {\n /**\n * The navigation items to display, provided as link child elements. Each link creates a navigation item in the app's navigation menu. Include one link with `rel=\"home\"` to set the default landing page. Commonly used to organize your app into logical sections (like \"Products\", \"Orders\", or \"Settings\").\n */\n children?: any;\n}" - } - } - }, - { - "title": "Link properties", - "description": "Properties for links used as children.", - "type": "SAppNavLinkAttributes", - "typeDefinitions": { - "SAppNavLinkAttributes": { - "filePath": "src/features/s-app-nav.ts", - "name": "SAppNavLinkAttributes", - "description": "Attributes for link elements used as children of app nav. Each link defines a navigation destination in your app's menu.", - "members": [ - { - "filePath": "src/features/s-app-nav.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "string", - "description": "The visible label text for the navigation item. Keep labels short (1-2 words) and use nouns that describe the destination (such as \"Products\", \"Settings\", or \"Reports\"). Avoid verbs like \"Manage\" or \"View\" to maintain consistency with Shopify admin navigation patterns.", - "isOptional": true - }, - { - "filePath": "src/features/s-app-nav.ts", - "syntaxKind": "PropertySignature", - "name": "href", - "value": "string", - "description": "The URL path for the navigation item. Must be a relative path within your app, such as `/products` or `/settings`. When clicked, it navigates the app to this route without a full page reload. The path should match a route defined in your app's routing configuration." - }, - { - "filePath": "src/features/s-app-nav.ts", - "syntaxKind": "PropertySignature", - "name": "rel", - "value": "'home'", - "description": "Set to `\"home\"` to designate this link as the app's default landing page. When set, the link is hidden from the navigation menu. Only one link should have `rel=\"home\"`.", - "isOptional": true - } - ], - "value": "export interface SAppNavLinkAttributes {\n /**\n * The URL path for the navigation item. Must be a relative path within your app, such as `/products` or `/settings`. When clicked, it navigates the app to this route without a full page reload. The path should match a route defined in your app's routing configuration.\n */\n href: string;\n /**\n * Set to `\"home\"` to designate this link as the app's default landing page. When set, the link is hidden from the navigation menu. Only one link should have `rel=\"home\"`.\n */\n rel?: 'home';\n /**\n * The visible label text for the navigation item. Keep labels short (1-2 words) and use nouns that describe the destination (such as \"Products\", \"Settings\", or \"Reports\"). Avoid verbs like \"Manage\" or \"View\" to maintain consistency with Shopify admin navigation patterns.\n */\n children?: string;\n}" - } - } - } - ], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "\n- **Keep navigation concise**: Too many items makes navigation harder to scan. Group related pages or use subpages if you have many sections.\n- **Use clear, concise labels**: Navigation labels should be 1-2 words using nouns, such as \"Settings\", \"Templates\", or \"Reports\".\n- **Order by importance**: Place the most frequently used sections first in the navigation.\n- **Match labels to page titles**: Keep navigation labels consistent with the destination page titles.\n" - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "You can't nest navigation items inside other navigation items. Structure your app with a single level of navigation." - } - ], - "related": [], - "defaultExample": { - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/navigation-menu.png", - "description": "Add consistent navigation to your app. This example creates a navigation menu with links and a designated home route using `rel=\"home\"`.", - "codeblock": { - "title": "Navigation menu", - "tabs": [ - { - "title": "html", - "code": "<s-app-nav>\n <s-link href=\"/\" rel=\"home\">Home</s-link>\n <s-link href=\"/templates\">Templates</s-link>\n <s-link href=\"/settings\">Settings</s-link>\n</s-app-nav>\n", - "language": "html" - } - ] - } - } - }, - { - "name": "App window", - "overviewPreviewDescription": "Displays a fullscreen modal window.", - "description": "The app window component displays a fullscreen modal window for complex workflows that need dedicated screen space. The content is specified by the `src` property and should point to a route within your app. The app window covers the entire screen, with a top bar controlled by the Shopify admin that allows users to exit.\n\nFor most dialogs, we recommend using the [Polaris modal component](/docs/api/app-home/polaris-web-components/overlays/modal), which automatically determines whether the modal should display inside your app or as a fullscreen overlay and removes the need for separate App Bridge API control.", - "isVisualComponent": true, - "category": "App Bridge web components", - "thumbnail": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/s-app-window.png", - "definitions": [ - { - "title": "Properties", - "description": "Attributes for the app window element. This element displays a fullscreen modal window in the Shopify admin.", - "type": "SAppWindowAttributes", - "typeDefinitions": { - "SAppWindowAttributes": { - "filePath": "src/features/s-app-window.ts", - "name": "SAppWindowAttributes", - "description": "Attributes for the app window element. Displays a fullscreen modal window for complex workflows that need dedicated screen space.", - "members": [ - { - "filePath": "src/features/s-app-window.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier you assign to the app window element. Used when connecting buttons via `commandFor` or accessing the element with `document.getElementById()`. Choose a descriptive name like `\"settings-window\"` or `\"edit-modal\"`.", - "isOptional": true - }, - { - "filePath": "src/features/s-app-window.ts", - "syntaxKind": "PropertySignature", - "name": "src", - "value": "string", - "description": "The URL of the content to display within the app window. Must point to a route within your app that renders the window content. The URL is loaded in an iframe when the window opens. Commonly used for multi-step workflows, bulk editors, or detailed views that need full-screen space." - } - ], - "value": "export interface SAppWindowAttributes {\n /**\n * A unique identifier you assign to the app window element. Used when connecting buttons via `commandFor` or accessing the element with `document.getElementById()`. Choose a descriptive name like `\"settings-window\"` or `\"edit-modal\"`.\n */\n id?: string;\n /**\n * The URL of the content to display within the app window. Must point to a route within your app that renders the window content. The URL is loaded in an iframe when the window opens. Commonly used for multi-step workflows, bulk editors, or detailed views that need full-screen space.\n */\n src: string;\n}" - } - } - }, - { - "title": "Instance methods", - "description": "Instance properties and methods available on the app window element for programmatic control.", - "type": "_SAppWindowElement", - "typeDefinitions": { - "_SAppWindowElement": { - "filePath": "src/features/s-app-window.ts", - "name": "_SAppWindowElement", - "description": "Instance properties and methods for the app window element. Use these to programmatically control the app window.", - "members": [ - { - "filePath": "src/features/s-app-window.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: \"show\" | \"hide\", listener: EventListenerOrEventListenerObject) => void", - "description": "Adds an event listener for app window lifecycle events. Supported events: `show` fires when the window opens, `hide` fires when the window closes. Commonly used for tracking analytics, updating UI state, or cleaning up resources when the window closes.", - "isOptional": true - }, - { - "filePath": "src/features/s-app-window.ts", - "syntaxKind": "PropertySignature", - "name": "contentWindow", - "value": "Window | null", - "description": "Returns the Window object of the app window iframe, or `null` if the window is closed. Use this to communicate with the iframe content via `postMessage()` or access its document. Only accessible when the app window is open.", - "isOptional": true - }, - { - "filePath": "src/features/s-app-window.ts", - "syntaxKind": "MethodSignature", - "name": "hide", - "value": "() => Promise", - "description": "Closes the app window. Returns a Promise that resolves when the window is fully hidden. Any unsaved changes in forms with `data-save-bar` will prompt the user before closing. Commonly used for programmatic close after completing a workflow.", - "isOptional": true - }, - { - "filePath": "src/features/s-app-window.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: \"show\" | \"hide\", listener: EventListenerOrEventListenerObject) => void", - "description": "Removes a previously added event listener. Pass the same event type and listener function that was used with `addEventListener()`. Commonly used for cleanup when a component unmounts to prevent memory leaks.", - "isOptional": true - }, - { - "filePath": "src/features/s-app-window.ts", - "syntaxKind": "MethodSignature", - "name": "show", - "value": "() => Promise", - "description": "Opens the app window and displays the content from the `src` URL. Returns a Promise that resolves when the window is fully visible. Use `await` or `.then()` to run code after the window opens. Commonly used for launching workflows triggered by user actions.", - "isOptional": true - }, - { - "filePath": "src/features/s-app-window.ts", - "syntaxKind": "PropertySignature", - "name": "src", - "value": "string", - "description": "Gets or sets the URL of the content displayed in the app window. Changing this value while the window is open navigates to the new URL. Commonly used for dynamic navigation within an open window.", - "isOptional": true - }, - { - "filePath": "src/features/s-app-window.ts", - "syntaxKind": "MethodSignature", - "name": "toggle", - "value": "() => Promise", - "description": "Toggles the app window between open and closed states. Returns a Promise that resolves when the transition completes. Opens the window if closed, closes it if open. Commonly used for toggle buttons that control window visibility.", - "isOptional": true - } - ], - "value": "interface _SAppWindowElement {\n /**\n * Gets or sets the URL of the content displayed in the app window. Changing this value while the window is open navigates to the new URL. Commonly used for dynamic navigation within an open window.\n */\n src?: string;\n /**\n * Returns the Window object of the app window iframe, or `null` if the window is closed. Use this to communicate with the iframe content via `postMessage()` or access its document. Only accessible when the app window is open.\n */\n readonly contentWindow?: Window | null;\n /**\n * Opens the app window and displays the content from the `src` URL. Returns a Promise that resolves when the window is fully visible. Use `await` or `.then()` to run code after the window opens. Commonly used for launching workflows triggered by user actions.\n */\n show?(): Promise;\n /**\n * Closes the app window. Returns a Promise that resolves when the window is fully hidden. Any unsaved changes in forms with `data-save-bar` will prompt the user before closing. Commonly used for programmatic close after completing a workflow.\n */\n hide?(): Promise;\n /**\n * Toggles the app window between open and closed states. Returns a Promise that resolves when the transition completes. Opens the window if closed, closes it if open. Commonly used for toggle buttons that control window visibility.\n */\n toggle?(): Promise;\n /**\n * Adds an event listener for app window lifecycle events. Supported events: `show` fires when the window opens, `hide` fires when the window closes. Commonly used for tracking analytics, updating UI state, or cleaning up resources when the window closes.\n */\n addEventListener?(\n type: 'show' | 'hide',\n listener: EventListenerOrEventListenerObject,\n ): void;\n /**\n * Removes a previously added event listener. Pass the same event type and listener function that was used with `addEventListener()`. Commonly used for cleanup when a component unmounts to prevent memory leaks.\n */\n removeEventListener?(\n type: 'show' | 'hide',\n listener: EventListenerOrEventListenerObject,\n ): void;\n}" - } - } - } - ], - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "\n- **Open only via explicit user action**: Launch app windows from buttons that clearly indicate a fullscreen experience will open. Never open automatically on page load.\n- **Set descriptive titles**: Use the [page component](/docs/api/app-home/app-bridge-web-components/title-bar) inside your app window content to set a heading that clearly describes the current task.\n- **Handle unsaved changes**: Add `data-save-bar` to forms to automatically prompt merchants before they exit with unsaved changes. See [Save Bar API](/docs/api/app-home/apis/save-bar).\n- **Return to context on close**: Ensure closing the app window returns merchants to where they started. Don't navigate them elsewhere unexpectedly.\n" - } - ], - "defaultExample": { - "description": "Open a fullscreen modal for complex workflows. This example uses the [`command`](/docs/api/app-home/polaris-web-components/actions/button#properties-propertydetail-command) attribute on a button to toggle the app window.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/app-window-show-hide.png", - "codeblock": { - "title": "Show and hide", - "tabs": [ - { - "title": "html", - "code": "<s-app-window id=\"app-window\" src=\"/app-window-content.html\"></s-app-window>\n\n<s-button command=\"--show\" commandFor=\"app-window\">Open App Window</s-button>\n<s-button command=\"--hide\" commandFor=\"app-window\">Close App Window</s-button>\n\n", - "language": "html" - } - ] - } - }, - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Add context to fullscreen workflows. This example sets a title using the page component with the `heading` attribute.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/app-window-title-bar-heading.png", - "codeblock": { - "title": "Title bar heading", - "tabs": [ - { - "title": "html", - "code": "<s-app-window src=\"/app-window-content.html\"></s-app-window>\n\n// app-window-content.html\n<s-page heading=\"Product editor\"></s-page>\n", - "language": "html" - } - ] - } - }, - { - "description": "Provide actions in fullscreen workflows. This example adds primary and secondary action buttons to the title bar using page slots.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/app-window-title-bar-actions.png", - "codeblock": { - "title": "Title bar actions", - "tabs": [ - { - "title": "html", - "code": "<s-app-window src=\"/app-window-content.html\"></s-app-window>\n\n// app-window-content.html\n<s-page heading=\"Product editor\">\n <s-button slot=\"primary-action\" onclick=\"shopify.toast.show('Save')\">Save</s-button>\n <s-button slot=\"secondary-actions\" onclick=\"shopify.toast.show('Preview')\">Preview</s-button>\n</s-page>", - "language": "html" - } - ] - } - }, - { - "description": "Show status in fullscreen workflows. This example displays a status badge using the `accessory` slot with `tone` for color.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/app-window-title-bar-accessory-badge.png", - "codeblock": { - "title": "Title bar accessory badge", - "tabs": [ - { - "title": "html", - "code": "<s-app-window src=\"/app-window-content.html\"></s-app-window>\n\n// app-window-content.html\n<s-page heading=\"Edit Product\">\n <s-badge slot=\"accessory\" tone=\"warning\">Draft</s-badge>\n <s-button slot=\"primary-action\">Save</s-button>\n</s-page>\n", - "language": "html" - } - ] - } - }, - { - "description": "Add icons and dropdown menus to actions. This example pairs icon buttons with [`commandFor`](/docs/api/app-home/polaris-web-components/actions/button#properties-propertydetail-commandFor) to create dropdown menus.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/app-window-title-bar-icons-menus.png", - "codeblock": { - "title": "Title bar icons and menus", - "tabs": [ - { - "title": "html", - "code": "<s-app-window src=\"/app-window-content.html\"></s-app-window>\n\n// app-window-content.html\n<s-page heading=\"Product Details\">\n <s-button slot=\"primary-action\" icon=\"save\">Save</s-button>\n <s-button slot=\"secondary-actions\" commandFor=\"actions-menu\" icon=\"menu\">More actions</s-button>\n <s-menu id=\"actions-menu\">\n <s-button icon=\"duplicate\">Duplicate</s-button>\n <s-button icon=\"archive\">Archive</s-button>\n <s-button icon=\"delete\" tone=\"critical\">Delete</s-button>\n </s-menu>\n</s-page>\n", - "language": "html" - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Control the app window programmatically. This example calls the `show()`, `hide()`, and `toggle()` methods.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/app-window-instance-methods.png", - "codeblock": { - "title": "Instance methods", - "tabs": [ - { - "title": "html", - "code": "<s-app-window id=\"app-window\" src=\"/app-window-content.html\"></s-app-window>\n\n<s-button onclick=\"document.getElementById('app-window').show()\">Show App Window</s-button>\n<s-button onclick=\"document.getElementById('app-window').hide()\">Hide App Window</s-button>\n", - "language": "html" - } - ] - } - }, - { - "description": "Control the app window declaratively. This example uses the [`command`](/docs/api/app-home/polaris-web-components/actions/button#properties-propertydetail-command) and [`commandFor`](/docs/api/app-home/polaris-web-components/actions/button#properties-propertydetail-commandFor) attributes on buttons.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/app-window-command-attribute.png", - "codeblock": { - "title": "Command attribute", - "tabs": [ - { - "title": "html", - "code": "<s-app-window id=\"app-window\" src=\"/app-window-content.html\"></s-app-window>\n\n<s-button command=\"--show\" commandFor=\"app-window\">Open App Window</s-button>\n<s-button command=\"--hide\" commandFor=\"app-window\">Hide App Window</s-button>\n<s-button command=\"--toggle\" commandFor=\"app-window\">Toggle App Window</s-button>\n", - "language": "html" - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Prevent data loss in fullscreen forms. This example integrates the save bar using `data-save-bar` to track unsaved changes.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/app-window-form-with-save-bar.png", - "codeblock": { - "title": "Form with save bar", - "tabs": [ - { - "title": "html", - "code": "<s-app-window src=\"/app-window-content.html\"></s-app-window>\n\n// app-window-content.html\n<s-page heading=\"Product editor\">\n <form id=\"settings-form\" data-save-bar>\n <s-text-field label=\"Product title\" name=\"productTitle\"></s-text-field>\n <s-text-area label=\"Description\" name=\"description\"></s-checkbox>\n </form>\n</s-page>\n", - "language": "html" - } - ] - } - } - ] - } - ] - }, - "related": [] - }, - { - "name": "Save bar", - "overviewPreviewDescription": "Automatically manage save state for forms in your app.", - "description": "Enable automatic save bar integration for HTML forms by adding the `data-save-bar` attribute to your form element. When form data changes, a save bar automatically appears, prompting users to save or discard their changes.\n\nAlternatively, use the [Save Bar API](/docs/api/app-home/apis/save-bar) for programmatic control over the save bar behavior. Programmatic control is available as `shopify.saveBar.show()`, `shopify.saveBar.hide()`, and `shopify.saveBar.toggle()`.\n\n**Note:** The save bar functionality requires the full App Bridge UI library to be loaded via a [script tag](/docs/api/app-home/using-polaris-components).", - "isVisualComponent": true, - "category": "App Bridge web components", - "thumbnail": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/forms.png", - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "\n- **Always provide discard functionality**: Allow merchants to revert changes by handling the discard action or using form reset.\n- **Show loading states during save**: Use the [Loading API](/docs/api/app-home/apis/loading) to indicate when an async save operation is in progress.\n- **Use `data-discard-confirmation` for destructive forms**: Add a confirmation dialog when discarding changes would result in significant data loss.\n" - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "`data-save-bar` isn't supported inside modals. Forms inside modals should use the [Save Bar API](/docs/api/app-home/apis/save-bar) programmatically if save or discard functionality is needed." - } - ], - "definitions": [ - { - "title": "Attributes", - "description": "Add these attributes to your `
` element to enable save bar integration.", - "type": "_FormElement", - "typeDefinitions": { - "_FormElement": { - "filePath": "src/features/save-bar.ts", - "name": "_FormElement", - "description": "Attributes for HTML form elements that integrate with the save bar.", - "members": [ - { - "filePath": "src/features/save-bar.ts", - "syntaxKind": "PropertySignature", - "name": "data-discard-confirmation", - "value": "boolean", - "description": "Shows a confirmation dialog when the discard button is clicked, requiring merchants to confirm before losing their changes. The dialog prevents accidental data loss by adding a second step before reset. Commonly used for forms with significant data entry, multi-step workflows, or when changes cannot be easily recreated.", - "isOptional": true - }, - { - "filePath": "src/features/save-bar.ts", - "syntaxKind": "PropertySignature", - "name": "data-save-bar", - "value": "boolean", - "description": "Enables automatic save bar integration. When present, the save bar appears whenever any form input value changes from its initial state. The save bar automatically hides when the form is submitted or reset. Commonly used for settings pages, product editors, or any form where merchants need visual feedback about unsaved changes.", - "isOptional": true - }, - { - "filePath": "src/features/save-bar.ts", - "syntaxKind": "PropertySignature", - "name": "onreset", - "value": "(event: Event) => void", - "description": "Handler called when the form is reset via the save bar's discard button. Receives a standard `Event` that can be prevented with `event.preventDefault()` for custom discard logic. Commonly used for reverting form fields to their original values, clearing temporary state, or confirming discard actions programmatically.", - "isOptional": true - }, - { - "filePath": "src/features/save-bar.ts", - "syntaxKind": "PropertySignature", - "name": "onsubmit", - "value": "(event: SubmitEvent) => void", - "description": "Handler called when the form is submitted via the save bar's save button. Receives a standard `SubmitEvent` that can be prevented with `event.preventDefault()` for custom async save logic. Commonly used for API calls to persist data, form validation before save, or showing success/error toasts after the operation completes.", - "isOptional": true - } - ], - "value": "export interface _FormElement {\n /**\n * Enables automatic save bar integration. When present, the save bar appears whenever any form input value changes from its initial state. The save bar automatically hides when the form is submitted or reset. Commonly used for settings pages, product editors, or any form where merchants need visual feedback about unsaved changes.\n */\n 'data-save-bar'?: boolean;\n /**\n * Shows a confirmation dialog when the discard button is clicked, requiring merchants to confirm before losing their changes. The dialog prevents accidental data loss by adding a second step before reset. Commonly used for forms with significant data entry, multi-step workflows, or when changes cannot be easily recreated.\n */\n 'data-discard-confirmation'?: boolean;\n /**\n * Handler called when the form is submitted via the save bar's save button. Receives a standard `SubmitEvent` that can be prevented with `event.preventDefault()` for custom async save logic. Commonly used for API calls to persist data, form validation before save, or showing success/error toasts after the operation completes.\n */\n onsubmit?: (event: SubmitEvent) => void;\n /**\n * Handler called when the form is reset via the save bar's discard button. Receives a standard `Event` that can be prevented with `event.preventDefault()` for custom discard logic. Commonly used for reverting form fields to their original values, clearing temporary state, or confirming discard actions programmatically.\n */\n onreset?: (event: Event) => void;\n}" - } - } - } - ], - "related": [], - "defaultExample": { - "description": "Add the `data-save-bar` attribute to a form to automatically show a save bar when form data changes.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/save-bar-form.png", - "codeblock": { - "title": "Form with automatic save bar", - "tabs": [ - { - "title": "html", - "code": "<form data-save-bar>\n <s-text-field\n label=\"Product Title\"\n name=\"title\"\n required\n ></s-text-field>\n\n <s-text-area\n label=\"Description\"\n name=\"description\"\n rows=\"4\"\n ></s-text-area>\n\n <s-text-field\n label=\"Price\"\n name=\"price\"\n type=\"number\"\n step=\"0.01\"\n min=\"0\"\n ></s-text-field>\n</form>", - "language": "html" - } - ] - } - }, - "examples": { - "description": "Examples of save bar integration with forms.", - "examples": [ - { - "description": "Handle form submission and reset using standard HTML form events.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/save-bar-reset-handlers.png", - "codeblock": { - "title": "Submit and reset handlers", - "tabs": [ - { - "title": "html", - "code": "<form\n data-save-bar\n onsubmit=\"console.log('submit');\"\n onreset=\"console.log('reset');\"\n>\n <s-text-field label=\"Name\" name=\"name\"></s-text-field>\n <s-button type=\"submit\">Submit</s-button>\n <s-button type=\"reset\">Reset</s-button>\n</form>", - "language": "html" - } - ] - } - }, - { - "description": "Add `data-discard-confirmation` to show a confirmation dialog when the discard button is clicked, preventing accidental data loss.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/save-bar-discard-confirmation.png", - "codeblock": { - "title": "Discard confirmation", - "tabs": [ - { - "title": "html", - "code": "<form data-save-bar data-discard-confirmation>\n <s-text-field\n label=\"Store Name\"\n name=\"storeName\"\n required\n ></s-text-field>\n\n <s-text-area\n label=\"Store Description\"\n name=\"description\"\n rows=\"4\"\n ></s-text-area>\n\n <s-checkbox\n label=\"Enable notifications\"\n name=\"notifications\"\n ></s-checkbox>\n</form>\n", - "language": "html" - } - ] - } - } - ] - } - }, - { - "name": "Title bar", - "overviewPreviewDescription": "Manage the title bar for your app.", - "description": "The page component lets you customize the title bar that appears at the top of your embedded app. Use it to display the current page context, provide action buttons for saving or canceling changes, and add breadcrumb links for navigation. The title bar helps merchants understand where they are in your app and what actions they can take.\n\nUse this component when you need to set the admin's native title bar (title, breadcrumbs, actions) without a styled page layout. For apps that need a complete page layout with Polaris styling, use the [Polaris page component](/docs/api/app-home/polaris-web-components/layout-and-structure/page) instead.\n\nTo trigger navigation programmatically (such as navigating after a user action), use the [Navigation API](/docs/api/app-home/apis/navigation).", - "isVisualComponent": true, - "category": "App Bridge web components", - "thumbnail": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/title-bar-app-home-alt.png", - "subSections": [ - { - "type": "Generic", - "anchorLink": "best-practices", - "title": "Best practices", - "sectionContent": "\n- **Use descriptive headings**: The page heading should clearly describe the current context.\n- **Limit primary actions**: Only one primary action per page for clear hierarchy.\n- **Group related secondary actions**: Use `s-menu` with [`commandfor`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLButtonElement/commandForElement) to group related actions in dropdowns.\n- **Use breadcrumbs for navigation**: Help users understand where they are and how to go back.\n- **Add status badges when relevant**: Use the `accessory` slot with `s-badge` to show page status.\n" - }, - { - "type": "Generic", - "anchorLink": "limitations", - "title": "Limitations", - "sectionContent": "Anchor tags (``) aren't supported in Remix apps. Use Remix's `` component instead." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Properties for the page element. This element configures the title bar in the Shopify admin.", - "type": "SPageElement", - "typeDefinitions": { - "SPageElement": { - "filePath": "src/features/title-bar.ts", - "name": "SPageElement", - "description": "The page component configures the title bar in the Shopify admin. Use it to display page context, provide action buttons, and add navigation breadcrumbs.", - "members": [ - { - "filePath": "src/features/title-bar.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "SPageChildren", - "description": "Child elements that populate the title bar slots. Use slots to add action buttons, breadcrumb navigation, and status badges to the title bar.", - "isOptional": true - }, - { - "filePath": "src/features/title-bar.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The page title displayed in the title bar. Use a clear, descriptive heading that helps merchants understand the current context, such as \"Edit Product\" or \"Order #1234\".", - "isOptional": true - } - ], - "value": "export interface SPageElement {\n /**\n * The page title displayed in the title bar. Use a clear, descriptive heading that\n * helps merchants understand the current context, such as \"Edit Product\" or \"Order #1234\".\n */\n heading?: string;\n /**\n * Child elements that populate the title bar slots. Use slots to add action buttons,\n * breadcrumb navigation, and status badges to the title bar.\n */\n children?: SPageChildren;\n}" - }, - "SPageChildren": { - "filePath": "src/features/title-bar.ts", - "name": "SPageChildren", - "description": "Available slots for the page component. Each slot accepts specific elements that appear in designated areas of the title bar.", - "members": [ - { - "filePath": "src/features/title-bar.ts", - "syntaxKind": "PropertySignature", - "name": "accessory", - "value": "HTMLElement", - "description": "A status badge displayed next to the page heading. Use to indicate page state such as \"Draft\", \"Published\", or \"Archived\". Use `slot=\"accessory\"` on an `s-badge` element with a `tone` attribute (`info`, `success`, `warning`, or `critical`) to convey status.", - "isOptional": true - }, - { - "filePath": "src/features/title-bar.ts", - "syntaxKind": "PropertySignature", - "name": "breadcrumbActions", - "value": "HTMLElement", - "description": "A navigation link that appears before the page heading, typically used for \"Back\" navigation. Helps merchants understand their location and return to parent pages. Use `slot=\"breadcrumb-actions\"` on a Link element with an `href` attribute.", - "isOptional": true - }, - { - "filePath": "src/features/title-bar.ts", - "syntaxKind": "PropertySignature", - "name": "primaryAction", - "value": "HTMLElement", - "description": "The main call-to-action button, typically \"Save\" or \"Create\". Appears prominently on the right side of the title bar. Only one primary action should be used per page to maintain clear visual hierarchy. Use `slot=\"primary-action\"` on an `s-button` element.", - "isOptional": true - }, - { - "filePath": "src/features/title-bar.ts", - "syntaxKind": "PropertySignature", - "name": "secondaryActions", - "value": "HTMLElement[]", - "description": "Additional action buttons that appear next to the primary action. Use for secondary operations like \"Cancel\", \"Delete\", or grouped actions using `s-menu`. Multiple buttons can be added. Use `slot=\"secondary-actions\"` on `s-button` elements. For dropdown menus, combine with [`commandFor`](/docs/api/app-home/polaris-web-components/actions/button#properties-propertydetail-commandFor) attribute and an `s-menu` element.", - "isOptional": true - } - ], - "value": "interface SPageChildren {\n /**\n * The main call-to-action button, typically \"Save\" or \"Create\". Appears prominently\n * on the right side of the title bar. Only one primary action should be used per page\n * to maintain clear visual hierarchy. Use `slot=\"primary-action\"` on an `s-button` element.\n */\n primaryAction?: HTMLElement;\n /**\n * Additional action buttons that appear next to the primary action. Use for secondary\n * operations like \"Cancel\", \"Delete\", or grouped actions using `s-menu`. Multiple buttons\n * can be added. Use `slot=\"secondary-actions\"` on `s-button` elements. For dropdown menus,\n * combine with [`commandFor`](/docs/api/app-home/polaris-web-components/actions/button#properties-propertydetail-commandFor) attribute and an `s-menu` element.\n */\n secondaryActions?: HTMLElement[];\n /**\n * A navigation link that appears before the page heading, typically used for \"Back\"\n * navigation. Helps merchants understand their location and return to parent pages.\n * Use `slot=\"breadcrumb-actions\"` on a Link element with an `href` attribute.\n */\n breadcrumbActions?: HTMLElement;\n /**\n * A status badge displayed next to the page heading. Use to indicate page state such as\n * \"Draft\", \"Published\", or \"Archived\". Use `slot=\"accessory\"` on an `s-badge` element\n * with a `tone` attribute (`info`, `success`, `warning`, or `critical`) to convey status.\n */\n accessory?: HTMLElement;\n}" - } - } - } - ], - "related": [], - "examples": { - "description": "Learn how to use the page component to configure the admin title bar with various actions and breadcrumbs.", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Configure the title bar for your page. This example sets a heading and adds primary and secondary action buttons.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/title-bar-primary-and-secondary.png", - "codeblock": { - "title": "Primary and secondary actions", - "tabs": [ - { - "title": "html", - "code": "<s-page heading=\"Edit Product\">\n <s-button slot=\"primary-action\" onclick=\"shopify.toast.show('Add product')\">Add product</s-button>\n <s-button slot=\"secondary-actions\" onclick=\"shopify.toast.show('Import')\">Import</s-button>\n <s-button slot=\"secondary-actions\" onclick=\"shopify.toast.show('Export')\">Export</s-button>\n</s-page>\n", - "language": "html" - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Show page status in the title bar. This example displays a status badge using the `accessory` slot with `s-badge` and `tone`.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/title-bar-accessory-badge.png", - "codeblock": { - "title": "Accessory badge", - "tabs": [ - { - "title": "html", - "code": "<s-page heading=\"Edit Product\">\n <s-badge slot=\"accessory\" tone=\"warning\">Draft</s-badge>\n <s-button slot=\"primary-action\">Save</s-button>\n</s-page>\n", - "language": "html" - } - ] - } - }, - { - "description": "Organize multiple actions in a dropdown menu. This example groups secondary actions using `s-menu` with the [`commandFor`](/docs/api/app-home/polaris-web-components/actions/button#properties-propertydetail-commandFor) attribute.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/title-bar-grouped-secondary.png", - "codeblock": { - "title": "Grouped secondary actions", - "tabs": [ - { - "title": "html", - "code": "<s-page heading=\"Edit Product\">\n <s-button slot=\"primary-action\" onclick=\"shopify.toast.show('Save')\">Save</s-button>\n <s-button slot=\"secondary-actions\" commandFor=\"more-actions-id\">More actions</s-button>\n <s-menu id=\"more-actions-id\">\n <s-button icon=\"preview\" onclick=\"shopify.toast.show('Action 1')\">Preview</s-button>\n <s-button icon=\"import\" onclick=\"shopify.toast.show('Action 2')\">Import</s-button>\n <s-button icon=\"export\" onclick=\"shopify.toast.show('Action 3')\">Export</s-button>\n </s-menu>\n</s-page>\n", - "language": "html" - } - ] - } - }, - { - "description": "Help users navigate back to previous pages. This example adds breadcrumb navigation using the `breadcrumb-actions` slot.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/title-bar-breadcrumb.png", - "codeblock": { - "title": "Breadcrumb actions", - "tabs": [ - { - "title": "html", - "code": "<s-page heading=\"Edit Product\">\n <s-button slot=\"primary-action\" onclick=\"shopify.toast.show('Add product')\">Add product</s-button>\n <s-button slot=\"secondary-actions\" onclick=\"shopify.toast.show('Import')\">Import</s-button>\n <s-link slot=\"breadcrumb-actions\" href=\"/\">Home</s-link>\n</s-page>\n", - "language": "html" - } - ] - } - }, - { - "description": "Build a complete title bar configuration. This example combines heading, actions, badges, and breadcrumbs.", - "image": "/assets/templated-apis-screenshots/admin/app-bridge-web-components/title-bar-complete-example.png", - "codeblock": { - "title": "Complete example", - "tabs": [ - { - "title": "html", - "code": "<s-page heading=\"Edit Product\">\n <s-badge slot=\"accessory\" tone=\"warning\">Draft</s-badge>\n <s-button slot=\"primary-action\" onclick=\"shopify.toast.show('Save')\">Add product</s-button>\n <s-button slot=\"secondary-actions\" commandFor=\"more-actions-id\">More actions</s-button>\n <s-menu id=\"more-actions-id\">\n <s-button icon=\"preview\" onclick=\"shopify.toast.show('Preview')\">Preview</s-button>\n <s-button icon=\"import\" onclick=\"shopify.toast.show('Import')\">Import</s-button>\n <s-button icon=\"export\" onclick=\"shopify.toast.show('Export')\">Export</s-button>\n </s-menu>\n <s-link slot=\"breadcrumb-actions\" href=\"/\">Home</s-link>\n</s-page>\n", - "language": "html" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "App", - "overviewPreviewDescription": "Retrieve extension status and activation details", - "description": "The App API provides read-only access to extension information through the `app.extensions()` method, enabling discovery of installed extensions and their activation status. The method asynchronously retrieves detailed information including handles, types, and activations across different surfaces.\n\nThe method returns a Promise that resolves to an array of `ExtensionInfo` objects. Each object contains:\n- `handle`: The unique identifier for the extension\n- `type`: Either `'ui_extension'` or `'theme_app_extension'`\n- `activations`: Activation records (shape varies by extension type)\n\nThe array may be empty if the app has no extensions.\n\n**UI extensions** have activations with a `target` field indicating the admin, checkout, customer account or point of sale target.\n\n**Theme app extensions** have activations representing individual blocks/embeds, each with:\n- `handle`: Block/embed filename\n- `name`: Display name from block schema\n- `target`: Location type (`'section'`, `'head'`, `'body'`, or `'compliance_head'`)\n- `status`: Availability status (`'active'`, `'available'`, or `'unavailable'`)\n- `activations`: Array of theme-specific placements with `target` and `themeId`\n\n> Note: For [theme app extensions](/docs/apps/build/online-store/theme-app-extensions), activation data is sourced from the store's published theme only.", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "Authentication and data", - "related": [], - "defaultExample": { - "description": "Retrieve extension information. This example fetches all installed extensions, returning an array with UI and theme app extension data.", - "codeblock": { - "title": "Get extension status", - "tabs": [ - { - "code": "const extensions = await shopify.app.extensions();\n\n// Example response:\n// [\n// // UI extension\n// {\n// handle: 'checkout-extension-1',\n// type: 'ui_extension',\n// activations: [\n// {target: 'purchase.thank-you.block.render'},\n// {target: 'customer-account.order-status.block.render'},\n// ],\n// },\n// // Theme app extension with nested blocks/embeds\n// {\n// handle: 'my-theme-app-extension',\n// type: 'theme_app_extension',\n// activations: [\n// {\n// target: 'section',\n// handle: 'product-rating',\n// name: 'Product Rating',\n// status: 'active',\n// activations: [\n// {\n// target: 'template--product.custom/main/my_app_product_rating_GPzUYy',\n// themeId: 'gid://shopify/OnlineStoreTheme/123',\n// },\n// ],\n// },\n// {\n// target: 'head',\n// handle: 'analytics-widget',\n// name: 'Analytics Widget',\n// status: 'active',\n// activations: [\n// {target: 'theme', themeId: 'gid://shopify/OnlineStoreTheme/123'},\n// ],\n// },\n// ],\n// },\n// ];\n", - "language": "js" - } - ] - } - }, - "examples": { - "description": "Examples for working with extension data.", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Filter extensions by type. This example separates UI extensions from theme app extensions, which have different activation structures. Useful for checking admin targets vs storefront placements.", - "codeblock": { - "title": "Get extension status and filter by type", - "tabs": [ - { - "code": "const extensions = await shopify.app.extensions();\n\n// Get only UI extensions\nconst uiExtensions = extensions.filter(ext => ext.type === 'ui_extension');\n\n// Get only theme app extensions\nconst themeExtensions = extensions.filter(ext => ext.type === 'theme_app_extension');\n", - "language": "js" - } - ] - } - } - ] - } - ] - }, - "definitions": [ - { - "title": "Methods", - "description": "The `app` API is available on the `shopify` global object. The `extensions` method is asynchronous and returns a Promise that resolves to an array of `ExtensionInfo` objects.", - "type": "AppApi", - "typeDefinitions": { - "AppApi": { - "filePath": "src/types.ts", - "name": "AppApi", - "description": "This API interface provides methods to retrieve app and extension status information.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "MethodSignature", - "name": "extensions", - "value": "() => Promise[]>", - "description": "The list of extensions from the current app." - } - ], - "value": "export interface AppApi {\n /**\n * The list of extensions from the current app.\n * @returns A promise that resolves to the array of ExtensionInfo containing extension status information.\n *\n * This array may be empty if the app has no extensions.\n *\n * @throws {Error} When the App API is not available or the request fails.\n */\n extensions(): Promise;\n}" - }, - "ExtensionInfo": { - "filePath": "src/types.ts", - "name": "ExtensionInfo", - "description": "Contains the status information for the App's extension. This includes the extension's handle, activation targets, status, and type.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "activations", - "value": "Type extends \"ui_extension\" ? UiExtensionActivation[] : Type extends \"theme_app_extension\" ? ThemeExtensionActivation[] : never", - "description": "List of activation records for the extension. The shape depends on the extension type:\n- UI extensions have activations with only `target`\n- Theme app extensions have nested activations representing blocks/embeds" - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The unique identifier for the extension." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "Type", - "description": "The type of the extension." - } - ], - "value": "export interface ExtensionInfo {\n /**\n * The unique identifier for the extension.\n */\n handle: string;\n\n /**\n * List of activation records for the extension.\n * The shape depends on the extension type:\n * - UI extensions have activations with only `target`\n * - Theme app extensions have nested activations representing blocks/embeds\n */\n activations: Type extends 'ui_extension'\n ? UiExtensionActivation[]\n : Type extends 'theme_app_extension'\n ? ThemeExtensionActivation[]\n : never;\n\n /**\n * The type of the extension.\n */\n type: Type;\n}" - }, - "UiExtensionActivation": { - "filePath": "src/types.ts", - "name": "UiExtensionActivation", - "description": "Represents an activation record for a UI extension (checkout, customer account).", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "target", - "value": "string", - "description": "The target identifier for the extension activation. For example, `purchase.thank-you.block.render`." - } - ], - "value": "export interface UiExtensionActivation {\n /**\n * The target identifier for the extension activation.\n * For example, `purchase.thank-you.block.render`.\n */\n target: string;\n}" - }, - "ThemeExtensionActivation": { - "filePath": "src/types.ts", - "name": "ThemeExtensionActivation", - "description": "Represents an activation record for a theme app block or embed. Each block/embed within a theme app extension has its own handle, status, and activations.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "activations", - "value": "ThemeAppBlockActivation[]", - "description": "List of theme-specific activations for this block/embed. Contains where the block is actually placed within themes." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The filename of the block/embed within the theme app extension (without extension). This is configured by the developer when creating the block file." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "name", - "value": "string", - "description": "The developer-configured display name of this block/embed, defined in the block's schema." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "ActivationStatus", - "description": "The availability status of this block/embed." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "target", - "value": "ThemeAppBlockTarget | ThemeAppEmbedTarget", - "description": "The target location type for this block/embed.\n- `section` for blocks\n- `head`, `body`, or `compliance_head` for embeds" - } - ], - "value": "export interface ThemeExtensionActivation {\n /**\n * The target location type for this block/embed.\n * - `section` for blocks\n * - `head`, `body`, or `compliance_head` for embeds\n */\n target: ThemeAppBlockTarget | ThemeAppEmbedTarget;\n\n /**\n * The filename of the block/embed within the theme app extension (without extension).\n * This is configured by the developer when creating the block file.\n */\n handle: string;\n\n /**\n * The developer-configured display name of this block/embed, defined in the block's schema.\n * @see https://shopify.dev/docs/apps/build/online-store/theme-app-extensions/configuration#schema\n */\n name: string;\n\n /**\n * The availability status of this block/embed.\n */\n status: ActivationStatus;\n\n /**\n * List of theme-specific activations for this block/embed.\n * Contains where the block is actually placed within themes.\n */\n activations: ThemeAppBlockActivation[];\n}" - }, - "ThemeAppBlockActivation": { - "filePath": "src/types.ts", - "name": "ThemeAppBlockActivation", - "description": "Represents a theme-specific activation for a block/embed. Contains the specific placement within a theme.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "target", - "value": "string", - "description": "The target identifier for the block/embed placement within the theme. For example, `template--product.alternate/main/my_app_product_rating_GPzUYy`." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "themeId", - "value": "string", - "description": "The theme ID where this block/embed is activated. Format: `gid://shopify/OnlineStoreTheme/{id}`" - } - ], - "value": "export interface ThemeAppBlockActivation {\n /**\n * The target identifier for the block/embed placement within the theme.\n * For example, `template--product.alternate/main/my_app_product_rating_GPzUYy`.\n */\n target: string;\n\n /**\n * The theme ID where this block/embed is activated.\n * Format: `gid://shopify/OnlineStoreTheme/{id}`\n */\n themeId: string;\n}" - }, - "ActivationStatus": { - "filePath": "src/types.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActivationStatus", - "value": "'active' | 'available' | 'unavailable'", - "description": "The availability status of a theme app block or embed.\n- `active`: Block/embed is currently present in a theme.\n- `available`: Block/embed exists but is not currently active.\n- `unavailable`: Block/embed exists but is disabled (e.g., via available_if condition).\n\nNote that if a block is present in a theme but is not available, its status will be `unavailable`." - }, - "ThemeAppBlockTarget": { - "filePath": "src/types.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ThemeAppBlockTarget", - "value": "'section'", - "description": "Target location for theme app blocks." - }, - "ThemeAppEmbedTarget": { - "filePath": "src/types.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ThemeAppEmbedTarget", - "value": "'head' | 'body' | 'compliance_head'", - "description": "Target location for theme app embeds." - }, - "ExtensionType": { - "filePath": "src/types.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ExtensionType", - "value": "'ui_extension' | 'theme_app_extension'", - "description": "The type of extension.\n- `ui_extension` for checkout and customer account extensions\n- `theme_app_extension` for theme app extensions (blocks and embeds)" - } - } - } - ] - }, - { - "name": "Config", - "overviewPreviewDescription": "Access configuration values for your app and for the current shop", - "description": "The config API provides synchronous access to configuration values for your app and for the shop it's embedded in.\n\nSome values, such as shop, host, and locale, are automatically set by the host environment. For other values, such as apiKey, disabledFeatures, and appOrigins, you configure them using <meta> tags.", - "isVisualComponent": false, - "defaultExample": { - "description": "Access configuration values. This example reads all available config properties from the `shopify` global, including the current shop domain, locale, API key, disabled features, allowed origins, and debug settings. Use this to inspect the current environment your app is running in.", - "codeblock": { - "title": "Access configuration values", - "tabs": [ - { - "code": "shopify.config.shop; // => 'my-store.myshopify.com'\nshopify.config.locale; // => 'en-US'\nshopify.config.apiKey; // => 'your-client-id'\nshopify.config.disabledFeatures; // => ['fetch']\nshopify.config.appOrigins; // => ['https://example.com']\nshopify.config.debug; // => { webVitals: false }\n", - "language": "js" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `config` API is available on the `shopify` global. All properties are synchronous and available immediately without awaiting a Promise.", - "type": "AppBridgeConfig", - "typeDefinitions": { - "AppBridgeConfig": { - "filePath": "src/types.ts", - "name": "AppBridgeConfig", - "description": "", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "apiKey", - "value": "string", - "description": "The client ID (also known as the API key) for your application, found in the Shopify Partner Dashboard under your app's settings.\n\nYou must provide this value using a `` tag." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "appOrigins", - "value": "string[]", - "description": "An allowlist of origins that your app can send authenticated fetch requests to.\n\nSet this property if your app needs to make authenticated requests to a domain other than your app's origin. Requests to your app's own domain (and its subdomains) are automatically allowed.\n\nEach value must be an origin in the format `scheme://hostname` or `scheme://hostname:port` (for example, `'https://example.com'` or `'https://example.com:8443'`).", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "debug", - "value": "DebugOptions", - "description": "Configuration for enabling Web Vitals performance logging.\n\nUse this property during development for identifying performance issues.", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "disabledFeatures", - "value": "string[]", - "description": "An array of App Bridge feature names to disable in your app.\n\nSupported values:\n- `'fetch'` — Disables App Bridge's automatic fetch interceptor, which adds authentication headers to requests to the Shopify Admin API.\n- `'auto-redirect'` — Disables automatic redirection when the app is loaded outside of the Shopify Admin.", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "experimentalFeatures", - "value": "string[]", - "description": "The experimental features to enable in your app.\n\nThis allows app developers to opt-in to experiement features.", - "isOptional": true, - "isPrivate": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "host", - "value": "string", - "description": "The base64-encoded host of the shop that's embedding your app. When decoded, the value has the format `admin.shopify.com/store/{shop-name}`.\n\nThis property is automatically set by the host environment.", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "locale", - "value": "string", - "description": "The locale of the admin user viewing your app, as an IETF BCP 47 language tag (for example, `'en-US'`, `'fr-FR'`, `'ja-JP'`).\n\nThis reflects the language the merchant has chosen for the Shopify admin, not the shop's customer-facing locale.\n\nThis property is automatically set by the host environment.", - "isOptional": true, - "defaultValue": "'en-US'" - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "shop", - "value": "string", - "description": "The permanent `.myshopify.com` domain of the shop that's embedding your app (for example, `'my-store.myshopify.com'`). This is always the Shopify-assigned domain, not a custom domain.\n\nThis property is automatically set by the host environment.", - "isOptional": true - } - ], - "value": "export interface AppBridgeConfig {\n /**\n * The client ID (also known as the API key) for your application, found in the Shopify Partner Dashboard under your app's settings.\n *\n * You must provide this value using a `` tag.\n */\n apiKey: string;\n /**\n * An allowlist of origins that your app can send authenticated fetch requests to.\n *\n * Set this property if your app needs to make authenticated requests to a domain other than your app's origin.\n * Requests to your app's own domain (and its subdomains) are automatically allowed.\n *\n * Each value must be an origin in the format `scheme://hostname` or `scheme://hostname:port` (for example, `'https://example.com'` or `'https://example.com:8443'`).\n */\n appOrigins?: string[];\n /**\n * Configuration for enabling Web Vitals performance logging.\n *\n * Use this property during development for identifying performance issues.\n */\n debug?: DebugOptions;\n /**\n * An array of App Bridge feature names to disable in your app.\n *\n * Supported values:\n * - `'fetch'` — Disables App Bridge's automatic fetch interceptor, which adds authentication headers to requests to the Shopify Admin API.\n * - `'auto-redirect'` — Disables automatic redirection when the app is loaded outside of the Shopify Admin.\n *\n */\n disabledFeatures?: string[];\n /**\n * The experimental features to enable in your app.\n *\n * This allows app developers to opt-in to experiement features.\n * @private\n */\n experimentalFeatures?: string[];\n /**\n * The base64-encoded host of the shop that's embedding your app.\n * When decoded, the value has the format `admin.shopify.com/store/{shop-name}`.\n *\n * This property is automatically set by the host environment.\n\n */\n host?: string;\n /**\n * The locale of the admin user viewing your app, as an IETF BCP 47 language tag (for example, `'en-US'`, `'fr-FR'`, `'ja-JP'`).\n *\n * This reflects the language the merchant has chosen for the Shopify admin, not the shop's customer-facing locale.\n *\n * This property is automatically set by the host environment.\n * @defaultValue 'en-US'\n */\n locale?: string;\n /**\n * The permanent `.myshopify.com` domain of the shop that's embedding your app (for example, `'my-store.myshopify.com'`).\n * This is always the Shopify-assigned domain, not a custom domain.\n *\n * This property is automatically set by the host environment.\n */\n shop?: string;\n}" - }, - "DebugOptions": { - "filePath": "src/types.ts", - "name": "DebugOptions", - "description": "", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "webVitals", - "value": "boolean", - "description": "Enables or disables the logging of web performance metrics (Web Vitals) in the browser's console.\n\nWhen set to `true`, the app will log Core Web Vitals (such as LCP, INP, and CLS) and other relevant performance metrics to help developers understand the real-world performance of their app. This can be useful for debugging performance issues during development or in a staging environment.\n\nThis field is optional and defaults to `false`, meaning that web vitals logging is disabled by default to avoid performance overhead and unnecessary console output in production environments.", - "isOptional": true, - "defaultValue": "false" - } - ], - "value": "interface DebugOptions {\n /**\n * Enables or disables the logging of web performance metrics (Web Vitals) in the browser's console.\n *\n * When set to `true`, the app will log Core Web Vitals (such as LCP, INP, and CLS) and other relevant performance metrics to help developers understand the real-world performance of their app. This can be useful for debugging performance issues during development or in a staging environment.\n *\n * This field is optional and defaults to `false`, meaning that web vitals logging is disabled by default to avoid performance overhead and unnecessary console output in production environments.\n * @defaultValue false\n */\n webVitals?: boolean;\n}" - } - } - } - ], - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Provide your app's client ID using a meta tag so that App Bridge can identify your app and authenticate requests on your behalf. You can find this value in the Shopify Partner Dashboard under your app's settings.", - "codeblock": { - "title": "Set your API key", - "tabs": [ - { - "code": "<head>\n <meta name=\"shopify-api-key\" content=\"%SHOPIFY_API_KEY%\" />\n\n <script src=\"https://cdn.shopify.com/shopifycloud/app-bridge.js\"></script>\n</head>\n", - "language": "html" - } - ] - } - }, - { - "description": "Opt out of App Bridge's automatic authentication of fetch requests. This is useful if your app handles authentication manually or uses a custom fetch implementation.", - "codeblock": { - "title": "Disable the automatic fetch interceptor", - "tabs": [ - { - "code": "<head>\n <meta name=\"shopify-disabled-features\" content=\"fetch\" />\n\n <meta name=\"shopify-api-key\" content=\"%SHOPIFY_API_KEY%\" />\n <script src=\"https://cdn.shopify.com/shopifycloud/app-bridge.js\"></script>\n</head>\n", - "language": "html" - } - ] - } - }, - { - "description": "Disable more than one App Bridge feature by providing a comma-separated list in the meta tag content attribute.", - "codeblock": { - "title": "Disable multiple features", - "tabs": [ - { - "code": "<head>\n <meta name=\"shopify-disabled-features\" content=\"fetch, auto-redirect\" />\n\n <meta name=\"shopify-api-key\" content=\"%SHOPIFY_API_KEY%\" />\n <script src=\"https://cdn.shopify.com/shopifycloud/app-bridge.js\"></script>\n</head>\n", - "language": "html" - } - ] - } - }, - { - "description": "Add a domain to the allowlist so that App Bridge includes authentication headers when your app makes fetch requests to it. This is required for authenticated requests to any domain other than your app's own origin.", - "codeblock": { - "title": "Allow authenticated requests to an additional origin", - "tabs": [ - { - "code": "<head>\n <meta name=\"shopify-app-origins\" content=\"https://example.com\" />\n\n <meta name=\"shopify-api-key\" content=\"%SHOPIFY_API_KEY%\" />\n <script src=\"https://cdn.shopify.com/shopifycloud/app-bridge.js\"></script>\n</head>\n", - "language": "html" - } - ] - } - }, - { - "description": "Add multiple domains to the allowlist by providing a comma-separated list in the meta tag content attribute.", - "codeblock": { - "title": "Allow authenticated requests to multiple origins", - "tabs": [ - { - "code": "<head>\n <meta\n name=\"shopify-app-origins\"\n content=\"https://example.com,https://example.net\"\n />\n\n <meta name=\"shopify-api-key\" content=\"%SHOPIFY_API_KEY%\" />\n <script src=\"https://cdn.shopify.com/shopifycloud/app-bridge.js\"></script>\n</head>\n", - "language": "html" - } - ] - } - }, - { - "description": "Turn on Core Web Vitals logging in the browser console to help identify performance issues during development. This logs metrics such as LCP, INP, and CLS. Not recommended for production use.", - "codeblock": { - "title": "Enable Web Vitals logging", - "tabs": [ - { - "code": "<head>\n <meta name=\"shopify-debug\" content=\"web-vitals\" />\n\n <meta name=\"shopify-api-key\" content=\"%SHOPIFY_API_KEY%\" />\n <script src=\"https://cdn.shopify.com/shopifycloud/app-bridge.js\"></script>\n</head>\n", - "language": "html" - } - ] - } - } - ] - } - ] - }, - "category": "APIs", - "subCategory": "Authentication and data", - "related": [] - }, - { - "name": "Environment", - "overviewPreviewDescription": "Detect the platform your app is running on", - "description": "The Environment API provides access to information about the platform your app is running on. Use it to detect whether the app is embedded in the Shopify admin, running on Shopify Mobile, or running on Shopify POS.", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "Authentication and data", - "related": [], - "defaultExample": { - "description": "Read the environment object to see which platform your app is running on. Each property is a boolean that indicates whether a specific condition is true.", - "codeblock": { - "title": "Detect the current platform", - "tabs": [ - { - "code": "shopify.environment;\n// => { mobile: false, embedded: true, pos: false }\n", - "language": "js" - } - ] - } - }, - "definitions": [ - { - "title": "Properties", - "description": "The `environment` API is available on the `shopify` global. All properties are synchronous booleans.", - "type": "_EnvironmentApi", - "typeDefinitions": { - "_EnvironmentApi": { - "filePath": "src/features/environment.ts", - "name": "_EnvironmentApi", - "description": "", - "members": [ - { - "filePath": "src/features/environment.ts", - "syntaxKind": "PropertySignature", - "name": "embedded", - "value": "boolean", - "description": "Whether the app is embedded in the Shopify admin.", - "isOptional": true - }, - { - "filePath": "src/features/environment.ts", - "syntaxKind": "PropertySignature", - "name": "intent", - "value": "boolean", - "description": "Whether the app is running as an intent.", - "isOptional": true - }, - { - "filePath": "src/features/environment.ts", - "syntaxKind": "PropertySignature", - "name": "mobile", - "value": "boolean", - "description": "Whether the app is running inside the Shopify Mobile app.", - "isOptional": true - }, - { - "filePath": "src/features/environment.ts", - "syntaxKind": "PropertySignature", - "name": "pos", - "value": "boolean", - "description": "Whether the app is running inside the Shopify POS app.", - "isOptional": true - } - ], - "value": "interface _EnvironmentApi {\n /**\n * Whether the app is running inside the Shopify Mobile app.\n */\n mobile?: boolean;\n /**\n * Whether the app is embedded in the Shopify admin.\n */\n embedded?: boolean;\n /**\n * Whether the app is running inside the Shopify POS app.\n */\n pos?: boolean;\n /**\n * Whether the app is running as an intent.\n */\n intent?: boolean;\n}" - } - } - } - ], - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Check individual environment properties to adapt your app's behaviour to the current platform. In this example, your app shows a print button only on mobile devices where App Bridge handles printing through the native app.", - "codeblock": { - "title": "Adapt your UI based on the platform", - "tabs": [ - { - "code": "const mobile = shopify.environment.mobile;\n\nif (mobile) {\n document.getElementById('print-button').style.display = 'block';\n} else {\n document.getElementById('print-button').style.display = 'none';\n}\n", - "language": "js" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Resource Fetching", - "overviewPreviewDescription": "Make authenticated fetch requests from your embedded app", - "description": "Use the standard web fetch() method to make authenticated calls to the Shopify GraphQL Admin API and to your app's backend.\n\nBecause your app runs in an iframe, it can't natively make these requests. When you make a call using fetch(), App Bridge intercepts the method and handles authentication automatically.\n\nFor requests to the Shopify GraphQL Admin API, use the shopify:admin/ URL scheme, and ensure that Direct API access is enabled for your app in its TOML configuration file.\n\nFor requests to your app's domain and subdomains, App Bridge automatically adds an OpenID Connect ID Token in the Authorization header, along with the shop's locale in Accept-Language.\n\nYou can disable interception of the fetch() method by using the disabledFeatures configuration option. For more information about general usage of fetch(), see the Fetch API documentation.", - "isVisualComponent": false, - "defaultExample": { - "description": "Make a fetch request to your app's backend. App Bridge automatically adds an authentication token and the shop's locale to the request headers.", - "codeblock": { - "title": "Fetch data from your app's backend", - "tabs": [ - { - "code": "const response = await fetch('/api/products');\nconst data = await response.json();\nconsole.log(data);\n", - "language": "js" - } - ] - } - }, - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Send custom headers alongside App Bridge's automatic authentication. App Bridge automatically sets the `Authorization` and `Accept-Language` headers for requests to your app's domain, but you can add additional headers as needed.", - "codeblock": { - "title": "Send custom headers with a fetch request", - "tabs": [ - { - "code": "fetch('/api/endpoint', {\n headers: {'accept-language': 'fr'},\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Query the Shopify GraphQLAdmin API directly from the browser using the `shopify:admin/` URL scheme. This requires Direct API access to be enabled in your app configuration. App Bridge routes these requests through the host frame, so they don't require a backend server.", - "codeblock": { - "title": "Query the ShopifyGraphQL Admin API using Direct API access", - "tabs": [ - { - "code": "const res = await fetch('shopify:admin/api/graphql.json', {\n method: 'POST',\n body: JSON.stringify({\n query: `\n query GetProduct($id: ID!) {\n product(id: $id) {\n title\n }\n }\n `,\n variables: {id: 'gid://shopify/Product/1234567890'},\n }),\n});\n\nconst {data} = await res.json();\nconsole.log(data);\n", - "language": "js" - } - ] - } - }, - { - "description": "Pin your GraphQL Admin API requests to a specific API version instead of using the default. This is useful when you need to rely on behaviour from a particular API version.", - "codeblock": { - "title": "Query a specific Shopify GraphQL Admin API version", - "tabs": [ - { - "code": "const res = await fetch('shopify:admin/api/2025-04/graphql.json', {\n method: 'POST',\n body: JSON.stringify({\n query: `\n query GetProduct($id: ID!) {\n product(id: $id) {\n title\n }\n }\n `,\n variables: {id: 'gid://shopify/Product/1234567890'},\n }),\n});\n\nconst {data} = await res.json();\nconsole.log(data);\n", - "language": "js" - } - ] - } - } - ] - } - ] - }, - "definitions": [], - "category": "APIs", - "subCategory": "Authentication and data", - "related": [] - }, - { - "name": "ID Token", - "overviewPreviewDescription": "Retrieve a Shopify ID token for authenticating requests", - "description": "The ID Token API retrieves an OpenID Connect ID Token from Shopify as a JWT string. Your backend can verify this token to confirm that a request came from an authenticated Shopify user.\n\nIn most cases, you don't need to call this method directly. App Bridge's fetch interceptor automatically includes the ID token in the Authorization header for requests to your app's domain. Use shopify.idToken() directly when you need the token for something other than a standard fetch request, such as a WebSocket connection or a third-party API call.\n\nFor more information, see the ID Token documentation.", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "Authentication and data", - "definitions": [ - { - "title": "ID Token", - "description": "The `idToken` API is available on the `shopify` global. It returns a Promise that resolves to a JWT string.", - "type": "IdTokenApi", - "typeDefinitions": { - "IdTokenApi": { - "filePath": "src/features/id-token.ts", - "name": "IdTokenApi", - "description": "Asynchronously returns an ID token.", - "params": [], - "returns": { - "filePath": "src/features/id-token.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "() => Promise" - } - } - } - ], - "related": [], - "defaultExample": { - "description": "Retrieve an ID token from Shopify. The returned value is a JWT string that your backend can verify to authenticate the request.", - "codeblock": { - "title": "Retrieve an ID token", - "tabs": [ - { - "code": "const token = await shopify.idToken();\n// => 'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCJ9...'\n", - "language": "js" - } - ] - } - }, - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Pass the ID token when opening a WebSocket connection to your backend. This is a common use case for calling `shopify.idToken()` directly, since the fetch interceptor only handles standard fetch requests.", - "codeblock": { - "title": "Authenticate a WebSocket connection", - "tabs": [ - { - "code": "const token = await shopify.idToken();\n\nconst socket = new WebSocket(\n `wss://your-app.example.com/ws?token=${token}`\n);\n", - "language": "js" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Intents", - "overviewPreviewDescription": "Orchestrate workflows and operations across Shopify resources", - "description": "The Intents API launches Shopify's native admin interfaces for creating and editing resources. When your extension calls an intent, merchants complete their changes using the standard Shopify admin UI, and your app receives the result. This means you don't need to build custom forms.\n\nUse this API to build workflows like adding products to collections, creating multiple related resources in a sequence (like a product, collection, and discount for a promotion), opening specific resources for editing, or launching discount creation with pre-selected types.", - "isVisualComponent": true, - "category": "APIs", - "subCategory": "User interface and interactions", - "thumbnail": "/assets/templated-apis-screenshots/admin/apis/intents.png", - "defaultExample": { - "description": "Launch the collection creation workflow in the Shopify admin. The merchant completes the form using the standard Shopify admin UI, and your app receives the result when the workflow completes.", - "image": "/assets/templated-apis-screenshots/admin/apis/intents.png", - "codeblock": { - "title": "Create a new collection", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Collection');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Collection created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - "definitions": [ - { - "title": "invoke", - "description": "The `invoke` API is a function that accepts either a string query or an options object describing the intent to invoke and returns a Promise that resolves to an activity handle for the workflow.\n\n## Intent Format\n\nIntents are invoked using a string query format: `${action}:${type},${value}`\n\nWhere:\n- `action` - The operation to perform (`create` or `edit`)\n- `type` - The resource type (e.g., `shopify/Product`)\n- `value` - The resource identifier (only for edit actions)\n\n## Supported Resources\n\n### Article\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Article` | — | — |\n| `edit` | `shopify/Article` | `gid://shopify/Article/{id}` | — |\n\n### Catalog\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Catalog` | — | — |\n| `edit` | `shopify/Catalog` | `gid://shopify/Catalog/{id}` | — |\n\n### Collection\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Collection` | — | — |\n| `edit` | `shopify/Collection` | `gid://shopify/Collection/{id}` | — |\n\n### Customer\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Customer` | — | — |\n| `edit` | `shopify/Customer` | `gid://shopify/Customer/{id}` | — |\n\n### Discount\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Discount` | — | `{ type: 'amount-off-product' \\| 'amount-off-order' \\| 'buy-x-get-y' \\| 'free-shipping' }` |\n| `edit` | `shopify/Discount` | `gid://shopify/Discount/{id}` | — |\n\n### Location\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Location` | — | — |\n| `edit` | `shopify/Location` | `gid://shopify/Location/{id}` | — |\n\n### Market\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Market` | — | — |\n| `edit` | `shopify/Market` | `gid://shopify/Market/{id}` | — |\n\n### Menu\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Menu` | — | — |\n| `edit` | `shopify/Menu` | `gid://shopify/Menu/{id}` | — |\n\n### Metafield Definition\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/MetafieldDefinition` | — | `{ ownerType: 'product' }` |\n| `edit` | `shopify/MetafieldDefinition` | `gid://shopify/MetafieldDefinition/{id}` | `{ ownerType: 'product' }` |\n\n### Metaobject\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Metaobject` | — | `{ type: 'shopify--color-pattern' }` |\n| `edit` | `shopify/Metaobject` | `gid://shopify/Metaobject/{id}` | `{ type: 'shopify--color-pattern' }` |\n\n### Metaobject Definition\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/MetaobjectDefinition` | — | — |\n| `edit` | `shopify/MetaobjectDefinition` | — | `{ type: 'my_metaobject_definition_type' }` |\n\n### Page\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Page` | — | — |\n| `edit` | `shopify/Page` | `gid://shopify/Page/{id}` | — |\n\n### Product\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/Product` | — | — |\n| `edit` | `shopify/Product` | `gid://shopify/Product/{id}` | — |\n\n### Product Variant\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `create` | `shopify/ProductVariant` | — | `{ productId: 'gid://shopify/Product/{id}' }` |\n| `edit` | `shopify/ProductVariant` | `gid://shopify/ProductVariant/{id}` | `{ productId: 'gid://shopify/Product/{id}' }` |\n\n> Note:\n> To determine whether to use the `shopify/ProductVariant` `edit` intent or the `shopify/Product` `edit` intent, query the [`product.hasOnlyDefaultVariant`](https://shopify.dev/docs/api/admin-graphql/latest/objects/Product#field-Product.fields.hasOnlyDefaultVariant) field. If the product has only the default variant (`hasOnlyDefaultVariant` is `true`), use the `shopify/Product` `edit` intent.\n\n### Settings\n\n> Settings are the configuration options for the store. Use this to invoke and edit settings.\n\n| Action | Type | Value | Data |\n|--------|------|-------|------|\n| `edit` | `settings/StoreDetails` | — | — |\n| `edit` | `settings/StoreDefaults` | — | — |\n| `edit` | `settings/OrderIdFormat` | — | — |\n| `edit` | `settings/OrderProcessing` | — | — |\n| `edit` | `settings/LocationDefault` | — | — |", - "type": "PublicIntentsApi", - "typeDefinitions": { - "PublicIntentsApi": { - "filePath": "src/features/intents.ts", - "name": "PublicIntentsApi", - "description": "Entry point for Shopify intents.\n\nA unified surface for describing and orchestrating operations. Intents pair an `action` (verb) with a resource `type` and optional `value` and `data` to request a workflow.", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "MethodSignature", - "name": "invoke", - "value": "{ (query: IntentQuery): Promise; (intentURL: string, options?: IntentQueryOptions): Promise; }", - "description": "Invoke an intent using the object syntax.\n\nInvoke an intent using the URL syntax.\n\nURL format: `action:type[,value][?params]`.", - "isOptional": true - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "response", - "value": "IntentResponseApi", - "description": "If in an intent workflow, provides mechanisms to resolve the intent with a given response.", - "isOptional": true - } - ], - "value": "export interface PublicIntentsApi {\n /**\n * Invoke an intent using the object syntax.\n *\n * @param query - Structured intent description, including `action` and `type`.\n * @returns A promise for an {@link IntentActivity} that completes with an\n * {@link IntentResponse}.\n */\n invoke?(query: IntentQuery): Promise;\n /**\n * Invoke an intent using the URL syntax.\n *\n * URL format: `action:type[,value][?params]`.\n *\n * @param intentURL - Intent in URL form, e.g. `create:shopify/Product` or\n * `edit:shopify/Product,gid://shopify/Product/123?title=Updated` or\n * `edit:gid://shopify/Product/123`.\n * @param options - Optional supplemental inputs such as `value` or `data`.\n * @returns A promise for an {@link IntentActivity} that completes with an\n * {@link IntentResponse}.\n */\n invoke?(\n intentURL: string,\n options?: IntentQueryOptions,\n ): Promise;\n /**\n * If in an intent workflow, provides mechanisms to resolve the intent with a given response.\n */\n response?: IntentResponseApi;\n}" - }, - "IntentQuery": { - "filePath": "src/features/intents.ts", - "name": "IntentQuery", - "description": "", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "IntentAction", - "description": "" - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ [key: string]: unknown; }", - "description": "Additional data required for certain intent types. For example:\n- Discount creation requires { type: 'amount-off-product' | 'amount-off-order' | 'buy-x-get-y' | 'free-shipping' }\n- ProductVariant creation requires { productId: 'gid://shopify/Product/123' }\n- Metaobject creation requires { type: 'shopify--color-pattern' }", - "isOptional": true - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "IntentType", - "description": "" - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The resource identifier for edit actions (e.g., 'gid://shopify/Product/123').", - "isOptional": true - } - ], - "value": "export interface IntentQuery extends IntentQueryOptions {\n action: IntentAction;\n type: IntentType;\n}" - }, - "IntentAction": { - "filePath": "src/features/intents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "IntentAction", - "value": "'create' | 'edit'", - "description": "The action to perform on a resource." - }, - "IntentType": { - "filePath": "src/features/intents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "IntentType", - "value": "'shopify/Article' | 'shopify/Catalog' | 'shopify/Collection' | 'shopify/Customer' | 'shopify/Discount' | 'shopify/Market' | 'shopify/Menu' | 'shopify/MetafieldDefinition' | 'shopify/Metaobject' | 'shopify/MetaobjectDefinition' | 'shopify/Page' | 'shopify/Product' | 'shopify/ProductVariant'", - "description": "Supported resource types that can be targeted by intents." - }, - "Collection": { - "filePath": "src/features/resource-picker.ts", - "name": "Collection", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "availablePublicationCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "descriptionHtml", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "Image | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productsAutomaticallySortedCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productsCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productsManuallySortedCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "publicationCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "ruleSet", - "value": "RuleSet | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "seo", - "value": "{ description?: string; title?: string; }", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "sortOrder", - "value": "CollectionSortOrder", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "storefrontId", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "templateSuffix", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "updatedAt", - "value": "string", - "description": "" - } - ], - "value": "export interface Collection extends Resource {\n availablePublicationCount: number;\n description: string;\n descriptionHtml: string;\n handle: string;\n id: string;\n image?: Image | null;\n productsAutomaticallySortedCount: number;\n productsCount: number;\n productsManuallySortedCount: number;\n publicationCount: number;\n ruleSet?: RuleSet | null;\n seo: {\n description?: string | null;\n title?: string | null;\n };\n sortOrder: CollectionSortOrder;\n storefrontId: string;\n templateSuffix?: string | null;\n title: string;\n updatedAt: string;\n}" - }, - "Image": { - "filePath": "src/features/resource-picker.ts", - "name": "Image", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "altText", - "value": "string", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "originalSrc", - "value": "string", - "description": "" - } - ], - "value": "interface Image {\n id: string;\n altText?: string;\n originalSrc: string;\n}" - }, - "RuleSet": { - "filePath": "src/features/resource-picker.ts", - "name": "RuleSet", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "appliedDisjunctively", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "rules", - "value": "CollectionRule[]", - "description": "" - } - ], - "value": "interface RuleSet {\n appliedDisjunctively: boolean;\n rules: CollectionRule[];\n}" - }, - "CollectionRule": { - "filePath": "src/features/resource-picker.ts", - "name": "CollectionRule", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "column", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "condition", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "relation", - "value": "string", - "description": "" - } - ], - "value": "interface CollectionRule {\n column: string;\n condition: string;\n relation: string;\n}" - }, - "CollectionSortOrder": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "CollectionSortOrder", - "value": "enum CollectionSortOrder {\n Manual = 'MANUAL',\n BestSelling = 'BEST_SELLING',\n AlphaAsc = 'ALPHA_ASC',\n AlphaDesc = 'ALPHA_DESC',\n PriceDesc = 'PRICE_DESC',\n PriceAsc = 'PRICE_ASC',\n CreatedDesc = 'CREATED_DESC',\n Created = 'CREATED',\n MostRelevant = 'MOST_RELEVANT',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Manual", - "value": "MANUAL" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "BestSelling", - "value": "BEST_SELLING" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "AlphaAsc", - "value": "ALPHA_ASC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "AlphaDesc", - "value": "ALPHA_DESC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "PriceDesc", - "value": "PRICE_DESC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "PriceAsc", - "value": "PRICE_ASC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "CreatedDesc", - "value": "CREATED_DESC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Created", - "value": "CREATED" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "MostRelevant", - "value": "MOST_RELEVANT" - } - ] - }, - "Customer": { - "filePath": "src/features/pos.ts", - "name": "Customer", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "email", - "value": "string", - "description": "The email for a new customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "firstName", - "value": "string", - "description": "The first name for new customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "number", - "description": "The ID of existing customer." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "lastName", - "value": "string", - "description": "The last name for new customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "note", - "value": "string", - "description": "The note for new customer.", - "isOptional": true - } - ], - "value": "interface Customer {\n /**\n * The ID of existing customer.\n */\n id: number;\n /**\n * The email for a new customer.\n */\n email?: string;\n /**\n * The first name for new customer.\n */\n firstName?: string;\n /**\n * The last name for new customer.\n */\n lastName?: string;\n /**\n * The note for new customer.\n */\n note?: string;\n}" - }, - "Discount": { - "filePath": "src/features/pos.ts", - "name": "Discount", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "amount", - "value": "number", - "description": "Amount of discount. Only for fixed or percentage discounts." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "discountDescription", - "value": "string", - "description": "Description of discount.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "DiscountType", - "description": "Type of discount." - } - ], - "value": "interface Discount {\n /**\n * Amount of discount. Only for fixed or percentage discounts.\n */\n amount: number;\n /**\n * Description of discount.\n */\n discountDescription?: string;\n /**\n * Type of discount.\n */\n type: DiscountType;\n}" - }, - "DiscountType": { - "filePath": "src/features/pos.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountType", - "value": "'Percentage' | 'FixedAmount'", - "description": "" - }, - "Product": { - "filePath": "src/features/resource-picker.ts", - "name": "Product", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "availablePublicationCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "createdAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "descriptionHtml", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "images", - "value": "Image[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "publishedAt", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "ProductStatus", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "tags", - "value": "string[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "templateSuffix", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "tracksInventory", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "updatedAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Partial[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "vendor", - "value": "string", - "description": "" - } - ], - "value": "export interface Product extends Resource {\n availablePublicationCount: number;\n createdAt: string;\n descriptionHtml: string;\n handle: string;\n hasOnlyDefaultVariant: boolean;\n images: Image[];\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n productType: string;\n publishedAt?: string | null;\n tags: string[];\n templateSuffix?: string | null;\n title: string;\n totalInventory: number;\n totalVariants: number;\n tracksInventory: boolean;\n variants: Partial[];\n vendor: string;\n updatedAt: string;\n status: ProductStatus;\n}" - }, - "ProductStatus": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "ProductStatus", - "value": "enum ProductStatus {\n Active = 'ACTIVE',\n Archived = 'ARCHIVED',\n Draft = 'DRAFT',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Active", - "value": "ACTIVE" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Archived", - "value": "ARCHIVED" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Draft", - "value": "DRAFT" - } - ] - }, - "ProductVariant": { - "filePath": "src/features/resource-picker.ts", - "name": "ProductVariant", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "availableForSale", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "Money | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "createdAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "fulfillmentService", - "value": "{ id: string; inventoryManagement: boolean; productBased: boolean; serviceName: string; type: FulfillmentServiceType; }", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "Image | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryItem", - "value": "{ id: string; }", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryManagement", - "value": "ProductVariantInventoryManagement", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryPolicy", - "value": "ProductVariantInventoryPolicy", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryQuantity", - "value": "number | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "position", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "Money", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "product", - "value": "Partial", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "requiresShipping", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ value?: string; }[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "updatedAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "weightUnit", - "value": "WeightUnit", - "description": "" - } - ], - "value": "export interface ProductVariant extends Resource {\n availableForSale: boolean;\n barcode?: string | null;\n compareAtPrice?: Money | null;\n createdAt: string;\n displayName: string;\n fulfillmentService?: {\n id: string;\n inventoryManagement: boolean;\n productBased: boolean;\n serviceName: string;\n type: FulfillmentServiceType;\n };\n image?: Image | null;\n inventoryItem: { id: string };\n inventoryManagement: ProductVariantInventoryManagement;\n inventoryPolicy: ProductVariantInventoryPolicy;\n inventoryQuantity?: number | null;\n position: number;\n price: Money;\n product: Partial;\n requiresShipping: boolean;\n selectedOptions: { value?: string | null }[];\n sku?: string | null;\n taxable: boolean;\n title: string;\n weight?: number | null;\n weightUnit: WeightUnit;\n updatedAt: string;\n}" - }, - "Money": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Money", - "value": "string", - "description": "" - }, - "FulfillmentServiceType": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "FulfillmentServiceType", - "value": "enum FulfillmentServiceType {\n GiftCard = 'GIFT_CARD',\n Manual = 'MANUAL',\n ThirdParty = 'THIRD_PARTY',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "GiftCard", - "value": "GIFT_CARD" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Manual", - "value": "MANUAL" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "ThirdParty", - "value": "THIRD_PARTY" - } - ] - }, - "ProductVariantInventoryManagement": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "ProductVariantInventoryManagement", - "value": "enum ProductVariantInventoryManagement {\n Shopify = 'SHOPIFY',\n NotManaged = 'NOT_MANAGED',\n FulfillmentService = 'FULFILLMENT_SERVICE',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Shopify", - "value": "SHOPIFY" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "NotManaged", - "value": "NOT_MANAGED" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "FulfillmentService", - "value": "FULFILLMENT_SERVICE" - } - ] - }, - "ProductVariantInventoryPolicy": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "ProductVariantInventoryPolicy", - "value": "enum ProductVariantInventoryPolicy {\n Deny = 'DENY',\n Continue = 'CONTINUE',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Deny", - "value": "DENY" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Continue", - "value": "CONTINUE" - } - ] - }, - "WeightUnit": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "WeightUnit", - "value": "enum WeightUnit {\n Kilograms = 'KILOGRAMS',\n Grams = 'GRAMS',\n Pounds = 'POUNDS',\n Ounces = 'OUNCES',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Kilograms", - "value": "KILOGRAMS" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Grams", - "value": "GRAMS" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Pounds", - "value": "POUNDS" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Ounces", - "value": "OUNCES" - } - ] - }, - "IntentActivity": { - "filePath": "src/features/intents.ts", - "name": "IntentActivity", - "description": "Activity handle for tracking intent workflow progress.", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "complete", - "value": "Promise", - "description": "A Promise that resolves when the intent workflow completes, returning the response.", - "isOptional": true - } - ], - "value": "export interface IntentActivity {\n /**\n * A Promise that resolves when the intent workflow completes, returning the response.\n */\n complete?: Promise;\n}" - }, - "IntentResponse": { - "filePath": "src/features/intents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "IntentResponse", - "value": "ClosedIntentResponse | SuccessIntentResponse | ErrorIntentResponse", - "description": "Result of an intent activity. Discriminated union representing all possible completion outcomes." - }, - "ClosedIntentResponse": { - "filePath": "src/features/intents.ts", - "name": "ClosedIntentResponse", - "description": "User dismissed or closed the workflow without completing it.", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "'closed'", - "description": "", - "isOptional": true - } - ], - "value": "export interface ClosedIntentResponse {\n code?: 'closed';\n}" - }, - "SuccessIntentResponse": { - "filePath": "src/features/intents.ts", - "name": "SuccessIntentResponse", - "description": "Successful intent completion.", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "'ok'", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ [key: string]: unknown; }", - "description": "", - "isOptional": true - } - ], - "value": "export interface SuccessIntentResponse {\n code?: 'ok';\n data?: {[key: string]: unknown};\n}" - }, - "ErrorIntentResponse": { - "filePath": "src/features/intents.ts", - "name": "ErrorIntentResponse", - "description": "Failed intent completion.", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "'error'", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "Issue[]", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "", - "isOptional": true - } - ], - "value": "export interface ErrorIntentResponse {\n code?: 'error';\n message?: string;\n issues?: StandardSchemaV1.Issue[];\n}" - }, - "IntentQueryOptions": { - "filePath": "src/features/intents.ts", - "name": "IntentQueryOptions", - "description": "Options for invoking intents when using the query string format.", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ [key: string]: unknown; }", - "description": "Additional data required for certain intent types. For example:\n- Discount creation requires { type: 'amount-off-product' | 'amount-off-order' | 'buy-x-get-y' | 'free-shipping' }\n- ProductVariant creation requires { productId: 'gid://shopify/Product/123' }\n- Metaobject creation requires { type: 'shopify--color-pattern' }", - "isOptional": true - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The resource identifier for edit actions (e.g., 'gid://shopify/Product/123').", - "isOptional": true - } - ], - "value": "export interface IntentQueryOptions {\n /**\n * The resource identifier for edit actions (e.g., 'gid://shopify/Product/123').\n */\n value?: string;\n /**\n * Additional data required for certain intent types.\n * For example:\n * - Discount creation requires { type: 'amount-off-product' | 'amount-off-order' | 'buy-x-get-y' | 'free-shipping' }\n * - ProductVariant creation requires { productId: 'gid://shopify/Product/123' }\n * - Metaobject creation requires { type: 'shopify--color-pattern' }\n */\n data?: {[key: string]: unknown};\n}" - }, - "IntentResponseApi": { - "filePath": "src/features/intents.ts", - "name": "IntentResponseApi", - "description": "", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "closed", - "value": "() => Promise", - "description": "If in an intent workflow, resolves the intent with a closed response." - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "error", - "value": "(message: string, issues?: Issue[]) => Promise", - "description": "If in an intent workflow, resolves the intent with an error response and the provided message and issues, if any." - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "ok", - "value": "(data?: { [key: string]: unknown; }) => Promise", - "description": "If in an intent workflow, resolves the intent with a success response and the provided data, if any." - } - ], - "value": "export interface IntentResponseApi {\n /**\n * If in an intent workflow, resolves the intent with a success response and the provided data, if any.\n * @param data - The data to include in the success response.\n */\n ok: (data?: SuccessIntentResponse['data']) => Promise;\n /**\n * If in an intent workflow, resolves the intent with an error response and the provided message and issues, if any.\n * @param message - The message to include in the error response.\n * @param issues - The issues to include in the error response.\n */\n error: (message: string, issues?: StandardSchemaV1.Issue[]) => Promise;\n /**\n * If in an intent workflow, resolves the intent with a closed response.\n */\n closed: () => Promise;\n}" - } - } - }, - { - "title": "IntentAction", - "description": "Supported actions that can be performed on resources.\n- `create`: Opens a creation workflow for a new resource\n- `edit`: Opens an editing workflow for an existing resource (requires `value` parameter)", - "type": "IntentAction", - "typeDefinitions": { - "IntentAction": { - "filePath": "src/features/intents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "IntentAction", - "value": "'create' | 'edit'", - "description": "The action to perform on a resource." - } - } - }, - { - "title": "IntentType", - "description": "Supported resource types that can be targeted by intents.", - "type": "IntentType", - "typeDefinitions": { - "IntentType": { - "filePath": "src/features/intents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "IntentType", - "value": "'shopify/Article' | 'shopify/Catalog' | 'shopify/Collection' | 'shopify/Customer' | 'shopify/Discount' | 'shopify/Market' | 'shopify/Menu' | 'shopify/MetafieldDefinition' | 'shopify/Metaobject' | 'shopify/MetaobjectDefinition' | 'shopify/Page' | 'shopify/Product' | 'shopify/ProductVariant'", - "description": "Supported resource types that can be targeted by intents." - }, - "Collection": { - "filePath": "src/features/resource-picker.ts", - "name": "Collection", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "availablePublicationCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "descriptionHtml", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "Image | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productsAutomaticallySortedCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productsCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productsManuallySortedCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "publicationCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "ruleSet", - "value": "RuleSet | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "seo", - "value": "{ description?: string; title?: string; }", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "sortOrder", - "value": "CollectionSortOrder", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "storefrontId", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "templateSuffix", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "updatedAt", - "value": "string", - "description": "" - } - ], - "value": "export interface Collection extends Resource {\n availablePublicationCount: number;\n description: string;\n descriptionHtml: string;\n handle: string;\n id: string;\n image?: Image | null;\n productsAutomaticallySortedCount: number;\n productsCount: number;\n productsManuallySortedCount: number;\n publicationCount: number;\n ruleSet?: RuleSet | null;\n seo: {\n description?: string | null;\n title?: string | null;\n };\n sortOrder: CollectionSortOrder;\n storefrontId: string;\n templateSuffix?: string | null;\n title: string;\n updatedAt: string;\n}" - }, - "Image": { - "filePath": "src/features/resource-picker.ts", - "name": "Image", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "altText", - "value": "string", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "originalSrc", - "value": "string", - "description": "" - } - ], - "value": "interface Image {\n id: string;\n altText?: string;\n originalSrc: string;\n}" - }, - "RuleSet": { - "filePath": "src/features/resource-picker.ts", - "name": "RuleSet", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "appliedDisjunctively", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "rules", - "value": "CollectionRule[]", - "description": "" - } - ], - "value": "interface RuleSet {\n appliedDisjunctively: boolean;\n rules: CollectionRule[];\n}" - }, - "CollectionRule": { - "filePath": "src/features/resource-picker.ts", - "name": "CollectionRule", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "column", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "condition", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "relation", - "value": "string", - "description": "" - } - ], - "value": "interface CollectionRule {\n column: string;\n condition: string;\n relation: string;\n}" - }, - "CollectionSortOrder": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "CollectionSortOrder", - "value": "enum CollectionSortOrder {\n Manual = 'MANUAL',\n BestSelling = 'BEST_SELLING',\n AlphaAsc = 'ALPHA_ASC',\n AlphaDesc = 'ALPHA_DESC',\n PriceDesc = 'PRICE_DESC',\n PriceAsc = 'PRICE_ASC',\n CreatedDesc = 'CREATED_DESC',\n Created = 'CREATED',\n MostRelevant = 'MOST_RELEVANT',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Manual", - "value": "MANUAL" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "BestSelling", - "value": "BEST_SELLING" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "AlphaAsc", - "value": "ALPHA_ASC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "AlphaDesc", - "value": "ALPHA_DESC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "PriceDesc", - "value": "PRICE_DESC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "PriceAsc", - "value": "PRICE_ASC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "CreatedDesc", - "value": "CREATED_DESC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Created", - "value": "CREATED" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "MostRelevant", - "value": "MOST_RELEVANT" - } - ] - }, - "Customer": { - "filePath": "src/features/pos.ts", - "name": "Customer", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "email", - "value": "string", - "description": "The email for a new customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "firstName", - "value": "string", - "description": "The first name for new customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "number", - "description": "The ID of existing customer." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "lastName", - "value": "string", - "description": "The last name for new customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "note", - "value": "string", - "description": "The note for new customer.", - "isOptional": true - } - ], - "value": "interface Customer {\n /**\n * The ID of existing customer.\n */\n id: number;\n /**\n * The email for a new customer.\n */\n email?: string;\n /**\n * The first name for new customer.\n */\n firstName?: string;\n /**\n * The last name for new customer.\n */\n lastName?: string;\n /**\n * The note for new customer.\n */\n note?: string;\n}" - }, - "Discount": { - "filePath": "src/features/pos.ts", - "name": "Discount", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "amount", - "value": "number", - "description": "Amount of discount. Only for fixed or percentage discounts." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "discountDescription", - "value": "string", - "description": "Description of discount.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "DiscountType", - "description": "Type of discount." - } - ], - "value": "interface Discount {\n /**\n * Amount of discount. Only for fixed or percentage discounts.\n */\n amount: number;\n /**\n * Description of discount.\n */\n discountDescription?: string;\n /**\n * Type of discount.\n */\n type: DiscountType;\n}" - }, - "DiscountType": { - "filePath": "src/features/pos.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountType", - "value": "'Percentage' | 'FixedAmount'", - "description": "" - }, - "Product": { - "filePath": "src/features/resource-picker.ts", - "name": "Product", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "availablePublicationCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "createdAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "descriptionHtml", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "images", - "value": "Image[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "publishedAt", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "ProductStatus", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "tags", - "value": "string[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "templateSuffix", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "tracksInventory", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "updatedAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Partial[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "vendor", - "value": "string", - "description": "" - } - ], - "value": "export interface Product extends Resource {\n availablePublicationCount: number;\n createdAt: string;\n descriptionHtml: string;\n handle: string;\n hasOnlyDefaultVariant: boolean;\n images: Image[];\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n productType: string;\n publishedAt?: string | null;\n tags: string[];\n templateSuffix?: string | null;\n title: string;\n totalInventory: number;\n totalVariants: number;\n tracksInventory: boolean;\n variants: Partial[];\n vendor: string;\n updatedAt: string;\n status: ProductStatus;\n}" - }, - "ProductStatus": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "ProductStatus", - "value": "enum ProductStatus {\n Active = 'ACTIVE',\n Archived = 'ARCHIVED',\n Draft = 'DRAFT',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Active", - "value": "ACTIVE" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Archived", - "value": "ARCHIVED" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Draft", - "value": "DRAFT" - } - ] - }, - "ProductVariant": { - "filePath": "src/features/resource-picker.ts", - "name": "ProductVariant", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "availableForSale", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "Money | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "createdAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "fulfillmentService", - "value": "{ id: string; inventoryManagement: boolean; productBased: boolean; serviceName: string; type: FulfillmentServiceType; }", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "Image | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryItem", - "value": "{ id: string; }", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryManagement", - "value": "ProductVariantInventoryManagement", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryPolicy", - "value": "ProductVariantInventoryPolicy", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryQuantity", - "value": "number | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "position", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "Money", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "product", - "value": "Partial", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "requiresShipping", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ value?: string; }[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "updatedAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "weightUnit", - "value": "WeightUnit", - "description": "" - } - ], - "value": "export interface ProductVariant extends Resource {\n availableForSale: boolean;\n barcode?: string | null;\n compareAtPrice?: Money | null;\n createdAt: string;\n displayName: string;\n fulfillmentService?: {\n id: string;\n inventoryManagement: boolean;\n productBased: boolean;\n serviceName: string;\n type: FulfillmentServiceType;\n };\n image?: Image | null;\n inventoryItem: { id: string };\n inventoryManagement: ProductVariantInventoryManagement;\n inventoryPolicy: ProductVariantInventoryPolicy;\n inventoryQuantity?: number | null;\n position: number;\n price: Money;\n product: Partial;\n requiresShipping: boolean;\n selectedOptions: { value?: string | null }[];\n sku?: string | null;\n taxable: boolean;\n title: string;\n weight?: number | null;\n weightUnit: WeightUnit;\n updatedAt: string;\n}" - }, - "Money": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Money", - "value": "string", - "description": "" - }, - "FulfillmentServiceType": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "FulfillmentServiceType", - "value": "enum FulfillmentServiceType {\n GiftCard = 'GIFT_CARD',\n Manual = 'MANUAL',\n ThirdParty = 'THIRD_PARTY',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "GiftCard", - "value": "GIFT_CARD" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Manual", - "value": "MANUAL" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "ThirdParty", - "value": "THIRD_PARTY" - } - ] - }, - "ProductVariantInventoryManagement": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "ProductVariantInventoryManagement", - "value": "enum ProductVariantInventoryManagement {\n Shopify = 'SHOPIFY',\n NotManaged = 'NOT_MANAGED',\n FulfillmentService = 'FULFILLMENT_SERVICE',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Shopify", - "value": "SHOPIFY" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "NotManaged", - "value": "NOT_MANAGED" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "FulfillmentService", - "value": "FULFILLMENT_SERVICE" - } - ] - }, - "ProductVariantInventoryPolicy": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "ProductVariantInventoryPolicy", - "value": "enum ProductVariantInventoryPolicy {\n Deny = 'DENY',\n Continue = 'CONTINUE',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Deny", - "value": "DENY" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Continue", - "value": "CONTINUE" - } - ] - }, - "WeightUnit": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "WeightUnit", - "value": "enum WeightUnit {\n Kilograms = 'KILOGRAMS',\n Grams = 'GRAMS',\n Pounds = 'POUNDS',\n Ounces = 'OUNCES',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Kilograms", - "value": "KILOGRAMS" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Grams", - "value": "GRAMS" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Pounds", - "value": "POUNDS" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Ounces", - "value": "OUNCES" - } - ] - } - } - }, - { - "title": "IntentQueryOptions", - "description": "Options for invoking intents when using the query string format.", - "type": "IntentQueryOptions", - "typeDefinitions": { - "IntentQueryOptions": { - "filePath": "src/features/intents.ts", - "name": "IntentQueryOptions", - "description": "Options for invoking intents when using the query string format.", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ [key: string]: unknown; }", - "description": "Additional data required for certain intent types. For example:\n- Discount creation requires { type: 'amount-off-product' | 'amount-off-order' | 'buy-x-get-y' | 'free-shipping' }\n- ProductVariant creation requires { productId: 'gid://shopify/Product/123' }\n- Metaobject creation requires { type: 'shopify--color-pattern' }", - "isOptional": true - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The resource identifier for edit actions (e.g., 'gid://shopify/Product/123').", - "isOptional": true - } - ], - "value": "export interface IntentQueryOptions {\n /**\n * The resource identifier for edit actions (e.g., 'gid://shopify/Product/123').\n */\n value?: string;\n /**\n * Additional data required for certain intent types.\n * For example:\n * - Discount creation requires { type: 'amount-off-product' | 'amount-off-order' | 'buy-x-get-y' | 'free-shipping' }\n * - ProductVariant creation requires { productId: 'gid://shopify/Product/123' }\n * - Metaobject creation requires { type: 'shopify--color-pattern' }\n */\n data?: {[key: string]: unknown};\n}" - } - } - }, - { - "title": "IntentResponse", - "description": "Response object returned when the intent workflow completes.", - "type": "IntentResponse", - "typeDefinitions": { - "IntentResponse": { - "filePath": "src/features/intents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "IntentResponse", - "value": "ClosedIntentResponse | SuccessIntentResponse | ErrorIntentResponse", - "description": "Result of an intent activity. Discriminated union representing all possible completion outcomes." - }, - "ClosedIntentResponse": { - "filePath": "src/features/intents.ts", - "name": "ClosedIntentResponse", - "description": "User dismissed or closed the workflow without completing it.", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "'closed'", - "description": "", - "isOptional": true - } - ], - "value": "export interface ClosedIntentResponse {\n code?: 'closed';\n}" - }, - "SuccessIntentResponse": { - "filePath": "src/features/intents.ts", - "name": "SuccessIntentResponse", - "description": "Successful intent completion.", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "'ok'", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "{ [key: string]: unknown; }", - "description": "", - "isOptional": true - } - ], - "value": "export interface SuccessIntentResponse {\n code?: 'ok';\n data?: {[key: string]: unknown};\n}" - }, - "ErrorIntentResponse": { - "filePath": "src/features/intents.ts", - "name": "ErrorIntentResponse", - "description": "Failed intent completion.", - "members": [ - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "'error'", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "issues", - "value": "Issue[]", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/intents.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "", - "isOptional": true - } - ], - "value": "export interface ErrorIntentResponse {\n code?: 'error';\n message?: string;\n issues?: StandardSchemaV1.Issue[];\n}" - } - } - } - ], - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Launch the article creation workflow in the Shopify admin. The merchant writes and publishes the article using the standard Shopify admin UI, and your app receives the result when the workflow completes.", - "codeblock": { - "title": "Create a new article", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Article');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Article created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing article for editing in the Shopify admin. Pass the article's GID (for example, `gid://shopify/Article/123456789`) as the value. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing article", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Article', {\n value: 'gid://shopify/Article/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Article updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the catalog creation workflow in the Shopify admin. The merchant completes the form using the standard Shopify admin UI, and your app receives the result when the workflow completes.", - "codeblock": { - "title": "Create a new catalog", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Catalog');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Catalog created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing catalog for editing in the Shopify admin. Pass the catalog's GID as the value. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing catalog", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Catalog', {\n value: 'gid://shopify/Catalog/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Catalog updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the collection creation workflow in the Shopify admin. The merchant completes the form using the standard Shopify admin UI, and your app receives the result when the workflow completes.", - "codeblock": { - "title": "Create a new collection", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Collection');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Collection created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing collection for editing in the Shopify admin. Pass the collection's GID as the value. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing collection", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Collection', {\n value: 'gid://shopify/Collection/987654321',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Collection updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the customer creation workflow in the Shopify admin. The merchant completes the form using the standard Shopify admin UI, and your app receives the result when the workflow completes.", - "codeblock": { - "title": "Create a new customer", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Customer');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Customer created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing customer for editing in the Shopify admin. Pass the customer's GID as the value. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing customer", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Customer', {\n value: 'gid://shopify/Customer/456789123',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Customer updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the discount creation workflow in the Shopify admin. You must specify the discount type in the `data` parameter. Valid types are `'amount-off-product'`, `'amount-off-order'`, `'buy-x-get-y'`, and `'free-shipping'`. Your app receives the result when the merchant completes the workflow.", - "codeblock": { - "title": "Create a new discount", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Discount', {\n data: {type: 'amount-off-product'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Discount created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing discount for editing in the Shopify admin. Pass the discount's GID as the value. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing discount", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Discount', {\n value: 'gid://shopify/Discount/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Discount updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - } - ] - }, - { - "title": "Location", - "examples": [ - { - "description": "Create a new location. Opens the location creation workflow.", - "codeblock": { - "title": "Create location", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Location');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Location created:', response.data);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Edit an existing location. Requires a location GID.", - "codeblock": { - "title": "Edit location", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Location', {\n value: 'gid://shopify/Location/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Location updated:', response.data);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Edit the default location.", - "codeblock": { - "title": "Edit location default", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:settings/LocationDefault');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Settings updated:', response.data);\n}\n", - "language": "js" - } - ] - } - } - ] - }, - { - "title": "Market", - "examples": [ - { - "description": "Launch the market creation workflow in the Shopify admin. The merchant completes the form using the standard Shopify admin UI, and your app receives the result when the workflow completes.", - "codeblock": { - "title": "Create a new market", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Market');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Market created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing market for editing in the Shopify admin. Pass the market's GID as the value. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing market", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Market', {\n value: 'gid://shopify/Market/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Market updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the menu creation workflow in the Shopify admin. The merchant completes the form using the standard Shopify admin UI, and your app receives the result when the workflow completes.", - "codeblock": { - "title": "Create a new menu", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Menu');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Menu created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing menu for editing in the Shopify admin. Pass the menu's GID as the value. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing menu", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Menu', {\n value: 'gid://shopify/Menu/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Menu updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the metafield definition creation workflow in the Shopify admin. You must specify the owner type in the `data` parameter (for example, `'product'`). Your app receives the result when the merchant completes the workflow.", - "codeblock": { - "title": "Create a new metafield definition", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke(\n 'create:shopify/MetafieldDefinition',\n {data: {ownerType: 'product'}},\n);\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metafield definition created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing metafield definition for editing in the Shopify admin. Pass the metafield definition's GID as the value and the owner type in the `data` parameter. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing metafield definition", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke(\n 'edit:shopify/MetafieldDefinition',\n {\n value: 'gid://shopify/MetafieldDefinition/123456789',\n data: {ownerType: 'product'},\n },\n);\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metafield definition updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the metaobject creation workflow in the Shopify admin. You must specify the metaobject type in the `data` parameter (for example, `'shopify--color-pattern'`). Your app receives the result when the merchant completes the workflow.", - "codeblock": { - "title": "Create a new metaobject", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Metaobject', {\n data: {type: 'shopify--color-pattern'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metaobject created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing metaobject for editing in the Shopify admin. Pass the metaobject's GID as the value and the metaobject type in the `data` parameter. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing metaobject", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Metaobject', {\n value: 'gid://shopify/Metaobject/123456789',\n data: {type: 'shopify--color-pattern'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metaobject updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the metaobject definition creation workflow in the Shopify admin. The merchant completes the form using the standard Shopify admin UI, and your app receives the result when the workflow completes.", - "codeblock": { - "title": "Create a new metaobject definition", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke(\n 'create:shopify/MetaobjectDefinition',\n);\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metaobject definition created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing metaobject definition for editing in the Shopify admin. Pass the metaobject definition type in the `data` parameter. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing metaobject definition", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke(\n 'edit:shopify/MetaobjectDefinition',\n {data: {type: 'my_metaobject_definition_type'}},\n);\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Metaobject definition updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the page creation workflow in the Shopify admin. The merchant completes the form using the standard Shopify admin UI, and your app receives the result when the workflow completes.", - "codeblock": { - "title": "Create a new page", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Page');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Page created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing page for editing in the Shopify admin. Pass the page's GID as the value. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing page", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Page', {\n value: 'gid://shopify/Page/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Page updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the product creation workflow in the Shopify admin. The merchant completes the form using the standard Shopify admin UI, and your app receives the result when the workflow completes.", - "codeblock": { - "title": "Create a new product", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/Product');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Product created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing product for editing in the Shopify admin. Pass the product's GID as the value. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing product", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/Product', {\n value: 'gid://shopify/Product/123456789',\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Product updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Launch the product variant creation workflow in the Shopify admin. You must specify the parent product's GID in the `data` parameter. Your app receives the result when the merchant completes the workflow.", - "codeblock": { - "title": "Create a new product variant", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('create:shopify/ProductVariant', {\n data: {productId: 'gid://shopify/Product/123456789'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Product variant created:', response.data);\n} else if (response.code === 'closed') {\n console.log('Creation cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an existing product variant for editing in the Shopify admin. Pass the variant's GID as the value and the parent product's GID in the `data` parameter. Your app receives the updated data when the merchant saves their changes.", - "codeblock": { - "title": "Edit an existing product variant", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:shopify/ProductVariant', {\n value: 'gid://shopify/ProductVariant/123456789',\n data: {productId: 'gid://shopify/Product/123456789'},\n});\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Product variant updated:', response.data);\n} else if (response.code === 'closed') {\n console.log('Edit cancelled by user');\n} else if (response.code === 'error') {\n console.log('Error:', response.message);\n}\n", - "language": "js" - } - ] - } - } - ] - }, - { - "title": "Settings", - "examples": [ - { - "description": "Invoke and edit store details.", - "codeblock": { - "title": "Edit store details", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:settings/StoreDetails');\n\nconst response = await activity.complete;\n\nif (response.code === 'closed') {\n console.log('Settings closed:', response.data);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Invoke and edit store defaults.", - "codeblock": { - "title": "Edit store defaults", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:settings/StoreDefaults');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Settings updated:', response.data);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Invoke and edit order ID format.", - "codeblock": { - "title": "Edit order ID format", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:settings/OrderIdFormat');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Settings updated:', response.data);\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Invoke and edit order processing.", - "codeblock": { - "title": "Edit order processing", - "tabs": [ - { - "code": "const activity = await shopify.intents.invoke('edit:settings/OrderProcessing');\n\nconst response = await activity.complete;\n\nif (response.code === 'ok') {\n console.log('Settings updated:', response.data);\n}\n", - "language": "js" - } - ] - } - } - ] - } - ] - }, - "related": [] - }, - { - "name": "Loading", - "overviewPreviewDescription": "Show a loading indicator during async operations", - "description": "The Loading API lets you display a loading indicator in the Shopify admin header. Use this to signal that a page is loading, data is being fetched, or an upload is processing. The indicator appears at the top of the admin and persists until you explicitly stop it.", - "isVisualComponent": true, - "category": "APIs", - "subCategory": "User interface and interactions", - "thumbnail": "/assets/templated-apis-screenshots/admin/apis/loading.png", - "related": [], - "defaultExample": { - "description": "Toggle loading state. This example starts the loading indicator before an async operation and stops it when complete.", - "codeblock": { - "title": "Toggle loading state", - "tabs": [ - { - "code": "shopify.loading(true);\n// ...\nshopify.loading(false);\n", - "language": "js" - } - ] - } - }, - "definitions": [ - { - "title": "Inputs", - "description": "The `loading` function controls the loading indicator in the Shopify admin header. The indicator persists until it's explicitly stopped.", - "type": "LoadingOptions", - "typeDefinitions": { - "LoadingOptions": { - "filePath": "src/features/loading.ts", - "name": "LoadingOptions", - "description": "The input parameter for the Loading API.", - "members": [ - { - "filePath": "src/features/loading.ts", - "syntaxKind": "PropertySignature", - "name": "isLoading", - "value": "boolean", - "description": "Pass `true` to show the loading indicator, `false` to hide it.", - "isOptional": true - } - ], - "value": "export interface LoadingOptions {\n /**\n * Pass `true` to show the loading indicator, `false` to hide it.\n */\n isLoading?: boolean;\n}" - } - } - } - ] - }, - { - "name": "Modal API", - "overviewPreviewDescription": "Display an overlay that requires merchant attention", - "description": "The Modal API lets you display an overlay that prevents interaction with the rest of the app until dismissed. Use modals for confirmations, forms, or important information that requires merchant acknowledgement before proceeding.", - "isVisualComponent": true, - "category": "APIs", - "related": [], - "subCategory": "User interface and interactions", - "thumbnail": "/assets/templated-apis-screenshots/admin/apis/modal.png", - "defaultExample": { - "description": "Show a modal. This example opens a modal using the `show` method with a unique modal ID. The modal remains visible until the merchant dismisses it or you call the `hide` method.", - "image": "/assets/templated-apis-screenshots/admin/apis/modal.png", - "codeblock": { - "title": "Show a modal", - "tabs": [ - { - "code": "<s-modal id=\"my-modal\">\n <s-text>Hello, World!</s-text>\n</s-modal>\n\n<s-button onclick=\"shopify.modal.show('my-modal')\">\n Open Modal\n</s-button>\n", - "language": "html" - } - ] - } - }, - "examples": { - "description": "Examples that demonstrate how to use the Modal API.", - "examples": [ - { - "description": "Hide a modal. This example closes an open modal using the `hide` method with the modal ID. Use this when you need to programmatically dismiss a modal after an action completes or when a condition is met.", - "codeblock": { - "title": "Hide a modal", - "tabs": [ - { - "code": "<s-modal id=\"my-modal\">\n <s-text>Hello, World!</s-text>\n <s-button onclick=\"shopify.modal.hide('my-modal')\">\n Close\n </s-button>\n</s-modal>\n\n<s-button onclick=\"shopify.modal.show('my-modal')\">\n Open Modal\n</s-button>\n", - "language": "html" - } - ] - } - }, - { - "description": "Toggle a modal. This example switches the modal visibility using the `toggle` method. If the modal is hidden it becomes visible, and if visible it becomes hidden. Use this for UI elements that open and close the same modal.", - "codeblock": { - "title": "Toggle a modal", - "tabs": [ - { - "code": "<s-modal id=\"my-modal\">\n <s-text>Hello, World!</s-text>\n</s-modal>\n\n<s-button onclick=\"shopify.modal.toggle('my-modal')\">\n Toggle Modal\n</s-button>\n", - "language": "html" - } - ] - } - } - ] - }, - "definitions": [ - { - "title": "Methods", - "description": "The `modal` function provides methods to control modal visibility by a component's ID. These methods work with the [`s-modal` component](/docs/api/app-home/polaris-web-components/overlays/modal) and are alternatives to calling instance methods directly on the element.", - "type": "_ModalApi", - "typeDefinitions": { - "_ModalApi": { - "filePath": "src/features/ui-modal.ts", - "name": "_ModalApi", - "description": "", - "members": [ - { - "filePath": "src/features/ui-modal.ts", - "syntaxKind": "MethodSignature", - "name": "hide", - "value": "(id: string) => Promise", - "description": "Hides the modal element. An alternative to the `hideOverlay` instance method on the `s-modal` component.", - "isOptional": true - }, - { - "filePath": "src/features/ui-modal.ts", - "syntaxKind": "MethodSignature", - "name": "show", - "value": "(id: string) => Promise", - "description": "Shows the modal element. An alternative to the `showOverlay` instance method on the `s-modal` component.", - "isOptional": true - }, - { - "filePath": "src/features/ui-modal.ts", - "syntaxKind": "MethodSignature", - "name": "toggle", - "value": "(id: string) => Promise", - "description": "Toggles the modal element visibility. An alternative to the `toggleOverlay` instance method on the `s-modal` component.", - "isOptional": true - } - ], - "value": "interface _ModalApi {\n /**\n * Shows the modal element. An alternative to the `showOverlay` instance method on the `s-modal` component.\n * @param id A unique identifier for the Modal\n */\n show?(id: string): Promise;\n /**\n * Hides the modal element. An alternative to the `hideOverlay` instance method on the `s-modal` component.\n * @param id A unique identifier for the Modal\n */\n hide?(id: string): Promise;\n /**\n * Toggles the modal element visibility. An alternative to the `toggleOverlay` instance method on the `s-modal` component.\n * @param id A unique identifier for the Modal\n */\n toggle?(id: string): Promise;\n}" - } - } - } - ] - }, - { - "name": "Navigation", - "overviewPreviewDescription": "Navigate within your app, to external URLs, or to Shopify admin pages", - "description": "The Navigation API lets you navigate within and outside of your app using the [HTML anchor element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a). You can also modify the top-level browser URL with or without navigating using the [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API) or the browser's native [Navigation API](https://developer.mozilla.org/en-US/docs/Web/API/Navigation_API).", - "isVisualComponent": false, - "defaultExample": { - "description": "Navigate to Shopify admin pages. This example uses the `shopify:` protocol to navigate to admin index pages (products, orders, customers) or directly to specific resources by appending the resource ID.", - "codeblock": { - "title": "Navigate to Shopify admin pages", - "tabs": [ - { - "code": "<!-- Index pages -->\n<a href=\"shopify://admin/products\" target=\"_top\">Products</a>\n<a href=\"shopify://admin/orders\" target=\"_top\">Orders</a>\n<a href=\"shopify://admin/customers\" target=\"_top\">Customers</a>\n\n<!-- Specific resources -->\n<a href=\"shopify://admin/products/123\" target=\"_top\">Product #123</a>\n<a href=\"shopify://admin/orders/456\" target=\"_top\">Order #456</a>\n<a href=\"shopify://admin/customers/789\" target=\"_top\">Customer #789</a>\n", - "language": "html" - } - ] - } - }, - "examples": { - "description": "Examples that demonstrate how to use the Navigation API.", - "examples": [ - { - "description": "Navigate to a relative path in your app. This example navigates to a route within your app using a relative path. Use anchor elements or `window.open()` with paths relative to your app root.", - "codeblock": { - "title": "Navigate to a relative path in your app", - "tabs": [ - { - "title": "HTML", - "code": "<a href=\"/settings\">Settings</a>\n", - "language": "html" - }, - { - "title": "JavaScript", - "code": "open('/settings', '_self');\n", - "language": "js" - } - ] - } - }, - { - "description": "Update the browser URL with the History API. This example uses `history.pushState()` and `history.replaceState()` to update the browser URL without triggering a page reload. Use `pushState` to add a new history entry, or `replaceState` to modify the current entry.", - "codeblock": { - "title": "Update the browser URL with the History API", - "tabs": [ - { - "title": "pushState", - "code": "history.pushState(null, '', '/settings');\n", - "language": "js" - }, - { - "title": "replaceState", - "code": "history.replaceState(null, '', '/settings');\n", - "language": "js" - } - ] - } - }, - { - "description": "Update the browser URL with the Navigation API. This example uses `navigation.navigate()` with history options to update the browser URL. The Navigation API provides a more modern alternative to the History API with better support for SPA routing.", - "codeblock": { - "title": "Update the browser URL with the Navigation API", - "tabs": [ - { - "title": "pushState", - "code": "navigation.navigate('/settings', {\n history: 'push',\n});\n", - "language": "js" - }, - { - "title": "replaceState", - "code": "navigation.navigate('/settings', {\n history: 'replace',\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an external URL in a new window. This example opens an external URL in a new browser tab or window using `target=\"_blank\"`. The Shopify admin remains open in the original tab.", - "codeblock": { - "title": "Open an external URL in a new window", - "tabs": [ - { - "title": "HTML", - "code": "<a href=\"https://example.com\" target=\"_blank\">Settings</a>\n", - "language": "html" - }, - { - "title": "JavaScript", - "code": "open('https://example.com', '_blank');\n", - "language": "js" - } - ] - } - }, - { - "description": "Open an external URL in the current window. This example navigates to an external URL in the current window using `target=\"_top\"`. The browser leaves the Shopify admin and loads the external page.", - "codeblock": { - "title": "Open an external URL in the current window", - "tabs": [ - { - "title": "HTML", - "code": "<a href=\"https://example.com\">Settings</a>\n", - "language": "html" - }, - { - "title": "JavaScript", - "code": "open('https://example.com', '_top');\n", - "language": "js" - } - ] - } - } - ] - }, - "definitions": [], - "category": "APIs", - "subCategory": "User interface and interactions", - "related": [] - }, - { - "name": "Picker", - "overviewPreviewDescription": "Let merchants search and select app-specific resources", - "description": "The Picker API lets merchants search for and select items from your app-specific data, such as product reviews, email templates, or subscription options. Use this API to build custom selection dialogs with your own data structure, badges, and thumbnails. The picker returns the IDs of selected items.\n\n> Tip:\n> If you need to pick Shopify products, variants, or collections, use the [Resource Picker](/docs/api/app-bridge-library/apis/resource-picker) API instead.", - "isVisualComponent": true, - "category": "APIs", - "subCategory": "User interface and interactions", - "thumbnail": "/assets/templated-apis-screenshots/admin/apis/picker.png", - "related": [], - "defaultExample": { - "description": "Select email templates. This example builds a custom picker for email templates with multiple columns and status badges. It defines column headers, populates items with searchable data fields, adds visual status indicators, and handles the selection promise. Use this pattern for app-specific resources like templates, product reviews, or subscription options.", - "image": "/assets/templated-apis-screenshots/admin/apis/picker.png", - "codeblock": { - "title": "Select email templates", - "tabs": [ - { - "code": "const picker = await shopify.picker({\n heading: 'Select a template',\n multiple: false,\n headers: [\n {content: 'Templates'},\n {content: 'Created by'},\n {content: 'Times used', type: 'number'},\n ],\n items: [\n {\n id: '1',\n heading: 'Full width, 1 column',\n data: ['Karine Ruby', '0'],\n badges: [{content: 'Draft', tone: 'info'}, {content: 'Marketing'}],\n },\n {\n id: '2',\n heading: 'Large graphic, 3 column',\n data: ['Charlie Mitchell', '5'],\n badges: [\n {content: 'Published', tone: 'success'},\n {content: 'New feature'},\n ],\n selected: true,\n },\n {\n id: '3',\n heading: 'Promo header, 2 column',\n data: ['Russell Winfield', '10'],\n badges: [{content: 'Published', tone: 'success'}],\n },\n ],\n});\n\nconst selected = await picker.selected;\n", - "language": "js" - } - ] - } - }, - "examples": { - "description": "Examples that demonstrate how to use the Picker API.", - "examples": [ - { - "description": "Limit selection count. This example limits selection to a maximum number of items by setting `multiple: 2` in the picker options. Use this when your feature has hard constraints, such as A/B test variants needing exactly two options, comparison views with fixed slots, or integration mappings that support a specific connection count.", - "codeblock": { - "title": "Limit selection count", - "tabs": [ - { - "code": "const picker = await shopify.picker({\n heading: 'Select up to 2 templates',\n multiple: 2,\n headers: [{content: 'Template'}],\n items: [\n {\n id: '1',\n heading: 'Welcome email',\n },\n {\n id: '2',\n heading: 'Order confirmation',\n },\n {\n id: '3',\n heading: 'Shipping notification',\n },\n ],\n});\n\nconst selected = await picker.selected;\n", - "language": "js" - } - ] - } - }, - { - "description": "Select unlimited items. This example allows unlimited selection by setting `multiple: true` without a numeric limit. Use this for bulk operations, mass notification sending, export tools, or tag management where selection quantity depends on merchant needs without artificial constraints.", - "codeblock": { - "title": "Select unlimited items", - "tabs": [ - { - "code": "const picker = await shopify.picker({\n heading: 'Select templates',\n multiple: true,\n headers: [{content: 'Template'}],\n items: [\n {\n id: '1',\n heading: 'Welcome email',\n },\n {\n id: '2',\n heading: 'Order confirmation',\n },\n {\n id: '3',\n heading: 'Shipping notification',\n },\n ],\n});\n\nconst selected = await picker.selected;\n", - "language": "js" - } - ] - } - }, - { - "description": "Preselect items. This example opens the picker with items already selected by setting `selected: true` on individual items. Use this for edit workflows where you need to show what resources are already associated with a configuration. Merchants can modify the selection before confirming.", - "codeblock": { - "title": "Preselect items", - "tabs": [ - { - "code": "const picker = await shopify.picker({\n heading: 'Select templates',\n items: [\n {\n id: '1',\n heading: 'Welcome email',\n selected: true,\n },\n {\n id: '2',\n heading: 'Order confirmation',\n },\n {\n id: '3',\n heading: 'Shipping notification',\n selected: true,\n },\n ],\n});\n\nconst selected = await picker.selected;\n", - "language": "js" - } - ] - } - }, - { - "description": "Disable specific items. This example disables specific picker items to prevent selection while keeping them visible for context. Set `disabled: true` on individual items to mark them as non-selectable. Use this for showing all available options while preventing selection of incompatible resources or deprecated features.", - "codeblock": { - "title": "Disable specific items", - "tabs": [ - { - "code": "const picker = await shopify.picker({\n heading: 'Select a template',\n items: [\n {\n id: '1',\n heading: 'Welcome email',\n disabled: true,\n },\n {\n id: '2',\n heading: 'Order confirmation',\n },\n {\n id: '3',\n heading: 'Shipping notification',\n },\n ],\n});\n\nconst selected = await picker.selected;\n", - "language": "js" - } - ] - } - }, - { - "description": "Use GraphQL data. This example populates the picker with data from the GraphQL Admin API. It fetches order data, maps results to picker items with badges showing fulfillment and payment status, and opens the picker with the returned data. Use this pattern for Shopify data not available through the Resource Picker API, such as orders, draft orders, or fulfillments.", - "codeblock": { - "title": "Use GraphQL data", - "tabs": [ - { - "code": "const response = await fetch('shopify:admin/api/graphql.json', {\n method: 'POST',\n body: JSON.stringify({\n query: `\n query GetOrders($first: Int!) {\n orders(first: $first) {\n edges {\n node {\n id\n name\n customer {\n displayName\n }\n originalTotalPriceSet {\n shopMoney {\n amount\n }\n }\n displayFulfillmentStatus\n displayFinancialStatus\n }\n }\n }\n }\n `,\n variables: {first: 10},\n }),\n});\n\nconst {data} = await response.json();\nconst orders = data.orders.edges;\n\nconst picker = await shopify.picker({\n heading: 'Select orders',\n multiple: true,\n headers: [\n {content: 'Order'},\n {content: 'Customer'},\n {content: 'Total', type: 'number'},\n ],\n items: orders.map(({node: order}) => ({\n id: order.id,\n heading: order.name,\n data: [order.customer.displayName, `$${order.originalTotalPriceSet.shopMoney.amount}`],\n badges: [\n {\n content: order.displayFulfillmentStatus,\n tone: order.displayFulfillmentStatus === 'FULFILLED' ? 'success' : 'warning',\n progress: order.displayFulfillmentStatus === 'FULFILLED' ? 'complete' : 'incomplete',\n },\n {\n content: order.displayFinancialStatus,\n tone: order.displayFinancialStatus === 'PAID' ? 'success' : 'warning',\n progress: order.displayFinancialStatus === 'PAID' ? 'complete' : 'incomplete',\n },\n ],\n })),\n});\n\nconst selected = await picker.selected;\n", - "language": "js" - } - ] - } - } - ] - }, - "definitions": [ - { - "title": "Inputs", - "description": "The `picker` function opens a custom selection dialog with your app-specific data. It accepts configuration options to define the picker's heading, items, headers, and selection behavior. It returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection.", - "type": "PickerOptions", - "typeDefinitions": { - "PickerOptions": { - "filePath": "src/types.ts", - "name": "PickerOptions", - "description": "The configuration options for the custom picker dialog. Define the picker's appearance, selection behavior, and data structure.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "headers", - "value": "Header[]", - "description": "The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "items", - "value": "PickerItem[]", - "description": "The list of items that merchants can select from. Each item appears as a row in the picker table." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).", - "isOptional": true, - "defaultValue": "false" - } - ], - "value": "export interface PickerOptions {\n /**\n * The heading displayed at the top of the picker modal. Use a clear, descriptive title that tells merchants what they're selecting.\n */\n heading: string;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `3` allows up to three items).\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * The column headers for the picker table. Define headers to label and organize the data columns displayed for each item. The header order determines the column layout.\n */\n headers?: Header[];\n /**\n * The list of items that merchants can select from. Each item appears as a row in the picker table.\n */\n items: PickerItem[];\n}" - }, - "Header": { - "filePath": "src/types.ts", - "name": "Header", - "description": "The configuration for a table column header in the picker. Each header creates a labeled column that displays corresponding data from items.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'string' | 'number'", - "description": "The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).", - "isOptional": true, - "defaultValue": "'string'" - } - ], - "value": "interface Header {\n /**\n * The label text displayed at the top of the table column. Use clear, concise labels that describe the data in that column (for example, \"Price\", \"Status\", \"Last Updated\").\n */\n content?: string;\n /**\n * The data type that controls column formatting and text alignment. Use `'number'` for currency, prices, or numeric values (displays right-aligned), or `'string'` for text content (displays left-aligned).\n * @defaultValue 'string'\n */\n type?: 'string' | 'number';\n}" - }, - "PickerItem": { - "filePath": "src/types.ts", - "name": "PickerItem", - "description": "An individual item that merchants can select in the picker. Each item appears as a row in the picker table.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "badges", - "value": "Badge[]", - "description": "Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "DataPoint[]", - "description": "Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out. Use this for items that are unavailable or don't meet selection criteria.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "heading", - "value": "string", - "description": "The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys)." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "boolean", - "description": "Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "thumbnail", - "value": "{ url: string; }", - "description": "A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.", - "isOptional": true - } - ], - "value": "export interface PickerItem {\n /**\n * The unique identifier for this item. This ID is returned in the selection array when the merchant selects this item. Use an ID that helps you identify the item in your system (for example, template IDs, review IDs, or custom option keys).\n */\n id: string;\n /**\n * The primary text displayed in the first column. This is typically the item's name or title and is the most prominent text in the row.\n */\n heading: string;\n /**\n * Additional data displayed in subsequent columns after the heading. Each value appears in its own column, and the order must match the `headers` array. For example, if headers are `[\"Price\", \"Status\"]`, then data would be `[19.99, \"Active\"]`.\n */\n data?: DataPoint[];\n /**\n * Whether the item can be selected. When `true`, the item is disabled and can't be selected. Disabled items appear grayed out. Use this for items that are unavailable or don't meet selection criteria.\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * Whether the item is preselected when the picker opens. When `true`, the item appears selected by default. Merchants can still deselect preselected items. Use this to show current selections or suggest default choices.\n */\n selected?: boolean;\n /**\n * Status or context badges displayed next to the heading in the first column. Use badges to highlight item state, completion status, or other important attributes (for example, \"Draft\", \"Published\", \"Incomplete\").\n */\n badges?: Badge[];\n /**\n * A small preview image or icon displayed at the start of the row. Thumbnails help merchants visually identify items at a glance. Provide a URL to the image file.\n */\n thumbnail?: {url: string};\n}" - }, - "Badge": { - "filePath": "src/types.ts", - "name": "Badge", - "description": "A badge displayed next to an item in the picker to show status or progress. Use badges to highlight important item attributes or states that affect selection decisions.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "content", - "value": "string", - "description": "The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\")." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "progress", - "value": "Progress", - "description": "The progress indicator for the badge. Use this to show completion status for items that have progress states.", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "Tone", - "description": "The visual tone indicating status or importance. Choose a tone that matches the badge's meaning.", - "isOptional": true - } - ], - "value": "interface Badge {\n /** The text content of the badge. Keep this short and descriptive (for example, \"Draft\", \"Active\", \"Incomplete\"). */\n content: string;\n /** The visual tone indicating status or importance. Choose a tone that matches the badge's meaning. */\n tone?: Tone;\n /** The progress indicator for the badge. Use this to show completion status for items that have progress states. */\n progress?: Progress;\n}" - }, - "Progress": { - "filePath": "src/types.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Progress", - "value": "'incomplete' | 'partiallyComplete' | 'complete'", - "description": "The progress state for picker badges showing completion status. Use this to indicate how complete an item is: `'incomplete'` for not started, `'partiallyComplete'` for in progress, or `'complete'` for finished." - }, - "Tone": { - "filePath": "src/types.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Tone", - "value": "'info' | 'success' | 'warning' | 'critical'", - "description": "The visual tone for picker badges indicating status or importance. Use different tones to communicate urgency or state: `'info'` for neutral information, `'success'` for positive states, `'warning'` for caution, or `'critical'` for urgent issues." - }, - "DataPoint": { - "filePath": "src/types.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DataPoint", - "value": "string | number | undefined", - "description": "A single data point that can appear in a picker table cell. Can be text, a number, or undefined if the cell should be empty." - } - } - }, - { - "title": "Return payload", - "description": "The picker returns a Promise that resolves to an object containing the `selected` property. Use this handle to await the merchant's selection result.", - "type": "PickerInstance", - "typeDefinitions": { - "PickerInstance": { - "filePath": "src/types.ts", - "name": "PickerInstance", - "description": "A handle returned when opening a picker dialog. Use this to access the merchant's selection after they confirm or cancel the picker.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "selected", - "value": "Promise", - "description": "A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.", - "isOptional": true - } - ], - "value": "export interface PickerInstance {\n /**\n * A Promise that resolves with an array of selected item IDs when the merchant presses the **Select** button, or `undefined` if they cancel. Await this Promise to handle the selection result.\n */\n selected?: Promise;\n}" - } - } - } - ] - }, - { - "name": "POS", - "overviewPreviewDescription": "Interact and retrieve data for the POS", - "description": "The POS API provides comprehensive access to Point of Sale data and cart operations, enabling apps to retrieve device and location information, manage the cart during a sale, apply discounts, and handle customer data. This API supports individual and bulk cart operations for efficient transaction management.\n\n> Tip:\n> We recommend using [POS UI extensions](/docs/api/pos-ui-extensions/) for your development needs as they provide a faster, more robust, and easier to use solution for merchants using apps on POS.\n ", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "Device and platform integration", - "thumbnail": "/assets/templated-apis-screenshots/admin/apis/pos.png", - "related": [], - "definitions": [ - { - "title": "Methods", - "description": "Retrieve cart data and perform actions.", - "type": "PosApi", - "typeDefinitions": { - "PosApi": { - "filePath": "src/features/pos.ts", - "name": "PosApi", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "cart", - "value": "PosCart", - "description": "Provides methods to read and modify the current POS cart, including line items, discounts, customers, and properties." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "close", - "value": "PosClose", - "description": "Closes the app and returns to the POS screen." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "device", - "value": "PosDevice", - "description": "Returns information about the POS device, including its name and serial number." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "location", - "value": "PosLocation", - "description": "Returns information about the current POS location, including its ID, name, address, and status." - } - ], - "value": "export interface PosApi {\n /**\n * Provides methods to read and modify the current POS cart, including line items, discounts, customers, and properties.\n */\n cart: PosCart;\n /**\n * Closes the app and returns to the POS screen.\n */\n close: PosClose;\n /**\n * Returns information about the POS device, including its name and serial number.\n */\n device: PosDevice;\n /**\n * Returns information about the current POS location, including its ID, name, address, and status.\n */\n location: PosLocation;\n}" - }, - "PosCart": { - "filePath": "src/features/pos.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PosCart", - "value": "Required<_PosCart>", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "addAddress", - "value": "(address: Address) => Promise", - "description": "Add a new address to a customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "addCartProperties", - "value": "(properties: Record) => Promise", - "description": "Add properties for the cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "addCustomSale", - "value": "(customSale: CustomSale) => Promise", - "description": "Add custom sale for the cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "addLineItem", - "value": "(variantId: number, quantity: number) => Promise", - "description": "Add a product to the cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "addLineItemProperties", - "value": "(uuid: string, properties: Record) => Promise", - "description": "Add properties to a line item.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "applyCartCodeDiscount", - "value": "(code: string) => Promise", - "description": "Apply a code discount to the whole cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "applyCartDiscount", - "value": "(type: DiscountType, discountDescription: string, amount: string) => Promise", - "description": "Apply a percentage or fixed amount discount to the whole cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "clear", - "value": "() => Promise", - "description": "Clear all contents from the cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "fetch", - "value": "() => Promise", - "description": "Fetch the current cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "removeAllDiscounts", - "value": "(disableAutomaticDiscounts: boolean) => Promise", - "description": "Clears all applied discounts from the cart and optionally disables automatic discounts.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "removeCartDiscount", - "value": "() => Promise", - "description": "Remove the discount applied to the whole cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "removeCartProperties", - "value": "(keys: string[]) => Promise", - "description": "Remove properties from the cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "removeCustomer", - "value": "() => Promise", - "description": "Remove the current customer from the cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "removeLineItem", - "value": "(uuid: string) => Promise", - "description": "Remove a line item in the cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "removeLineItemDiscount", - "value": "(uuid: string) => Promise", - "description": "Remove a discount from a line item.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "removeLineItemProperties", - "value": "(uuid: string, properties: string[]) => Promise", - "description": "Remove properties from a line item.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "setCustomer", - "value": "(customer: Customer) => Promise", - "description": "Add a new or existing customer to the cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "setLineItemDiscount", - "value": "(uuid: string, type: DiscountType, discountDescription: string, amount: string) => Promise", - "description": "Apply a discount to a line item.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(onSubscribe: CartSubscriber) => Unsubscribe", - "description": "Subscribe the cart changes.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "updateAddress", - "value": "(index: number, address: Address) => Promise", - "description": "Update an address for a customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "MethodSignature", - "name": "updateLineItem", - "value": "(uuid: string, quantity: number) => Promise", - "description": "Make changes to a line item in the cart.", - "isOptional": true - } - ] - }, - "Address": { - "filePath": "src/features/pos.ts", - "name": "Address", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "address1", - "value": "string", - "description": "The customer's primary address.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "address2", - "value": "string", - "description": "Any extra information associated with the address (Apartment #, Suite #, Unit #, etc.).", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "city", - "value": "string", - "description": "The name of the customer's city.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "company", - "value": "string", - "description": "The company name associated with address.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "country", - "value": "string", - "description": "The country of the address.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "countryCode", - "value": "string", - "description": "The Country Code in ISO 3166-1 (alpha-2) format.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "firstName", - "value": "string", - "description": "The first name of the customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "lastName", - "value": "string", - "description": "The last name of the customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "name", - "value": "string", - "description": "The name of the address.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "phone", - "value": "string", - "description": "The phone number of the customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "province", - "value": "string", - "description": "The province or state of the address.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "provinceCode", - "value": "string", - "description": "The acronym of the province or state.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "zip", - "value": "string", - "description": "The ZIP or postal code of the address.", - "isOptional": true - } - ], - "value": "interface Address {\n /**\n * The customer's primary address.\n */\n address1?: string;\n /**\n * Any extra information associated with the address (Apartment #, Suite #, Unit #, etc.).\n */\n address2?: string;\n /**\n * The name of the customer's city.\n */\n city?: string;\n /**\n * The company name associated with address.\n */\n company?: string;\n /**\n * The first name of the customer.\n */\n firstName?: string;\n /**\n * \tThe last name of the customer.\n */\n lastName?: string;\n /**\n * The phone number of the customer.\n */\n phone?: string;\n /**\n * The province or state of the address.\n */\n province?: string;\n /**\n * The country of the address.\n */\n country?: string;\n /**\n * The ZIP or postal code of the address.\n */\n zip?: string;\n /**\n * The name of the address.\n */\n name?: string;\n /**\n * The acronym of the province or state.\n */\n provinceCode?: string;\n /**\n * The Country Code in ISO 3166-1 (alpha-2) format.\n */\n countryCode?: string;\n}" - }, - "CustomSale": { - "filePath": "src/features/pos.ts", - "name": "CustomSale", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "number", - "description": "Price of line item" - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "quantity", - "value": "number", - "description": "Quantity of line item." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "If line item charges tax." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "Title of line item." - } - ], - "value": "interface CustomSale {\n /**\n * Price of line item\n */\n price: number;\n /**\n * Quantity of line item.\n */\n quantity: number;\n /**\n * Title of line item.\n */\n title: string;\n /**\n * If line item charges tax.\n */\n taxable: boolean;\n}" - }, - "DiscountType": { - "filePath": "src/features/pos.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DiscountType", - "value": "'Percentage' | 'FixedAmount'", - "description": "" - }, - "Cart": { - "filePath": "src/features/pos.ts", - "name": "Cart", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "cartDiscount", - "value": "Discount", - "description": "The current discount applied to the entire cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "cartDiscounts", - "value": "Discount[]", - "description": "All current discounts applied to the entire cart and line items.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "customer", - "value": "Customer", - "description": "The customer associated to the current cart.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "grandTotal", - "value": "string", - "description": "The total cost of the current cart, after taxes and discounts have been applied. Value is based on the shop's existing currency settings." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "lineItems", - "value": "LineItem[]", - "description": "A list of lineItem objects." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "properties", - "value": "Record", - "description": "A list of objects containing cart properties." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "subTotal", - "value": "string", - "description": "The total cost of the current cart including discounts, but before taxes and shipping. Value is based on the shop's existing currency settings." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "taxTotal", - "value": "string", - "description": "The sum of taxes for the current cart. Value is based on the shop's existing currency settings." - } - ], - "value": "interface Cart {\n /**\n * \tThe total cost of the current cart including discounts, but before taxes and shipping. Value is based on the shop's existing currency settings.\n */\n subTotal: string;\n /**\n * The sum of taxes for the current cart. Value is based on the shop's existing currency settings.\n */\n taxTotal: string;\n /**\n * The total cost of the current cart, after taxes and discounts have been applied. Value is based on the shop's existing currency settings.\n */\n grandTotal: string;\n /**\n * The current discount applied to the entire cart.\n */\n cartDiscount?: Discount;\n /**\n * All current discounts applied to the entire cart and line items.\n */\n cartDiscounts?: Discount[];\n /**\n * The customer associated to the current cart.\n */\n customer?: Customer;\n /**\n * A list of lineItem objects.\n */\n lineItems: LineItem[];\n /**\n * A list of objects containing cart properties.\n */\n properties: Record;\n}" - }, - "Discount": { - "filePath": "src/features/pos.ts", - "name": "Discount", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "amount", - "value": "number", - "description": "Amount of discount. Only for fixed or percentage discounts." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "discountDescription", - "value": "string", - "description": "Description of discount.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "DiscountType", - "description": "Type of discount." - } - ], - "value": "interface Discount {\n /**\n * Amount of discount. Only for fixed or percentage discounts.\n */\n amount: number;\n /**\n * Description of discount.\n */\n discountDescription?: string;\n /**\n * Type of discount.\n */\n type: DiscountType;\n}" - }, - "Customer": { - "filePath": "src/features/pos.ts", - "name": "Customer", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "email", - "value": "string", - "description": "The email for a new customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "firstName", - "value": "string", - "description": "The first name for new customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "number", - "description": "The ID of existing customer." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "lastName", - "value": "string", - "description": "The last name for new customer.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "note", - "value": "string", - "description": "The note for new customer.", - "isOptional": true - } - ], - "value": "interface Customer {\n /**\n * The ID of existing customer.\n */\n id: number;\n /**\n * The email for a new customer.\n */\n email?: string;\n /**\n * The first name for new customer.\n */\n firstName?: string;\n /**\n * The last name for new customer.\n */\n lastName?: string;\n /**\n * The note for new customer.\n */\n note?: string;\n}" - }, - "LineItem": { - "filePath": "src/features/pos.ts", - "name": "LineItem", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "discounts", - "value": "Discount[]", - "description": "Discount applied to line item." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "isGiftCard", - "value": "boolean", - "description": "If the line item is a gift card." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "number", - "description": "Price of line item", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "productId", - "value": "number", - "description": "Product identifier for line item.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "properties", - "value": "{ [key: string]: string; }", - "description": "Properties of the line item." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "quantity", - "value": "number", - "description": "Quantity of line item." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "Stock keeping unit of the line item.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "If line item charges tax." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "Title of line item.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "uuid", - "value": "string", - "description": "Unique id of line item" - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "variantId", - "value": "number", - "description": "Variant identifier for line item.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "vendor", - "value": "string", - "description": "Vendor of line item.", - "isOptional": true - } - ], - "value": "interface LineItem {\n /**\n * Unique id of line item\n */\n uuid: string;\n /**\n * Price of line item\n */\n price?: number;\n /**\n * Quantity of line item.\n */\n quantity: number;\n /**\n * Title of line item.\n */\n title?: string;\n /**\n * Variant identifier for line item.\n */\n variantId?: number;\n /**\n * Product identifier for line item.\n */\n productId?: number;\n /**\n * Discount applied to line item.\n */\n discounts: Discount[];\n /**\n * If line item charges tax.\n */\n taxable: boolean;\n /**\n * Stock keeping unit of the line item.\n */\n sku?: string;\n /**\n * Vendor of line item.\n */\n vendor?: string;\n /**\n * Properties of the line item.\n */\n properties: {[key: string]: string};\n /**\n * If the line item is a gift card.\n */\n isGiftCard: boolean;\n}" - }, - "CartSubscriber": { - "filePath": "src/features/pos.ts", - "name": "CartSubscriber", - "description": "Callback to execute when cart updates.", - "params": [ - { - "name": "cart", - "description": "", - "value": "Cart", - "filePath": "src/features/pos.ts" - } - ], - "returns": { - "filePath": "src/features/pos.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(cart: Cart) => void" - }, - "Unsubscribe": { - "filePath": "src/features/pos.ts", - "name": "Unsubscribe", - "description": "Callback to unsubscribe", - "params": [], - "returns": { - "filePath": "src/features/pos.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "() => void" - }, - "PosClose": { - "filePath": "src/features/pos.ts", - "name": "PosClose", - "description": "", - "params": [], - "returns": { - "filePath": "src/features/pos.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "() => Promise" - }, - "PosDevice": { - "filePath": "src/features/pos.ts", - "name": "PosDevice", - "description": "", - "params": [], - "returns": { - "filePath": "src/features/pos.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "() => Promise" - }, - "Device": { - "filePath": "src/features/pos.ts", - "name": "Device", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "name", - "value": "string", - "description": "The name of the device." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "serialNumber", - "value": "string", - "description": "The unique ID associated device ID and app ID.." - } - ], - "value": "interface Device {\n /**\n * The name of the device.\n */\n name: string;\n /**\n * The unique ID associated device ID and app ID..\n */\n serialNumber: string;\n}" - }, - "PosLocation": { - "filePath": "src/features/pos.ts", - "name": "PosLocation", - "description": "", - "params": [], - "returns": { - "filePath": "src/features/pos.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "() => Promise" - }, - "Location": { - "filePath": "src/features/pos.ts", - "name": "Location", - "description": "", - "members": [ - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "active", - "value": "boolean", - "description": "The status of current location." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "address1", - "value": "string", - "description": "The primary address of current location.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "address2", - "value": "string", - "description": "Any extra information associated with the address (Apartment #, Suite #, Unit #, etc.).", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "city", - "value": "string", - "description": "The name of the city.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "countryCode", - "value": "string", - "description": "The Country Code in ISO 3166-1 (alpha-2) format.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "countryName", - "value": "string", - "description": "The country of the address.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "number", - "description": "The ID of current location." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "locationType", - "value": "string", - "description": "The type of current location.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "name", - "value": "string", - "description": "The name of current location." - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "phone", - "value": "string", - "description": "The phone number of the location.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "province", - "value": "string", - "description": "TThe province or state of the address.", - "isOptional": true - }, - { - "filePath": "src/features/pos.ts", - "syntaxKind": "PropertySignature", - "name": "zip", - "value": "string", - "description": "The ZIP or postal code of the address.", - "isOptional": true - } - ], - "value": "interface Location {\n /**\n * The ID of current location.\n */\n id: number;\n /**\n * The status of current location.\n */\n active: boolean;\n /**\n * The name of current location.\n */\n name: string;\n /**\n * The type of current location.\n */\n locationType?: string;\n /**\n * The primary address of current location.\n */\n address1?: string;\n /**\n * Any extra information associated with the address (Apartment #, Suite #, Unit #, etc.).\n */\n address2?: string;\n /**\n * The ZIP or postal code of the address.\n */\n zip?: string;\n /**\n * The name of the city.\n */\n city?: string;\n /**\n * TThe province or state of the address.\n */\n province?: string;\n /**\n * The Country Code in ISO 3166-1 (alpha-2) format.\n */\n countryCode?: string;\n /**\n * The country of the address.\n */\n countryName?: string;\n /**\n * \tThe phone number of the location.\n */\n phone?: string;\n}" - } - } - } - ], - "defaultExample": { - "description": "Retrieve current cart data. This example fetches the cart object containing line items, customer, and totals.", - "codeblock": { - "title": "Get cart data", - "tabs": [ - { - "code": "await shopify.pos.cart.fetch();\n", - "language": "js" - } - ] - } - }, - "examples": { - "description": "Examples for retrieving and interacting with data on the POS.", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Listen for cart changes. This example subscribes to a callback that fires whenever the cart is updated.", - "codeblock": { - "title": "Subscribe to cart updates", - "tabs": [ - { - "code": "await shopify.pos.cart.subscribe((cart) => {\n console.log(cart);\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Reset the cart to an empty state. This example clears all items, customer, and discounts from the cart.", - "codeblock": { - "title": "Clear the cart", - "tabs": [ - { - "code": "await shopify.pos.cart.clear();\n", - "language": "js" - } - ] - } - }, - { - "description": "Manage products in the cart. This example adds a variant by ID, updates quantity using the line item UUID, and removes items.", - "codeblock": { - "title": "Add, update, or remove line items", - "tabs": [ - { - "title": "Add line item", - "code": "await shopify.pos.cart.addLineItem(40202439393345, 10);\n", - "language": "js" - }, - { - "title": "Update line item", - "code": "const cart = await shopify.pos.cart.fetch();\nconst lineItemUuid = cart.lineItems[0].uuid;\nawait shopify.pos.cart.updateLineItem(lineItemUuid, 4);\n", - "language": "js" - }, - { - "title": "Remove line item", - "code": "const cart = await shopify.pos.cart.fetch();\nconst lineItemUuid = cart.lineItems[0].uuid;\nawait shopify.pos.cart.removeLineItem(lineItemUuid);\n", - "language": "js" - } - ] - } - }, - { - "description": "Add items without a product variant. This example creates a custom sale with a price, quantity, title, and tax setting.", - "codeblock": { - "title": "Add a custom sale", - "tabs": [ - { - "title": "Add custom sale", - "code": "await shopify.pos.cart.addCustomSale({\n price: 10,\n quantity: 1,\n title: 'Custom sale',\n taxable: true,\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Apply discounts to specific items. This example sets a percentage or fixed discount on a line item using its UUID.", - "codeblock": { - "title": "Apply line item discounts", - "tabs": [ - { - "title": "Add line item discount", - "code": "const cart = await shopify.pos.cart.fetch();\nconst lineItemUuid = cart.lineItems[0].uuid;\nawait shopify.pos.cart.setLineItemDiscount(\n lineItemUuid,\n 'Percentage',\n 'Holiday sale',\n '0.5',\n);\n", - "language": "js" - }, - { - "title": "Remove line item discount", - "code": "const cart = await shopify.pos.cart.fetch();\nconst lineItemUuid = cart.lineItems[0].uuid;\nawait shopify.pos.cart.removeLineItemDiscount(lineItemUuid);\n", - "language": "js" - } - ] - } - }, - { - "description": "Attach custom metadata to items. This example adds and removes key-value properties on a line item.", - "codeblock": { - "title": "Set line item properties", - "tabs": [ - { - "title": "Add line item properties", - "code": "const cart = await shopify.pos.cart.fetch();\nconst lineItemUuid = cart.lineItems[0].uuid;\nawait shopify.pos.cart.addLineItemProperties(lineItemUuid, {\n referral: 'Shopify',\n employee: '472',\n});\n", - "language": "js" - }, - { - "title": "Remove line item properties", - "code": "const cart = await shopify.pos.cart.fetch();\nconst lineItemUuid = cart.lineItems[0].uuid;\nawait shopify.pos.cart.removeLineItemProperties(lineItemUuid, [\n 'referral',\n 'employee',\n]);\n", - "language": "js" - } - ] - } - }, - { - "description": "Associate a customer with the cart. This example sets a customer by email or ID, or removes an existing customer.", - "codeblock": { - "title": "Assign a customer", - "tabs": [ - { - "title": "Add a customer by email", - "code": "await shopify.pos.cart.setCustomer({\n email: 'foo@shopify.com',\n firstName: 'Jane',\n lastName: 'Doe',\n note: 'Customer note',\n});\n", - "language": "js" - }, - { - "title": "Add a customer by ID", - "code": "await shopify.pos.cart.setCustomer({\n id: 5945486803009,\n note: 'Customer note',\n});\n", - "language": "js" - }, - { - "title": "Remove customer", - "code": "await shopify.pos.cart.removeCustomer();\n", - "language": "js" - } - ] - } - }, - { - "description": "Manage customer addresses. This example adds a new address and updates an existing address by index.", - "codeblock": { - "title": "Add or update customer addresses", - "tabs": [ - { - "title": "Add a customer address", - "code": "await shopify.pos.cart.addAddress({\n address1: '123 Cherry St.',\n address2: 'Apt. 5',\n city: 'Toronto',\n company: 'Shopify',\n firstName: 'Foo',\n lastName: 'Bar',\n phone: '(613) 555-5555',\n province: 'Ontario',\n country: 'Canada',\n zip: 'M5V0G4',\n name: 'Shopify',\n provinceCode: 'M5V0G4',\n countryCode: '1',\n});\n", - "language": "js" - }, - { - "title": "Update customer address", - "code": "await shopify.pos.cart.updateAddress(0, {\n address1: '555 Apple St.',\n address2: 'Unit. 10',\n city: 'Vancouver',\n company: 'Shopify',\n firstName: 'Jane',\n lastName: 'Doe',\n phone: '(403) 555-5555',\n province: 'British Columbia',\n country: 'Canada',\n zip: 'M5V0G4',\n name: 'Shopify',\n provinceCode: 'M5V0G4',\n countryCode: '2',\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Apply discounts to the entire cart. This example adds fixed or percentage discounts, applies discount codes, and removes discounts.", - "codeblock": { - "title": "Apply cart discounts", - "tabs": [ - { - "title": "Add cart discount", - "code": "await shopify.pos.cart.applyCartDiscount('FixedAmount', 'Holiday sale', '10');\n", - "language": "js" - }, - { - "title": "Add discount code", - "code": "await shopify.pos.cart.applyCartCodeDiscount('HOLIDAY SALE');\n", - "language": "js" - }, - { - "title": "Remove cart discount", - "code": "await shopify.pos.cart.removeCartDiscount();\n", - "language": "js" - }, - { - "title": "Remove all discounts", - "code": "await shopify.pos.cart.removeAllDiscounts(true);\n", - "language": "js" - } - ] - } - }, - { - "description": "Attach custom metadata to the cart. This example adds and removes key-value properties on the cart object.", - "codeblock": { - "title": "Set cart properties", - "tabs": [ - { - "title": "Add cart properties", - "code": "await shopify.pos.cart.addCartProperties({\n referral: 'Shopify',\n employee: '472',\n});\n", - "language": "js" - }, - { - "title": "Remove cart properties", - "code": "await shopify.pos.cart.removeCartProperties(['referral', 'employee']);\n", - "language": "js" - } - ] - } - }, - { - "description": "Retrieve POS device information. This example gets the device name and serial number.", - "codeblock": { - "title": "Get device info", - "tabs": [ - { - "code": "await shopify.pos.device();\n", - "language": "js" - } - ] - } - }, - { - "description": "Retrieve POS location information. This example gets the location ID, name, and status.", - "codeblock": { - "title": "Get location info", - "tabs": [ - { - "code": "await shopify.pos.location();\n", - "language": "js" - } - ] - } - }, - { - "description": "Dismiss the app screen. This example programmatically closes the app and returns to POS.", - "codeblock": { - "title": "Close the app", - "tabs": [ - { - "code": "await shopify.pos.close();\n", - "language": "js" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Print", - "overviewPreviewDescription": "Print the current page from a mobile device", - "description": "Use the standard Window:print() method to print from your app.\n\nFor apps running on desktop devices, print() uses the browser's built-in print dialog without any App Bridge involvement.\n\nOn Shopify Mobile and Shopify POS devices, print() doesn't work natively inside the app's iframe, so App Bridge intercepts this method. You can call print() from your code as normal, and App Bridge communicates with the Shopify Mobile or Shopify POS app to handle printing.", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "Device and platform integration", - "related": [], - "defaultExample": { - "description": "Call print() to print the current page. On desktop, this opens the browser's print dialog. On Shopify Mobile and Shopify POS devices, App Bridge handles the request.", - "codeblock": { - "title": "Print the current page", - "tabs": [ - { - "code": "print();\n", - "language": "js" - } - ] - } - }, - "definitions": [], - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Trigger printing from a user action such as a button click. On mobile devices, App Bridge forwards the request to the Shopify Mobile or Shopify POS app. On desktop, the browser's built-in print dialog is used.", - "codeblock": { - "title": "Print from a button click", - "tabs": [ - { - "code": "const printButton = document.getElementById('print-button');\n\nprintButton.addEventListener('click', () => {\n print();\n});\n", - "language": "js" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "useAppBridge", - "overviewPreviewDescription": "Enables you to access the `shopify` global in your app.", - "description": "The `useAppBridge` hook returns the `shopify` global variable to use App Bridge APIs such as `toast` and `resourcePicker`.", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "React Hooks", - "requires": "[`@shopify/app-bridge-react@v4`](https://www.npmjs.com/package/@shopify/app-bridge-react) and the [`app-bridge.js` script tag](/docs/api/app-bridge-library#getting-started)", - "definitions": [ - { - "title": "useAppBridge hook", - "description": "The `useAppBridge` hook is available for use in your app. It returns the `shopify` global or a proxy when not in a browser environment.\n\nFor more information, see the [global variable section](/docs/api/app-bridge-library#shopify-global-variable) and the individual reference pages like [Toast](/docs/api/app-bridge-library/apis/toast) and [Resource Picker](/docs/api/app-bridge-library/apis/resource-picker).", - "type": "UseAppBridge", - "typeDefinitions": { - "UseAppBridge": { - "filePath": "src/shopify.ts", - "name": "UseAppBridge", - "description": "", - "members": [], - "value": "export interface UseAppBridge {}" - } - } - } - ], - "defaultExample": { - "codeblock": { - "title": "useAppBridge", - "tabs": [ - { - "code": "import {useAppBridge} from '@shopify/app-bridge-react';\n\nexport function GenerateBlogPostButton() {\n const shopify = useAppBridge();\n\n function generateBlogPost() {\n // Handle generating\n shopify.toast.show('Blog post template generated');\n }\n\n return <button onClick={generateBlogPost}>Generate Blog Post</button>;\n}\n", - "language": "jsx" - } - ] - } - }, - "related": [ - { - "name": "shopify global variable", - "subtitle": "API", - "url": "/docs/api/app-bridge-library#shopify-global-variable", - "type": "api" - } - ] - }, - { - "name": "Resource Picker", - "overviewPreviewDescription": "Let merchants search and select products, collections, or variants", - "description": "The Resource Picker API lets merchants search for and select products, collections, or product variants. Use this API when your app needs merchants to choose Shopify resources to work with. The resource picker returns detailed resource information including IDs, titles, images, and metadata.\n\n> Tip:\n> If you need to pick app-specific resources like product reviews, email templates, or subscription options, use the [Picker](/docs/api/app-bridge-library/apis/picker) API instead.", - "isVisualComponent": true, - "category": "APIs", - "subCategory": "User interface and interactions", - "thumbnail": "/assets/templated-apis-screenshots/admin/apis/resource-picker.png", - "related": [], - "defaultExample": { - "description": "Select products from the store catalog. This example opens a product resource picker and handles the selection response. The resource picker returns an array of product objects with GIDs, titles, and handles.", - "image": "/assets/templated-apis-screenshots/admin/apis/resource-picker.png", - "codeblock": { - "title": "Select products", - "tabs": [ - { - "code": "const selected = await shopify.resourcePicker({type: 'product'});\n", - "language": "js" - } - ] - } - }, - "examples": { - "description": "Examples that demonstrate how to use the Resource Picker API.", - "examples": [ - { - "description": "Select collections or variants. This example selects collections instead of individual products by setting `type: \"collection\"`, or selects specific product variants by setting `type: \"variant\"`. Use collection mode for choosing product groupings, such as homepage featured collection carousels, navigation menu builders, or promotional campaigns. Use variant mode for choosing individual SKUs, useful for inventory tools, variant-specific promotions, or shipment builders.", - "codeblock": { - "title": "Select collections or variants", - "tabs": [ - { - "title": "Collections", - "code": "const selected = await shopify.resourcePicker({type: 'collection'});\n", - "language": "js" - }, - { - "title": "Product variants", - "code": "const selected = await shopify.resourcePicker({type: 'variant'});\n", - "language": "js" - } - ] - } - }, - { - "description": "Preselect products. This example opens the resource picker with products already selected by passing GIDs to the `selectionIds` option. Use this to pre-populate the picker with current selections for edit workflows, showing what products are already in a bundle, collection, or promotional set. Merchants can see current selections and modify them before confirming.", - "codeblock": { - "title": "Preselect products", - "tabs": [ - { - "code": "const selected = await shopify.resourcePicker({\n type: 'product',\n selectionIds: [\n {\n id: 'gid://shopify/Product/12345',\n variants: [\n {\n id: 'gid://shopify/ProductVariant/1',\n },\n ],\n },\n {\n id: 'gid://shopify/Product/67890',\n },\n ],\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Set action verb. This example customizes the resource picker button text by setting the `action` option to \"add\" or \"select\". \"Add\" suggests appending to an existing list, while \"select\" implies choosing for a specific purpose or replacing selections. This subtle language difference improves clarity for different workflow contexts.", - "codeblock": { - "title": "Set action verb", - "tabs": [ - { - "code": "const selected = await shopify.resourcePicker({\n type: 'product',\n action: 'select',\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Limit selection count. This example controls how many products merchants can select. Set `multiple: true` for unlimited selection useful for mass product taggers, bulk inventory tools, or export utilities. Set `multiple` to a number like `5` to limit selection count for bundle builders with item limits, featured product sections, or promotional campaigns with maximum product counts.", - "codeblock": { - "title": "Limit selection count", - "tabs": [ - { - "title": "Unlimited selectable items", - "code": "const selected = await shopify.resourcePicker({\n type: 'product',\n multiple: true,\n});\n", - "language": "js" - }, - { - "title": "Maximum selectable items", - "code": "const selected = await shopify.resourcePicker({\n type: 'product',\n multiple: 5,\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Filter resources. This example filters the resource picker to show only specific products using the `filter` option. Use `variants: false` to hide variant information, `hidden: false` to exclude hidden products, `draft: false` to exclude draft products, or `archived: false` to exclude archived products. Combine filters to restrict the picker to live, customer-visible products.", - "codeblock": { - "title": "Filter resources", - "tabs": [ - { - "code": "const selected = await shopify.resourcePicker({\n type: 'product',\n filter: {\n hidden: true,\n variants: false,\n draft: false,\n archived: false,\n },\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Apply a filter query. This example applies a custom GraphQL search query using the `query` property in filters. The query runs server-side and is not visible to merchants. Use it to programmatically restrict results (for example, `vendor:Acme` or `tag:sale`) without exposing the filter logic.", - "codeblock": { - "title": "Apply a filter query", - "tabs": [ - { - "code": "const selected = await shopify.resourcePicker({\n type: 'product',\n filter: {\n query: 'Sweater',\n },\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Handle selection payload. This example handles the selection payload returned by the resource picker. When merchants confirm their selection, the picker returns an array of resource objects. When merchants cancel, it returns `undefined` rather than an empty array. Check for `undefined` explicitly to distinguish between cancellation and an empty selection.", - "codeblock": { - "title": "Handle selection payload", - "tabs": [ - { - "code": "const selected = await shopify.resourcePicker({type: 'product'});\n\nif (selected) {\n console.log(selected);\n} else {\n console.log('Picker was cancelled by the user');\n}\n", - "language": "js" - } - ] - } - }, - { - "description": "Start with search query. This example starts the resource picker with a pre-filled search query by passing the `query` option. This initializes the picker with a search term already entered, helpful when you know what merchants are likely looking for. Merchants can modify the query, but starting with relevant results saves time in large catalogs.", - "codeblock": { - "title": "Start with search query", - "tabs": [ - { - "code": "const selected = await shopify.resourcePicker({\n type: 'product',\n query: 'Sweater',\n});\n", - "language": "js" - } - ] - } - } - ] - }, - "definitions": [ - { - "title": "Inputs", - "description": "The `ResourcePickerOptions` object defines how the resource picker behaves, including which resource type to display, selection limits, filters, and preselected items.", - "type": "ResourcePickerOptions", - "typeDefinitions": { - "ResourcePickerOptions": { - "filePath": "src/features/resource-picker.ts", - "name": "ResourcePickerOptions", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "'add' | 'select'", - "description": "The action verb that appears in the title as the primary action of the resource picker. \"Add\" prompts merchants that they are appending to an existing list, while \"select\" they'll choose a resource for a specific purpose or replacing selections.", - "isOptional": true, - "defaultValue": "'add'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "filter", - "value": "Filters", - "description": "Filtering options that control which resources appear in the resourcepicker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "multiple", - "value": "boolean | number", - "description": "Whether to allow selecting multiple items of a specific type. If a number is provided, limit selections to that maximum. When `type` is `'product'`, merchants can still select multiple variants from a single product even when `multiple` is `false`.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "Initial GraphQL search query for filtering resources available in the resource picker. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for more information. This is displayed in the search bar when the picker is opened and can be edited by users. For most use cases, you should use the `filter.query` option instead which doesn't show the query in the UI.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectionIds", - "value": "BaseResource[]", - "description": "Resources that should be preselected when the picker is opened. Use this for edit workflows to show what products are already in a bundle, collection, or promotional set. Merchants can see current selections and modify them before confirming.", - "isOptional": true, - "defaultValue": "[]" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "ResourceType", - "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." - } - ], - "value": "export interface ResourcePickerOptions<\n ResourceType extends keyof ResourceTypes = keyof ResourceTypes,\n> {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: ResourceType;\n /**\n * The action verb that appears in the title as the primary action of the resource picker. \"Add\" prompts merchants that they are appending to an existing list, while \"select\" they'll choose a resource for a specific purpose or replacing selections.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the resourcepicker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * Whether to allow selecting multiple items of a specific type. If a number is provided, limit selections to that maximum. When `type` is `'product'`, merchants can still select multiple variants from a single product even when `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * Initial GraphQL search query for filtering resources available in the resource picker. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for more information.\n * This is displayed in the search bar when the picker is opened and can be edited by users.\n * For most use cases, you should use the `filter.query` option instead which doesn't show the query in the UI.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker is opened. Use this for edit workflows to show what products are already in a bundle, collection, or promotional set. Merchants can see current selections and modify them before confirming.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" - }, - "Filters": { - "filePath": "src/features/resource-picker.ts", - "name": "Filters", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "archived", - "value": "boolean | undefined", - "description": "Whether to show [archived products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability). Only applies to the Product resource type picker. Setting this to undefined will show a badge on draft products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "draft", - "value": "boolean | undefined", - "description": "Whether to show [draft products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability). Only applies to the Product resource type picker. Setting this to undefined will show a badge on draft products.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hidden", - "value": "boolean", - "description": "Whether to show hidden resources, referring to products that are not published on any sales channels.", - "isOptional": true, - "defaultValue": "true" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "string", - "description": "GraphQL initial search query for filtering resources available in the picker. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for more information. This query is not visible to merchants and runs server-side. Use it to programmatically restrict results (for example, `vendor:Acme`) without exposing the filter logic.", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "boolean", - "description": "Whether to show product variants. Only applies to the Product resource type picker.", - "isOptional": true, - "defaultValue": "true" - } - ], - "value": "interface Filters {\n /**\n * Whether to show hidden resources, referring to products that are not published on any sales channels.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants. Only applies to the Product resource type picker.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to show [draft products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability).\n * Only applies to the Product resource type picker.\n * Setting this to undefined will show a badge on draft products.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to show [archived products](https://help.shopify.com/en/manual/products/details?shpxid=70af7d87-E0F2-4973-8B09-B972AAF0ADFD#product-availability).\n * Only applies to the Product resource type picker.\n * Setting this to undefined will show a badge on draft products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * GraphQL initial search query for filtering resources available in the picker.\n * See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for more information.\n * This query is not visible to merchants and runs server-side. Use it to programmatically restrict results (for example, `vendor:Acme`) without exposing the filter logic.\n */\n query?: string;\n}" - }, - "BaseResource": { - "filePath": "src/features/resource-picker.ts", - "name": "BaseResource", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Resource[]", - "description": "", - "isOptional": true - } - ], - "value": "interface BaseResource extends Resource {\n variants?: Resource[];\n}" - }, - "Resource": { - "filePath": "src/features/resource-picker.ts", - "name": "Resource", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - } - ], - "value": "interface Resource {\n /** in GraphQL id format, ie 'gid://shopify/Product/1' */\n id: string;\n}" - } - } - }, - { - "title": "Return payload", - "description": "The resource picker returns an array of selected resources when the merchant confirms their selection, or `undefined` if they cancel. The resource structure in the array varies based on the `type` option: products include variants and images, collections include rule sets, and variants include pricing and inventory data.", - "type": "ReturnPayload", - "typeDefinitions": { - "ReturnPayload": { - "filePath": "src/features/resource-picker.ts", - "name": "ReturnPayload", - "description": "The resource picker returns an array of selected resources when the merchant confirms their selection, or `undefined` if they cancel. The resource structure in the array varies based on the `type` option: products include variants and images, collections include rule sets, and variants include pricing and inventory data.", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "when type is \"collection\":", - "value": "Collection[]", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "when type is \"product\":", - "value": "Product[]", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "when type is \"variant\":", - "value": "ProductVariant[]", - "description": "", - "isOptional": true - } - ], - "value": "interface ReturnPayload {\n ['when type is \"product\":']?: Product[];\n ['when type is \"variant\":']?: ProductVariant[];\n ['when type is \"collection\":']?: Collection[];\n}" - }, - "Collection": { - "filePath": "src/features/resource-picker.ts", - "name": "Collection", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "availablePublicationCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "descriptionHtml", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "Image | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productsAutomaticallySortedCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productsCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productsManuallySortedCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "publicationCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "ruleSet", - "value": "RuleSet | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "seo", - "value": "{ description?: string; title?: string; }", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "sortOrder", - "value": "CollectionSortOrder", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "storefrontId", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "templateSuffix", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "updatedAt", - "value": "string", - "description": "" - } - ], - "value": "export interface Collection extends Resource {\n availablePublicationCount: number;\n description: string;\n descriptionHtml: string;\n handle: string;\n id: string;\n image?: Image | null;\n productsAutomaticallySortedCount: number;\n productsCount: number;\n productsManuallySortedCount: number;\n publicationCount: number;\n ruleSet?: RuleSet | null;\n seo: {\n description?: string | null;\n title?: string | null;\n };\n sortOrder: CollectionSortOrder;\n storefrontId: string;\n templateSuffix?: string | null;\n title: string;\n updatedAt: string;\n}" - }, - "Image": { - "filePath": "src/features/resource-picker.ts", - "name": "Image", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "altText", - "value": "string", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "originalSrc", - "value": "string", - "description": "" - } - ], - "value": "interface Image {\n id: string;\n altText?: string;\n originalSrc: string;\n}" - }, - "RuleSet": { - "filePath": "src/features/resource-picker.ts", - "name": "RuleSet", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "appliedDisjunctively", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "rules", - "value": "CollectionRule[]", - "description": "" - } - ], - "value": "interface RuleSet {\n appliedDisjunctively: boolean;\n rules: CollectionRule[];\n}" - }, - "CollectionRule": { - "filePath": "src/features/resource-picker.ts", - "name": "CollectionRule", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "column", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "condition", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "relation", - "value": "string", - "description": "" - } - ], - "value": "interface CollectionRule {\n column: string;\n condition: string;\n relation: string;\n}" - }, - "CollectionSortOrder": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "CollectionSortOrder", - "value": "enum CollectionSortOrder {\n Manual = 'MANUAL',\n BestSelling = 'BEST_SELLING',\n AlphaAsc = 'ALPHA_ASC',\n AlphaDesc = 'ALPHA_DESC',\n PriceDesc = 'PRICE_DESC',\n PriceAsc = 'PRICE_ASC',\n CreatedDesc = 'CREATED_DESC',\n Created = 'CREATED',\n MostRelevant = 'MOST_RELEVANT',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Manual", - "value": "MANUAL" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "BestSelling", - "value": "BEST_SELLING" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "AlphaAsc", - "value": "ALPHA_ASC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "AlphaDesc", - "value": "ALPHA_DESC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "PriceDesc", - "value": "PRICE_DESC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "PriceAsc", - "value": "PRICE_ASC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "CreatedDesc", - "value": "CREATED_DESC" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Created", - "value": "CREATED" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "MostRelevant", - "value": "MOST_RELEVANT" - } - ] - }, - "Product": { - "filePath": "src/features/resource-picker.ts", - "name": "Product", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "availablePublicationCount", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "createdAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "descriptionHtml", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "hasOnlyDefaultVariant", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "images", - "value": "Image[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "options", - "value": "{ id: string; name: string; position: number; values: string[]; }[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "productType", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "publishedAt", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "status", - "value": "ProductStatus", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "tags", - "value": "string[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "templateSuffix", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "totalInventory", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "totalVariants", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "tracksInventory", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "updatedAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "variants", - "value": "Partial[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "vendor", - "value": "string", - "description": "" - } - ], - "value": "export interface Product extends Resource {\n availablePublicationCount: number;\n createdAt: string;\n descriptionHtml: string;\n handle: string;\n hasOnlyDefaultVariant: boolean;\n images: Image[];\n options: {\n id: string;\n name: string;\n position: number;\n values: string[];\n }[];\n productType: string;\n publishedAt?: string | null;\n tags: string[];\n templateSuffix?: string | null;\n title: string;\n totalInventory: number;\n totalVariants: number;\n tracksInventory: boolean;\n variants: Partial[];\n vendor: string;\n updatedAt: string;\n status: ProductStatus;\n}" - }, - "ProductStatus": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "ProductStatus", - "value": "enum ProductStatus {\n Active = 'ACTIVE',\n Archived = 'ARCHIVED',\n Draft = 'DRAFT',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Active", - "value": "ACTIVE" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Archived", - "value": "ARCHIVED" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Draft", - "value": "DRAFT" - } - ] - }, - "ProductVariant": { - "filePath": "src/features/resource-picker.ts", - "name": "ProductVariant", - "description": "", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "availableForSale", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "barcode", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "compareAtPrice", - "value": "Money | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "createdAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "displayName", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "fulfillmentService", - "value": "{ id: string; inventoryManagement: boolean; productBased: boolean; serviceName: string; type: FulfillmentServiceType; }", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "in GraphQL id format, ie 'gid://shopify/Product/1'" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "Image | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryItem", - "value": "{ id: string; }", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryManagement", - "value": "ProductVariantInventoryManagement", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryPolicy", - "value": "ProductVariantInventoryPolicy", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "inventoryQuantity", - "value": "number | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "position", - "value": "number", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "price", - "value": "Money", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "product", - "value": "Partial", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "requiresShipping", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "{ value?: string; }[]", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "taxable", - "value": "boolean", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "updatedAt", - "value": "string", - "description": "" - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "weight", - "value": "number | null", - "description": "", - "isOptional": true - }, - { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "PropertySignature", - "name": "weightUnit", - "value": "WeightUnit", - "description": "" - } - ], - "value": "export interface ProductVariant extends Resource {\n availableForSale: boolean;\n barcode?: string | null;\n compareAtPrice?: Money | null;\n createdAt: string;\n displayName: string;\n fulfillmentService?: {\n id: string;\n inventoryManagement: boolean;\n productBased: boolean;\n serviceName: string;\n type: FulfillmentServiceType;\n };\n image?: Image | null;\n inventoryItem: { id: string };\n inventoryManagement: ProductVariantInventoryManagement;\n inventoryPolicy: ProductVariantInventoryPolicy;\n inventoryQuantity?: number | null;\n position: number;\n price: Money;\n product: Partial;\n requiresShipping: boolean;\n selectedOptions: { value?: string | null }[];\n sku?: string | null;\n taxable: boolean;\n title: string;\n weight?: number | null;\n weightUnit: WeightUnit;\n updatedAt: string;\n}" - }, - "Money": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "Money", - "value": "string", - "description": "" - }, - "FulfillmentServiceType": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "FulfillmentServiceType", - "value": "enum FulfillmentServiceType {\n GiftCard = 'GIFT_CARD',\n Manual = 'MANUAL',\n ThirdParty = 'THIRD_PARTY',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "GiftCard", - "value": "GIFT_CARD" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Manual", - "value": "MANUAL" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "ThirdParty", - "value": "THIRD_PARTY" - } - ] - }, - "ProductVariantInventoryManagement": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "ProductVariantInventoryManagement", - "value": "enum ProductVariantInventoryManagement {\n Shopify = 'SHOPIFY',\n NotManaged = 'NOT_MANAGED',\n FulfillmentService = 'FULFILLMENT_SERVICE',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Shopify", - "value": "SHOPIFY" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "NotManaged", - "value": "NOT_MANAGED" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "FulfillmentService", - "value": "FULFILLMENT_SERVICE" - } - ] - }, - "ProductVariantInventoryPolicy": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "ProductVariantInventoryPolicy", - "value": "enum ProductVariantInventoryPolicy {\n Deny = 'DENY',\n Continue = 'CONTINUE',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Deny", - "value": "DENY" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Continue", - "value": "CONTINUE" - } - ] - }, - "WeightUnit": { - "filePath": "src/features/resource-picker.ts", - "syntaxKind": "EnumDeclaration", - "name": "WeightUnit", - "value": "enum WeightUnit {\n Kilograms = 'KILOGRAMS',\n Grams = 'GRAMS',\n Pounds = 'POUNDS',\n Ounces = 'OUNCES',\n}", - "members": [ - { - "filePath": "src/features/resource-picker.ts", - "name": "Kilograms", - "value": "KILOGRAMS" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Grams", - "value": "GRAMS" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Pounds", - "value": "POUNDS" - }, - { - "filePath": "src/features/resource-picker.ts", - "name": "Ounces", - "value": "OUNCES" - } - ] - } - } - } - ] - }, - { - "name": "Reviews", - "overviewPreviewDescription": "Request an app review modal in the Shopify admin", - "description": "The Reviews API lets you request an app review modal overlaid on your app in the Shopify admin. You control when to request the modal, but it only displays if [certain conditions](#rate-limits-restrictions) are met. Use this API to prompt merchants for feedback at the right moment in your app workflow.\n\nIt's better to request a review at the end of a successful workflow than when a merchant first opens your app, or at any point that interrupts their task. Don't trigger a request with a merchant action, as rate-limiting might prevent the modal from displaying, making your app appear to be broken.\n\nYou can use your development store to test the Reviews API, which bypasses the rate limits and restrictions. Reviews submitted from development stores are not published on the Shopify App Store.", - "isVisualComponent": true, - "category": "APIs", - "subCategory": "User interface and interactions", - "thumbnail": "/assets/templated-apis-screenshots/admin/apis/reviews.png", - "related": [], - "definitions": [ - { - "title": "Methods", - "description": "The `reviews` object provides methods for requesting app review modals from merchants.", - "type": "ReviewsApi", - "typeDefinitions": { - "ReviewsApi": { - "filePath": "src/features/reviews.ts", - "name": "ReviewsApi", - "description": "The Reviews API for requesting app review modals.", - "members": [ - { - "filePath": "src/features/reviews.ts", - "syntaxKind": "MethodSignature", - "name": "request", - "value": "() => Promise", - "description": "Requests an app review modal. The modal only displays if [rate limits and eligibility conditions](#rate-limits-restrictions) are met. Returns a Promise that resolves to a response object with `success`, `code`, and `message` properties indicating whether the modal was shown and, if not, the reason why." - } - ], - "value": "export interface ReviewsApi {\n /**\n * Requests an app review modal. The modal only displays if [rate limits and eligibility conditions](#rate-limits-restrictions) are met. Returns a Promise that resolves to a response object with `success`, `code`, and `message` properties indicating whether the modal was shown and, if not, the reason why.\n */\n request(): Promise;\n}" - }, - "ReviewRequestResponse": { - "filePath": "src/types.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ReviewRequestResponse", - "value": "ReviewRequestSuccessResponse | ReviewRequestDeclinedResponse", - "description": "The response from a review request. Either a success response when the modal was displayed, or a declined response with a code and message explaining why it was not." - }, - "ReviewRequestSuccessResponse": { - "filePath": "src/types.ts", - "name": "ReviewRequestSuccessResponse", - "description": "The response returned when the review modal is successfully displayed to the merchant.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "'success'", - "description": "The response code. Always `'success'` for a successful request." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "'Review modal shown successfully'", - "description": "A human-readable message confirming the modal was shown." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "success", - "value": "true", - "description": "Indicates the review modal was successfully displayed." - } - ], - "value": "export interface ReviewRequestSuccessResponse {\n /**\n * Indicates the review modal was successfully displayed.\n */\n success: true;\n /**\n * The response code. Always `'success'` for a successful request.\n */\n code: 'success';\n /**\n * A human-readable message confirming the modal was shown.\n */\n message: 'Review modal shown successfully';\n}" - }, - "ReviewRequestDeclinedResponse": { - "filePath": "src/types.ts", - "name": "ReviewRequestDeclinedResponse", - "description": "The response returned when the review modal could not be displayed, including the reason why.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "ReviewRequestDeclinedCode", - "description": "A code identifying why the modal was not displayed, such as rate limits or merchant eligibility." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A human-readable message explaining why the modal was not displayed." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "success", - "value": "false", - "description": "Indicates the review modal was not displayed." - } - ], - "value": "export interface ReviewRequestDeclinedResponse {\n /**\n * Indicates the review modal was not displayed.\n */\n success: false;\n /**\n * A code identifying why the modal was not displayed, such as rate limits or merchant eligibility.\n */\n code: ReviewRequestDeclinedCode;\n /**\n * A human-readable message explaining why the modal was not displayed.\n */\n message: string;\n}" - }, - "ReviewRequestDeclinedCode": { - "filePath": "src/types.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ReviewRequestDeclinedCode", - "value": "'mobile-app' | 'already-reviewed' | 'annual-limit-reached' | 'cooldown-period' | 'merchant-ineligible' | 'recently-installed' | 'already-open' | 'open-in-progress' | 'cancelled'", - "description": "A string code indicating why the review modal was not displayed." - } - } - } - ], - "subSections": [ - { - "anchorLink": "responses", - "title": "Response codes and messages", - "type": "Generic", - "sectionContent": "\n\nA successful request to the Reviews API has a single response code:\n- `success`: `true`\n- `code`: `success`\n- `message`: Review modal displayed\n\nIf a request is unsuccessful (`success` is false), the response includes a `code` and `message` explaining why the modal was not displayed, such as rate limits or merchant eligibility.\n\n- `already-open`: Review modal is already open\n- `already-reviewed`: Merchant already reviewed this app\n- `annual-limit-reached`: Review modal already displayed the maximum number of times within the last 365 days\n- `cancelled`: Review modal opening was cancelled\n- `cooldown-period`: Review modal already displayed within the last 60 days\n- `merchant-ineligible`: Merchant isn't eligible to review this app\n- `mobile-app`: Review modal not supported on mobile devices\n- `open-in-progress`: Review modal opening is already in progress\n- `recently-installed`: Merchant installed this app for less than 24 hours\n " - }, - { - "anchorLink": "rate-limits-restrictions", - "title": "Rate limits and restrictions", - "type": "Generic", - "sectionContent": "\nA review modal will only be displayed to the merchant if certain conditions are met. For each condition below, the [corresponding error `code`](#responses) is listed as a reference.\n\n### Rate limits\nThe Reviews API applies rate limits to ensure a good merchant experience and to prevent abuse. A review modal is only displayed to a merchant:\n- Once within any 60-day period (`cooldown-period`).\n- Three times within any 365-day period (`annual-limit-reached`).\n\n### Restrictions\nA review modal is never displayed in the following cases:\n- The merchant already reviewed your app (`already-reviewed`).\n- The merchant is on a mobile device (`mobile-app`).\n- The merchant is ineligible to leave a review (`merchant-ineligible`).\n- The merchant has installed your app for less than 24 hours (`recently-installed`).\n " - } - ], - "defaultExample": { - "description": "Request a review modal. This example calls the `request()` method and handles the response. If `success` is false, the response includes a `code` and `message` explaining why the modal was not displayed, such as rate limits or merchant eligibility.", - "image": "/assets/templated-apis-screenshots/admin/apis/reviews.png", - "codeblock": { - "title": "Request a review modal", - "tabs": [ - { - "code": "try {\n const result = await shopify.reviews.request();\n if (!result.success) {\n console.log(`Review modal not displayed. Reason: ${result.code}: ${result.message}`);\n }\n} catch (error) {\n console.error('Error requesting review:', error);\n}\n", - "language": "js" - } - ] - } - } - }, - { - "name": "Save bar", - "overviewPreviewDescription": "Indicate unsaved changes and prompt merchants to save or discard", - "description": "The Save Bar API indicates that a form on the current page has unsaved information. You can implement save bar behavior in two ways:\n\n1. **Form attribute**: Add the `data-save-bar` attribute to a [`form` element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/form). The save bar displays automatically when there are unsaved changes. The [`submit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) event fires when the Save button is pressed, and the [`reset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event) event fires when the Discard button is pressed.\n\n2. **Programmatic control**: Use `shopify.saveBar` methods (`show()`, `hide()`, `toggle()`, `leaveConfirmation()`) to control the save bar based on your application state.", - "isVisualComponent": true, - "thumbnail": "/assets/templated-apis-screenshots/admin/apis/contextual-save-bar.png", - "category": "APIs", - "subCategory": "User interface and interactions", - "related": [], - "defaultExample": { - "description": "Display a save bar. This example adds the `data-save-bar` attribute to a form element. When the form has unsaved changes, the save bar appears automatically.", - "image": "/assets/templated-apis-screenshots/admin/apis/contextual-save-bar.png", - "codeblock": { - "title": "Display a save bar", - "tabs": [ - { - "title": "html", - "code": "<form\n data-save-bar\n onsubmit=\"console.log('submit', new FormData(event.target)); event.preventDefault();\"\n>\n <label>\n Name:\n <input name=\"username\" />\n </label>\n</form>\n", - "language": "html" - } - ] - } - }, - "definitions": [ - { - "title": "Methods", - "description": "The `saveBar` object provides methods to programmatically control save bar visibility.", - "type": "_SaveBarApi", - "typeDefinitions": { - "_SaveBarApi": { - "filePath": "src/features/save-bar.ts", - "name": "_SaveBarApi", - "description": "", - "members": [ - { - "filePath": "src/features/save-bar.ts", - "syntaxKind": "MethodSignature", - "name": "hide", - "value": "(id: string) => Promise", - "description": "Hides the save bar. Call this after the merchant saves or discards their changes.", - "isOptional": true - }, - { - "filePath": "src/features/save-bar.ts", - "syntaxKind": "MethodSignature", - "name": "leaveConfirmation", - "value": "() => Promise", - "description": "Prompts the merchant to confirm before leaving the page when there are unsaved changes. The promise resolves when the merchant confirms or when no save bar is visible. Use this before programmatic navigation (for example, using `window.location` or custom routing) to prevent accidental data loss.", - "isOptional": true - }, - { - "filePath": "src/features/save-bar.ts", - "syntaxKind": "MethodSignature", - "name": "show", - "value": "(id: string) => Promise", - "description": "Displays the save bar to indicate unsaved changes. Call this when you want to prompt the merchant to save.", - "isOptional": true - }, - { - "filePath": "src/features/save-bar.ts", - "syntaxKind": "MethodSignature", - "name": "toggle", - "value": "(id: string) => Promise", - "description": "Toggles save bar visibility between shown and hidden states.", - "isOptional": true - } - ], - "value": "interface _SaveBarApi {\n /**\n * Displays the save bar to indicate unsaved changes. Call this when you want to prompt the merchant to save.\n * @param id A unique identifier for the save bar\n */\n show?(id: string): Promise;\n /**\n * Hides the save bar. Call this after the merchant saves or discards their changes.\n * @param id A unique identifier for the save bar\n */\n hide?(id: string): Promise;\n /**\n * Toggles save bar visibility between shown and hidden states.\n * @param id A unique identifier for the save bar\n */\n toggle?(id: string): Promise;\n /**\n * Prompts the merchant to confirm before leaving the page when there are unsaved changes. The promise resolves when the merchant confirms or when no save bar is visible. Use this before programmatic navigation (for example, using `window.location` or custom routing) to prevent accidental data loss.\n */\n leaveConfirmation?(): Promise;\n}" - } - } - } - ], - "examples": { - "description": "Examples that demonstrate how to use the Save Bar API.", - "examples": [ - { - "description": "Handle discard events. This example subscribes to the [`reset`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset_event) event to run custom logic when the merchant clicks the Discard button.", - "codeblock": { - "title": "Handle discard events", - "tabs": [ - { - "title": "Event handler property", - "code": "<form\n data-save-bar\n onreset=\"console.log('discarding')\"\n>\n <label>\n Name:\n <input name=\"username\" />\n </label>\n</form>\n", - "language": "html" - }, - { - "title": "Event listener", - "code": "<form data-save-bar>\n <label>\n Name:\n <input name=\"username\" />\n </label>\n</form>\n\n<script>\n const form = document.querySelector('form');\n form.addEventListener('reset', (e) => {\n console.log('discarding');\n });\n</script>\n", - "language": "html" - } - ] - } - }, - { - "description": "Handle save events. This example subscribes to the [`submit`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/submit_event) event to run custom logic when the merchant clicks the Save button.", - "codeblock": { - "title": "Handle save events", - "tabs": [ - { - "title": "Event handler property", - "code": "<form\n data-save-bar\n onsubmit=\"console.log('submitting');\"\n>\n <label>\n Name:\n <input name=\"username\" />\n </label>\n</form>\n", - "language": "html" - }, - { - "title": "Event listener", - "code": "<form data-save-bar>\n <label>\n Name:\n <input name=\"username\" />\n </label>\n</form>\n\n<script>\n const form = document.querySelector('form');\n form.addEventListener('submit', (e) => {\n console.log('submitting');\n });\n</script>\n", - "language": "html" - } - ] - } - }, - { - "description": "Show discard confirmation. This example adds the `data-discard-confirmation` attribute to show a confirmation modal when the merchant clicks the Discard button, preventing accidental data loss.", - "codeblock": { - "title": "Show discard confirmation", - "tabs": [ - { - "code": "<form\n data-save-bar\n data-discard-confirmation\n onsubmit=\"console.log('submit', new FormData(event.target)); event.preventDefault();\"\n>\n <label>\n Name:\n <input name=\"username\" />\n </label>\n</form>\n", - "language": "html" - } - ] - } - }, - { - "description": "Control save bar programmatically. This example uses `saveBar.show()` and `saveBar.hide()` to manage the save bar based on form state changes.", - "codeblock": { - "title": "Control save bar programmatically", - "tabs": [ - { - "code": "function SaveBarExample() {\n const saveBar = shopify.saveBar;\n const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);\n\n const handleFieldInput = () => {\n if (!hasUnsavedChanges) {\n setHasUnsavedChanges(true);\n saveBar.show();\n }\n };\n\n const handleDiscard = () => {\n setHasUnsavedChanges(false);\n saveBar.hide();\n };\n\n const handleSave = async () => {\n // Save to your backend\n setHasUnsavedChanges(false);\n saveBar.hide();\n };\n\n return (\n <s-page heading=\"Settings\">\n <s-section heading=\"Configuration\">\n <s-text-field\n label=\"Store name\"\n onInput={handleFieldInput}\n />\n </s-section>\n </s-page>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Toggle save bar. This example uses `saveBar.toggle()` to switch the save bar between shown and hidden states.", - "codeblock": { - "title": "Toggle save bar", - "tabs": [ - { - "code": "function ToggleExample() {\n const saveBar = shopify.saveBar;\n\n const handleToggle = () => {\n saveBar.toggle();\n };\n\n return (\n <s-page heading=\"Settings\">\n <s-section heading=\"Controls\">\n <s-button onClick={handleToggle}>\n Toggle save bar\n </s-button>\n </s-section>\n </s-page>\n );\n}\n", - "language": "jsx" - } - ] - } - }, - { - "description": "Leave confirmation. This example uses `saveBar.leaveConfirmation()` to prompt the merchant before programmatic navigation when there are unsaved changes.", - "codeblock": { - "title": "Leave confirmation", - "tabs": [ - { - "code": "function LeaveConfirmationExample() {\n const saveBar = shopify.saveBar;\n const [hasUnsavedChanges, setHasUnsavedChanges] = React.useState(false);\n\n const handleFieldInput = () => {\n if (!hasUnsavedChanges) {\n setHasUnsavedChanges(true);\n saveBar.show();\n }\n };\n\n const handleCustomNavigation = async () => {\n // Call leaveConfirmation before programmatic navigation\n await saveBar.leaveConfirmation();\n // Navigation proceeds after merchant confirms or if no unsaved changes\n window.location.href = '/other-page';\n };\n\n return (\n <s-page heading=\"Settings\">\n <s-section heading=\"Configuration\">\n <s-text-field\n label=\"Store name\"\n onInput={handleFieldInput}\n />\n <s-button onClick={handleCustomNavigation}>\n Go to other page\n </s-button>\n </s-section>\n </s-page>\n );\n}\n", - "language": "jsx" - } - ] - } - } - ] - } - }, - { - "name": "Scanner", - "overviewPreviewDescription": "Use the mobile device's camera to scan barcodes", - "description": "The Scanner API allows you to use the mobile device's camera to scan barcodes. Use this API to capture barcode data and integrate it into your app's workflow on Shopify POS.", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "Device and platform integration", - "related": [], - "defaultExample": { - "description": "Look up products by scanning their barcode. This example captures a barcode and queries the Admin API to find the matching product variant.", - "codeblock": { - "title": "Scan and look up a product", - "tabs": [ - { - "code": "// Scan a product barcode and look it up\ntry {\n const { data: barcode } = await shopify.scanner.capture();\n\n // Look up the product variant by barcode\n const response = await fetch('shopify:admin/api/graphql.json', {\n method: 'POST',\n body: JSON.stringify({\n query: `\n query getVariantByBarcode($barcode: String!) {\n productVariants(first: 1, query: $barcode) {\n nodes {\n id\n title\n price\n product {\n title\n }\n }\n }\n }\n `,\n variables: { barcode: `barcode:${barcode}` }\n })\n });\n\n const { data } = await response.json();\n const variant = data.productVariants.nodes[0];\n\n if (variant) {\n shopify.toast.show(`Found: ${variant.product.title} - ${variant.title}`);\n } else {\n shopify.toast.show('Product not found', { isError: true });\n }\n} catch (error) {\n shopify.toast.show('Scan cancelled or failed', { isError: true });\n}\n", - "language": "js" - } - ] - } - }, - "definitions": [ - { - "title": "Methods", - "description": "The `scanner` API provides a `capture` method that opens the mobile device's scanner to capture a barcode. It returns a Promise resolving to the scanned barcode data or an error.", - "type": "ScannerApi", - "typeDefinitions": { - "ScannerApi": { - "filePath": "src/features/scanner.ts", - "name": "ScannerApi", - "description": "The Scanner API for capturing barcode data using the device camera.", - "members": [ - { - "filePath": "src/features/scanner.ts", - "syntaxKind": "MethodSignature", - "name": "capture", - "value": "() => Promise", - "description": "Opens the device camera to scan a barcode. Returns a Promise that resolves to a `ScannerPayload` containing the scanned data." - } - ], - "value": "export interface ScannerApi {\n /**\n * Opens the device camera to scan a barcode. Returns a Promise that resolves to a `ScannerPayload` containing the scanned data.\n */\n capture(): Promise;\n}" - }, - "ScannerPayload": { - "filePath": "src/features/scanner.ts", - "name": "ScannerPayload", - "description": "The result returned after a successful barcode scan.", - "members": [ - { - "filePath": "src/features/scanner.ts", - "syntaxKind": "PropertySignature", - "name": "data", - "value": "string", - "description": "The scanned barcode data as a string." - } - ], - "value": "export interface ScannerPayload {\n /**\n * The scanned barcode data as a string.\n */\n data: string;\n}" - } - } - } - ] - }, - { - "name": "Scopes", - "overviewPreviewDescription": "Query, request, and revoke access scopes for your app", - "description": "The Scopes API lets you manage your app's access scopes at runtime. You can query which scopes are currently granted, request additional optional scopes from the merchant (which opens a permission grant modal), and revoke optional scopes you no longer need.\n\n> Tip:\n> To learn more about declaring and requesting access scopes, as well as required vs. optional scopes, refer to manage access scopes.", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "Authentication and data", - "definitions": [ - { - "title": "Methods", - "description": "The `scopes` API is available on the `shopify` global. All methods are asynchronous and return a Promise.", - "type": "Scopes", - "typeDefinitions": { - "Scopes": { - "filePath": "src/types.ts", - "name": "Scopes", - "description": "The Scopes API lets you query, request, and revoke access scopes for your app at runtime.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": "() => Promise", - "description": "Returns the current access scopes for this app on this shop, including which are granted, required, and optional." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "request", - "value": "(scopes: string[]) => Promise", - "description": "Opens a permission grant modal asking the merchant to grant the specified scopes.\n\nThe scopes must be [access scope](https://shopify.dev/docs/api/usage/access-scopes) handles (for example, `'read_products'` or `'write_orders'`) that are declared as optional in your app configuration.\n\nSee the [permission grant modal](/docs/apps/build/authentication-authorization/app-installation/manage-access-scopes#request-access-scopes-using-the-app-bridge-api-for-embedded-apps) documentation for more details." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "revoke", - "value": "(scopes: string[]) => Promise", - "description": "Revokes the specified optional scopes from this app on this shop.\n\nThe scopes must be [access scope](https://shopify.dev/docs/api/usage/access-scopes) handles (for example, `'read_products'` or `'write_orders'`) that are currently granted and declared as optional. Required scopes cannot be revoked." - } - ], - "value": "export interface Scopes {\n /**\n * Returns the current access scopes for this app on this shop, including which are granted, required, and optional.\n */\n query: () => Promise;\n\n /**\n * Opens a permission grant modal asking the merchant to grant the specified scopes.\n *\n * The scopes must be [access scope](https://shopify.dev/docs/api/usage/access-scopes) handles (for example, `'read_products'` or `'write_orders'`) that are declared as optional in your app configuration.\n *\n * See the [permission grant modal](/docs/apps/build/authentication-authorization/app-installation/manage-access-scopes#request-access-scopes-using-the-app-bridge-api-for-embedded-apps) documentation for more details.\n */\n request: (scopes: Scope[]) => Promise;\n\n /**\n * Revokes the specified optional scopes from this app on this shop.\n *\n * The scopes must be [access scope](https://shopify.dev/docs/api/usage/access-scopes) handles (for example, `'read_products'` or `'write_orders'`) that are currently granted and declared as optional. Required scopes cannot be revoked.\n */\n revoke: (scopes: Scope[]) => Promise;\n}" - }, - "ScopesDetail": { - "filePath": "src/types.ts", - "name": "ScopesDetail", - "description": "", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "granted", - "value": "string[]", - "description": "The scopes currently granted to this app on this shop. This includes both required and optional scopes." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "optional", - "value": "string[]", - "description": "The scopes declared as optional in your app configuration. These may or may not be currently granted — check `granted` to see which are active." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "required", - "value": "string[]", - "description": "The scopes declared as required in your app configuration. These are always granted at install time and cannot be revoked by the app." - } - ], - "value": "export interface ScopesDetail {\n /**\n * The scopes currently granted to this app on this shop. This includes both required and optional scopes.\n */\n granted: Scope[];\n /**\n * The scopes declared as required in your app configuration. These are always granted at install time and cannot be revoked by the app.\n */\n required: Scope[];\n /**\n * The scopes declared as optional in your app configuration. These may or may not be currently granted — check `granted` to see which are active.\n */\n optional: Scope[];\n}" - }, - "ScopesRequestResponse": { - "filePath": "src/types.ts", - "name": "ScopesRequestResponse", - "description": "", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "detail", - "value": "ScopesDetail", - "description": "The updated scopes for this app on this shop after the merchant's response." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "result", - "value": "UserResult", - "description": "The merchant's response: `'granted-all'` if they accepted all requested scopes, or `'declined-all'` if they declined." - } - ], - "value": "export interface ScopesRequestResponse {\n /**\n * The merchant's response: `'granted-all'` if they accepted all requested scopes, or `'declined-all'` if they declined.\n */\n result: UserResult;\n /**\n * The updated scopes for this app on this shop after the merchant's response.\n */\n detail: ScopesDetail;\n}" - }, - "UserResult": { - "filePath": "src/types.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "UserResult", - "value": "'granted-all' | 'declined-all'", - "description": "The merchant's response to a scopes request: `'granted-all'` if they accepted all requested scopes, or `'declined-all'` if they declined." - }, - "ScopesRevokeResponse": { - "filePath": "src/types.ts", - "name": "ScopesRevokeResponse", - "description": "", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "detail", - "value": "ScopesDetail", - "description": "The updated scopes for this app on this shop after the revocation." - } - ], - "value": "export interface ScopesRevokeResponse {\n /**\n * The updated scopes for this app on this shop after the revocation.\n */\n detail: ScopesDetail;\n}" - } - } - } - ], - "related": [ - { - "name": "Managing Access Scopes", - "subtitle": "Reference", - "url": "/docs/apps/build/authentication-authorization/app-installation/manage-access-scopes", - "type": "reference" - }, - { - "name": "Remix Scopes API", - "subtitle": "API", - "url": "/docs/api/shopify-app-remix/v3/apis/scopes", - "type": "api" - } - ], - "defaultExample": { - "description": "Query the current scopes for your app on this shop. The response includes which scopes are granted, which are required, and which are declared as optional in your app configuration.", - "codeblock": { - "title": "Query your app's access scopes", - "tabs": [ - { - "code": "const {granted, required, optional} = await shopify.scopes.query();\n\nconsole.log(granted); // => ['read_products', 'write_products', 'read_orders']\nconsole.log(required); // => ['read_products', 'write_products']\nconsole.log(optional); // => ['read_orders', 'write_orders']\n", - "language": "js" - } - ] - } - }, - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Request the merchant to grant additional optional scopes. This opens a permission grant modal where the merchant can accept or decline. The scopes you request must be declared as optional in your app configuration, and each value must be a valid access scope handle such as 'read_products' or 'write_orders'.", - "codeblock": { - "title": "Request optional scopes from the merchant", - "tabs": [ - { - "code": "const response = await shopify.scopes.request([\n 'read_products',\n 'write_discounts',\n]);\n\nif (response.result === 'granted-all') {\n console.log('Merchant granted access');\n} else if (response.result === 'declined-all') {\n console.log('Merchant declined access');\n}\n\nconsole.log(response.detail.granted);\n", - "language": "js" - } - ] - } - }, - { - "description": "Revoke optional scopes that your app no longer needs. The response includes the updated list of granted scopes. Only optional scopes can be revoked — required scopes cannot be removed.", - "codeblock": { - "title": "Revoke optional scopes", - "tabs": [ - { - "code": "const response = await shopify.scopes.revoke(['read_products']);\n\nconsole.log(response.detail.granted);\n", - "language": "js" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Share", - "overviewPreviewDescription": "Share content from your app on a mobile device", - "description": "Use the navigator.share() method to share text and URLs from your app.\n\nOn desktop devices, navigator.share() uses the browser's built-in sharing functionality. See the navigator.share() documentation to learn more about browser support for this method.\n\nOn mobile devices, navigator.share() doesn't work natively inside the app's iframe. When you call this method from apps in Shopify Mobile or Shopify POS, App Bridge intercepts the method and invokes the native iOS or Android share sheet.\n\nSharing files using the files property isn't supported.", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "Device and platform integration", - "related": [], - "defaultExample": { - "description": "Share a URL along with a text description using `navigator.share()`. Wrap the call in a try/catch block to handle cases where the user cancels the share or sharing is not supported.", - "codeblock": { - "title": "Share a URL from your app", - "tabs": [ - { - "code": "try {\n const shareData = {\n text: 'Learn more about Shopify App Bridge',\n url: 'https://shopify.dev/docs/api/app-bridge',\n };\n await navigator.share(shareData);\n} catch (err) {\n console.log('Share error', err);\n}\n", - "language": "js" - } - ] - } - }, - "definitions": [], - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Share a text message without a URL. This is useful for sharing summaries or custom messages that are not tied to a specific link.", - "codeblock": { - "title": "Share text content", - "tabs": [ - { - "code": "try {\n await navigator.share({\n text: 'Check out this order summary from my Shopify app!',\n });\n} catch (err) {\n console.log('Share failed', err);\n}\n", - "language": "js" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Support", - "overviewPreviewDescription": "Register a custom handler for support requests", - "description": "The Support API lets you register a custom handler when merchants request support through App Bridge. This handler is triggered when a merchant clicks the support button at the top of the app, allowing you to provide in-app support such as opening a live chat widget.\n\n> Tip:\n> To register a custom support callback, you must define a [Support link extension](/docs/apps/launch/distribution/support-your-customers#custom-support-events) that points to a page within your app. Without this extension, the support callback is ignored.", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "User interface and interactions", - "thumbnail": "/assets/templated-apis-screenshots/admin/apis/support.png", - "related": [], - "definitions": [ - { - "title": "Methods", - "description": "The `support` object provides a method that registers a callback function to run when support is requested.", - "type": "SupportApi", - "typeDefinitions": { - "SupportApi": { - "filePath": "src/features/support.ts", - "name": "SupportApi", - "description": "The Support API for handling custom support requests.", - "members": [ - { - "filePath": "src/features/support.ts", - "syntaxKind": "PropertySignature", - "name": "registerHandler", - "value": "(callback: SupportCallback) => Promise", - "description": "Registers a callback function to run when the merchant clicks the support button. Pass `null` to unregister a previously registered handler.", - "isOptional": true - } - ], - "value": "export interface SupportApi {\n /**\n * Registers a callback function to run when the merchant clicks the support button. Pass `null` to unregister a previously registered handler.\n * @param callback - The function to call when support is requested, or `null` to unregister.\n */\n registerHandler?: (callback: SupportCallback | null) => Promise;\n}" - }, - "SupportCallback": { - "filePath": "src/features/support.ts", - "name": "SupportCallback", - "description": "A callback function that runs when support is requested.", - "params": [], - "returns": { - "filePath": "src/features/support.ts", - "description": "", - "name": "void | Promise", - "value": "void | Promise" - }, - "value": "() => void | Promise" - } - } - } - ], - "defaultExample": { - "description": "Register a support handler. This example registers a callback function that runs when the merchant clicks the support button. Use this to open a live chat widget, display a contact form, or trigger any custom support flow.", - "codeblock": { - "title": "Register a support handler", - "tabs": [ - { - "code": "// Define the callback function\nconst handler = () => {\n // implement your custom functionality\n openLiveChat();\n};\n\n// Register the callback\nshopify.support.registerHandler(handler);\n", - "language": "js" - } - ] - } - } - }, - { - "name": "Toast", - "overviewPreviewDescription": "Creates a Toast notification in your app", - "description": "The Toast API displays a non-disruptive message that appears at the bottom of the interface to provide quick and short feedback on the outcome of an action. This API is modeled after the [Web Notification API](https://developer.mozilla.org/en-US/docs/Web/API/Notification).", - "isVisualComponent": true, - "category": "APIs", - "subCategory": "User interface and interactions", - "thumbnail": "/assets/templated-apis-screenshots/admin/apis/toast.png", - "related": [], - "defaultExample": { - "description": "Show a basic toast. This example displays a minimal toast notification with only a message string. Use this for simple confirmations like saving a product, sending a message, or completing a quick action.", - "image": "/assets/templated-apis-screenshots/admin/apis/toast.png", - "codeblock": { - "title": "Show a basic toast", - "tabs": [ - { - "code": "shopify.toast.show('Message sent');\n", - "language": "js" - } - ] - } - }, - "examples": { - "description": "Examples that demonstrate how to use the Toast API.", - "examples": [ - { - "description": "Set a custom duration. This example displays a toast with a custom `duration` option set to 5000 milliseconds. Use this when the default display time is too short for the message content, such as longer confirmation messages or status updates that merchants need more time to read.", - "codeblock": { - "title": "Set a custom duration", - "tabs": [ - { - "code": "shopify.toast.show('Product saved', {\n duration: 5000,\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Add an action button. This example displays a toast with an `action` label and an `onAction` callback. Use this to offer an undo option after destructive actions, a retry option after failed operations, or a navigation shortcut to view the result of a completed action.", - "codeblock": { - "title": "Add an action button", - "tabs": [ - { - "code": "shopify.toast.show('Product saved', {\n action: 'Undo',\n onAction: () => {}, // Undo logic\n});\n", - "language": "js" - } - ] - } - }, - { - "description": "Handle dismiss. This example displays a toast with an `onDismiss` callback that fires when the toast is closed. Use this to trigger follow-up logic after the notification disappears, such as refreshing data, logging analytics events, or advancing a multi-step workflow.", - "codeblock": { - "title": "Handle dismiss", - "tabs": [ - { - "code": "shopify.toast.show('Product saved', {\n onDismiss: () => {}, // Dismiss logic\n});\n", - "language": "js" - } - ] - } - } - ] - }, - "definitions": [ - { - "title": "Methods", - "description": "The `Toast.show` method displays a toast notification in the Shopify admin. It accepts a variety of options to customize the behavior.", - "type": "ToastApi", - "typeDefinitions": { - "ToastApi": { - "filePath": "src/features/toast.ts", - "name": "ToastApi", - "description": "The Toast API provides methods to display Toast notifications in the Shopify admin.", - "members": [ - { - "filePath": "src/features/toast.ts", - "syntaxKind": "PropertySignature", - "name": "hide", - "value": "ToastHide", - "description": "Hides a Toast notification in the Shopify admin." - }, - { - "filePath": "src/features/toast.ts", - "syntaxKind": "PropertySignature", - "name": "show", - "value": "ToastShow", - "description": "Displays a Toast notification in the Shopify admin." - } - ], - "value": "export interface ToastApi {\n /**\n * Displays a Toast notification in the Shopify admin.\n *\n * @param message - The message to be displayed in the Toast notification.\n * @param opts - Options for the Toast notification.\n *\n * @returns The ID of the Toast notification.\n */\n show: ToastShow;\n /**\n * Hides a Toast notification in the Shopify admin.\n *\n * @param id - The ID of the Toast notification to be hidden.\n */\n hide: ToastHide;\n}" - }, - "ToastHide": { - "filePath": "src/features/toast.ts", - "name": "ToastHide", - "description": "", - "params": [ - { - "name": "id", - "description": "", - "value": "string", - "filePath": "src/features/toast.ts" - } - ], - "returns": { - "filePath": "src/features/toast.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "(id: string) => void" - }, - "ToastShow": { - "filePath": "src/features/toast.ts", - "name": "ToastShow", - "description": "", - "params": [ - { - "name": "message", - "description": "", - "value": "string", - "filePath": "src/features/toast.ts" - }, - { - "name": "opts", - "description": "", - "value": "ToastOptions", - "isOptional": true, - "filePath": "src/features/toast.ts" - } - ], - "returns": { - "filePath": "src/features/toast.ts", - "description": "", - "name": "string", - "value": "string" - }, - "value": "(message: string, opts?: ToastOptions) => string" - }, - "ToastOptions": { - "filePath": "src/features/toast.ts", - "name": "ToastOptions", - "description": "", - "members": [ - { - "filePath": "src/features/toast.ts", - "syntaxKind": "PropertySignature", - "name": "action", - "value": "string", - "description": "Content of an action button.", - "isOptional": true - }, - { - "filePath": "src/features/toast.ts", - "syntaxKind": "PropertySignature", - "name": "duration", - "value": "number", - "description": "The length of time in milliseconds the toast message should persist.", - "isOptional": true, - "defaultValue": "5000" - }, - { - "filePath": "src/features/toast.ts", - "syntaxKind": "PropertySignature", - "name": "isError", - "value": "boolean", - "description": "Display an error-styled toast.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/features/toast.ts", - "syntaxKind": "PropertySignature", - "name": "onAction", - "value": "() => void", - "description": "Callback fired when the action button is clicked.", - "isOptional": true - }, - { - "filePath": "src/features/toast.ts", - "syntaxKind": "PropertySignature", - "name": "onDismiss", - "value": "() => void", - "description": "Callback fired when the dismiss icon is clicked.", - "isOptional": true - } - ], - "value": "export interface ToastOptions {\n /**\n * The length of time in milliseconds the toast message should persist.\n * @defaultValue 5000\n */\n duration?: number;\n /**\n * Display an error-styled toast.\n * @defaultValue false\n */\n isError?: boolean;\n /**\n * Content of an action button.\n */\n action?: string;\n /**\n * Callback fired when the action button is clicked.\n */\n onAction?: () => void;\n /**\n * Callback fired when the dismiss icon is clicked.\n */\n onDismiss?: () => void;\n}" - } - } - } - ] - }, - { - "name": "User", - "overviewPreviewDescription": "Get information about the currently logged-in user", - "description": "The User API retrieves information about the currently logged-in user, such as their name, email, and account access level. The response shape depends on the platform: admin users and POS users return different sets of properties.", - "isVisualComponent": false, - "defaultExample": { - "description": "Retrieve information about the current user. The properties available in the response depend on whether the user is logged into the Shopify admin or Shopify POS.", - "codeblock": { - "title": "Get the current user's information", - "tabs": [ - { - "code": "const user = await shopify.user();\n\nconsole.log(user.accountAccess); // => 'full'\n", - "language": "js" - } - ] - } - }, - "definitions": [ - { - "title": "Admin User", - "description": "When the user is logged into the Shopify admin, `shopify.user()` returns the user's account access level.", - "type": "AdminUserAPI", - "typeDefinitions": { - "AdminUserAPI": { - "filePath": "src/features/user.ts", - "name": "AdminUserAPI", - "description": "Returns information about the currently logged-in user.\n\nThe shape of the response depends on whether the user is logged into the Shopify admin or Shopify POS. Admin users have `accountAccess` and optionally `id`, `name`, and `email`. POS users have `id`, `firstName`, `lastName`, `email`, `accountAccess`, and `accountType`.", - "params": [], - "returns": { - "filePath": "src/features/user.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "() => Promise" - }, - "AdminUser": { - "filePath": "src/features/user.ts", - "name": "AdminUser", - "description": "", - "members": [ - { - "filePath": "src/features/user.ts", - "syntaxKind": "PropertySignature", - "name": "accountAccess", - "value": "string", - "description": "The account access level of the logged-in user.", - "isOptional": true - } - ], - "value": "export interface AdminUser {\n /**\n * The account access level of the logged-in user.\n */\n accountAccess?: string;\n}" - } - } - }, - { - "title": "POS User", - "description": "When the user is logged into Shopify POS, `shopify.user()` returns the user's ID, first and last name, email, account access level, and account type.", - "type": "POSUserAPI", - "typeDefinitions": { - "POSUserAPI": { - "filePath": "src/features/user.ts", - "name": "POSUserAPI", - "description": "", - "params": [], - "returns": { - "filePath": "src/features/user.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "() => Promise" - }, - "POSUser": { - "filePath": "src/features/user.ts", - "name": "POSUser", - "description": "", - "members": [ - { - "filePath": "src/features/user.ts", - "syntaxKind": "PropertySignature", - "name": "accountAccess", - "value": "string", - "description": "The account access level of the logged-in user.", - "isOptional": true - }, - { - "filePath": "src/features/user.ts", - "syntaxKind": "PropertySignature", - "name": "accountType", - "value": "string", - "description": "The user's account type.", - "isOptional": true - }, - { - "filePath": "src/features/user.ts", - "syntaxKind": "PropertySignature", - "name": "email", - "value": "string", - "description": "The user's email address.", - "isOptional": true - }, - { - "filePath": "src/features/user.ts", - "syntaxKind": "PropertySignature", - "name": "firstName", - "value": "string", - "description": "The user's first name.", - "isOptional": true - }, - { - "filePath": "src/features/user.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "number", - "description": "The staff member's numeric ID.", - "isOptional": true - }, - { - "filePath": "src/features/user.ts", - "syntaxKind": "PropertySignature", - "name": "lastName", - "value": "string", - "description": "The user's last name.", - "isOptional": true - } - ], - "value": "export interface POSUser {\n /**\n * The staff member's numeric ID.\n */\n id?: number;\n /**\n * The user's first name.\n */\n firstName?: string;\n /**\n * The user's last name.\n */\n lastName?: string;\n /**\n * The user's email address.\n */\n email?: string;\n /**\n * The account access level of the logged-in user.\n */\n accountAccess?: string;\n /**\n * The user's account type.\n */\n accountType?: string;\n}" - } - } - } - ], - "category": "APIs", - "subCategory": "Authentication and data", - "related": [], - "examples": { - "description": "", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "On Shopify POS, the user object includes additional properties such as `firstName`, `lastName`, and `accountType` that are not available on the admin.", - "codeblock": { - "title": "Get user information on Shopify POS", - "tabs": [ - { - "code": "const user = await shopify.user();\n\nconsole.log(user.id); // => 12345\nconsole.log(user.firstName); // => 'Jane'\nconsole.log(user.lastName); // => 'Doe'\nconsole.log(user.email); // => 'jane@example.com'\nconsole.log(user.accountAccess); // => 'full'\nconsole.log(user.accountType); // => 'regular'\n", - "language": "js" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Web Vitals", - "overviewPreviewDescription": "Monitor Web Vitals for your app", - "description": "The Web Vitals API allows you to access performance metrics for your embedded app directly through App Bridge. Use this API to monitor [Core Web Vitals](https://web.dev/vitals/) and send metrics to your own monitoring service.", - "isVisualComponent": false, - "category": "APIs", - "subCategory": "Device and platform integration", - "related": [ - { - "name": "App Performance Guidelines", - "subtitle": "Reference", - "url": "/docs/apps/build/performance/admin-installation-oauth", - "type": "reference" - }, - { - "name": "Web Vitals Debug", - "subtitle": "API", - "url": "/docs/api/app-bridge-library/apis/config#config-propertydetail-debug", - "type": "api" - } - ], - "defaultExample": { - "description": "Track Core Web Vitals for your embedded app. This example registers a callback that sends performance metrics to your monitoring service.", - "codeblock": { - "title": "Monitor app performance", - "tabs": [ - { - "code": "// Define the callback function\nconst callback = async (metrics) => {\n const monitorUrl = 'https://yourserver.com/web-vitals-metrics';\n const data = JSON.stringify(metrics);\n\n navigator.sendBeacon(monitorUrl, data);\n};\n\n// Register the callback\nshopify.webVitals.onReport(callback);\n", - "language": "js" - } - ] - } - }, - "definitions": [ - { - "title": "Methods", - "description": "The Web Vitals API provides an `onReport` method that registers a callback function to receive Web Vitals data. It allows you to monitor and analyze your app's performance in the Shopify admin.", - "type": "WebVitalsApi", - "typeDefinitions": { - "WebVitalsApi": { - "filePath": "src/features/web-vitals.ts", - "name": "WebVitalsApi", - "description": "The Web Vitals API for monitoring app performance metrics in the Shopify admin.", - "members": [ - { - "filePath": "src/features/web-vitals.ts", - "syntaxKind": "PropertySignature", - "name": "onReport", - "value": "(callback: WebVitalsCallback) => Promise", - "description": "Registers a callback to receive Web Vitals performance data. Pass `null` to unregister a previously registered callback.", - "isOptional": true - } - ], - "value": "export interface WebVitalsApi {\n /**\n * Registers a callback to receive Web Vitals performance data. Pass `null` to unregister a previously registered callback.\n */\n onReport?: (callback: WebVitalsCallback | null) => Promise;\n}" - }, - "WebVitalsCallback": { - "filePath": "src/features/web-vitals.ts", - "name": "WebVitalsCallback", - "description": "A callback function that receives a Web Vitals report containing performance metrics.", - "params": [ - { - "name": "payload", - "description": "", - "value": "WebVitalsReport", - "filePath": "src/features/web-vitals.ts" - } - ], - "returns": { - "filePath": "src/features/web-vitals.ts", - "description": "", - "name": "void | Promise", - "value": "void | Promise" - }, - "value": "(\n payload: WebVitalsReport,\n) => void | Promise" - }, - "WebVitalsReport": { - "filePath": "src/types.ts", - "name": "WebVitalsReport", - "description": "A report containing an array of Web Vitals performance metrics.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "metrics", - "value": "WebVitalsMetric[]", - "description": "The array of Web Vitals metric measurements included in this report." - } - ], - "value": "export interface WebVitalsReport {\n /**\n * The array of Web Vitals metric measurements included in this report.\n */\n metrics: WebVitalsMetric[];\n}" - }, - "WebVitalsMetric": { - "filePath": "src/types.ts", - "name": "WebVitalsMetric", - "description": "A single Web Vitals performance metric measurement.", - "members": [ - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "country", - "value": "string", - "description": "The country code where the metric was collected, if available.", - "isOptional": true - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for this metric measurement instance." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "name", - "value": "string", - "description": "The name of the metric, such as `LCP`, `FCP`, `CLS`, `INP`, `TTFB`, or `FID`." - }, - { - "filePath": "src/types.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "number", - "description": "The measured value of the metric. Units depend on the metric name (milliseconds for timing metrics, unitless for CLS)." - } - ], - "value": "export interface WebVitalsMetric {\n /**\n * A unique identifier for this metric measurement instance.\n */\n id: string;\n /**\n * The name of the metric, such as `LCP`, `FCP`, `CLS`, `INP`, `TTFB`, or `FID`.\n */\n name: string;\n /**\n * The measured value of the metric. Units depend on the metric name (milliseconds for timing metrics, unitless for CLS).\n */\n value: number;\n /**\n * The country code where the metric was collected, if available.\n */\n country?: string;\n}" - } - } - } - ] - }, - { - "name": "Avatar", - "description": "The avatar component displays profile images or initials for users, customers, and businesses in a compact visual format. Use avatar to represent people or entities throughout the interface, with automatic fallback to initials when images aren't available.\n\nAvatars support multiple sizes for different contexts and provide consistent color assignment for initials based on the name provided. For product or content preview images, use [thumbnail](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/thumbnail). For full-size images, use [image](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/image).", - "category": "Web components", - "subCategory": "Media and visuals", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/avatar.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Choose appropriate sizes**: Use smaller sizes for compact contexts like tables and lists, and larger sizes for profile pages where the person is the primary focus.\n- **Provide meaningful alt text**: Describe the avatar content like **Sarah Chen** or **Acme Corporation**, or use empty alt text if the name appears next to the avatar as text.\n- **Position near related content**: Place avatars adjacent to the names or entities they represent for clear associations in lists, tables, or cards." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Avatar images must be served from URLs accessible by the merchant's browser. If the image is hosted on a different domain, the server must include appropriate `Access-Control-Allow-Origin` headers or the image might fail to load.\n- Only standard web image formats (JPEG, PNG, GIF, WebP, SVG) are supported. Unsupported formats will fall back to initials.\n- The `initials` prop accepts a string that displays when no image is available. Characters beyond the first two might be truncated. Special characters, emojis, or non-Latin scripts might not render as expected." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the avatar component.", - "type": "Avatar", - "typeDefinitions": { - "Avatar": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Avatar", - "description": "Configure the following properties on the avatar component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the avatar for accessibility.\n\nProvides 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.\n\nWhen 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.\n\nLearn 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).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "initials", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"base\" | \"large\" | \"large-200\"", - "description": "The size of the avatar image.\n\n- `small-200`: Extra small avatar, suitable for compact displays or lists with many items.\n- `small`: Small avatar, good for secondary contexts or tight layouts.\n- `base`: Default size that works well in most contexts.\n- `large`: Large avatar for emphasis or when the avatar is a focal point.\n- `large-200`: Extra large avatar for prominent display.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "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.", - "isOptional": true - } - ], - "value": "declare class Avatar extends PreactCustomElement implements AvatarProps {\n accessor initials: AvatarProps['initials'];\n accessor src: AvatarProps['src'];\n accessor size: AvatarProps['size'];\n accessor alt: AvatarProps['alt'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The avatar component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "AvatarEvents", - "typeDefinitions": { - "AvatarEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AvatarEvents", - "description": "The avatar component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "error", - "value": "OnErrorEventHandler", - "description": "A callback fired when the avatar image fails to load.\n\nLearn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "load", - "value": "CallbackEventListener | null", - "description": "A callback fired when the avatar image successfully loads.\n\nLearn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).", - "isOptional": true - } - ], - "value": "export interface AvatarEvents {\n /**\n * A callback fired when the avatar image successfully loads.\n *\n * Learn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).\n */\n load: CallbackEventListener | null = null;\n /**\n * A callback fired when the avatar image fails to load.\n *\n * Learn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).\n */\n error: OnErrorEventHandler = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "avatar-default.png", - "description": "Identify users visually when no profile image is available. This example displays an avatar with initials derived from a name.", - "codeblock": { - "title": "Display initials", - "tabs": [ - { - "title": "html", - "code": "<s-avatar alt=\"John Doe\" initials=\"JD\"></s-avatar>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Represent unknown users with a generic icon. This example displays a placeholder avatar when no initials or image are provided.", - "codeblock": { - "title": "Show a placeholder avatar", - "tabs": [ - { - "title": "html", - "code": "<s-avatar alt=\"Customer\"></s-avatar>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display profile photos with graceful error handling. This example presents an avatar with a source image that falls back to initials if the image fails to load.", - "codeblock": { - "title": "Load an image with fallback", - "tabs": [ - { - "title": "html", - "code": "<s-avatar\n src=\"/customers/profile-123.jpg\"\n initials=\"MR\"\n alt=\"Maria Rodriguez\"\n size=\"base\"\n></s-avatar>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Adapt avatar prominence to different UI contexts. This example demonstrates all five available sizes from `small-200` to `large-200`.", - "codeblock": { - "title": "Adjust the size", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-avatar initials=\"SC\" alt=\"Store customer\" size=\"small-200\"></s-avatar>\n <s-avatar initials=\"MR\" alt=\"Merchant representative\" size=\"small\"></s-avatar>\n <s-avatar initials=\"SM\" alt=\"Store manager\" size=\"base\"></s-avatar>\n <s-avatar initials=\"SF\" alt=\"Staff member\" size=\"large\"></s-avatar>\n <s-avatar initials=\"SO\" alt=\"Store owner\" size=\"large-200\"></s-avatar>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display initials of varying lengths consistently. This example presents avatars with two, three, and four character initials.", - "codeblock": { - "title": "Handle long names", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-avatar initials=\"TC\" alt=\"Tech customer\" size=\"base\"></s-avatar>\n <s-avatar initials=\"VIP\" alt=\"VIP customer store\" size=\"base\"></s-avatar>\n <s-avatar initials=\"SHOP\" alt=\"Shopify partner store\" size=\"base\"></s-avatar>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Ensure visual consistency across the interface. This example demonstrates that avatars with identical initials always display the same background color.", - "codeblock": { - "title": "Maintain color consistency", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-avatar initials=\"AB\" alt=\"Apparel boutique\" size=\"base\"></s-avatar>\n <s-avatar initials=\"CD\" alt=\"Coffee direct\" size=\"base\"></s-avatar>\n <s-avatar initials=\"EF\" alt=\"Electronics franchise\" size=\"base\"></s-avatar>\n <s-avatar initials=\"AB\" alt=\"Art books store\" size=\"base\"></s-avatar>\n <!-- Note: Both AB avatars will have the same color -->\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Show customer identities in list views. This example pairs avatars with customer names in a vertical stack layout.", - "codeblock": { - "title": "Display in a customer list", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-stack direction=\"inline\" gap=\"small\">\n <s-avatar\n src=\"/customers/merchant-alice.jpg\"\n initials=\"AJ\"\n alt=\"Alice's jewelry store\"\n size=\"small\"\n ></s-avatar>\n <s-text>Alice's jewelry store</s-text>\n </s-stack>\n <s-stack direction=\"inline\" gap=\"small\">\n <s-avatar initials=\"BP\" alt=\"Bob's pet supplies\" size=\"small\"></s-avatar>\n <s-text>Bob's pet supplies</s-text>\n </s-stack>\n <s-stack direction=\"inline\" gap=\"small\">\n <s-avatar\n src=\"/customers/charlie-cafe.jpg\"\n initials=\"CC\"\n alt=\"Charlie's coffee corner\"\n size=\"small\"\n ></s-avatar>\n <s-text>Charlie's coffee corner</s-text>\n </s-stack>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n Alice's jewelry store\n \n \n \n Bob's pet supplies\n \n \n \n Charlie's coffee corner\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Create a profile layout with multiple components. This example combines an avatar with [section](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/section), [heading](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/heading), and [text](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/text) components.", - "codeblock": { - "title": "Build a merchant profile card", - "tabs": [ - { - "title": "html", - "code": "<s-section>\n <s-stack gap=\"base\">\n <s-stack direction=\"inline\" gap=\"small\">\n <s-avatar\n src=\"/merchants/premium-store.jpg\"\n initials=\"PS\"\n alt=\"Premium store\"\n size=\"base\"\n ></s-avatar>\n <s-stack gap=\"small-400\">\n <s-heading>Premium store</s-heading>\n <s-text color=\"subdued\">Shopify Plus merchant</s-text>\n </s-stack>\n </s-stack>\n <s-text>Monthly revenue: $45,000</s-text>\n </s-stack>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n Premium store\n Shopify Plus merchant\n \n \n Monthly revenue: $45,000\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Badge", - "description": "The badge component displays status information or indicates completed actions through compact visual indicators. Use badge to communicate object states, order statuses, or system-generated classifications that help users quickly understand item conditions.\n\nBadges support multiple tones and sizes, with optional icons to reinforce status meaning and improve scannability in lists and tables. For user-created labels, categories, or tags, use [chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/chip) instead.", - "category": "Web components", - "subCategory": "Feedback and status indicators", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/badge.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Choose the right size:** Use `base` size in table cells, list items, or when showing multiple badges together. Use `large` size for standalone badges that need emphasis, like a primary status indicator at the top of a page.\n- **Keep labels to 1-2 words:** Use concise labels like **Fulfilled**, **Partially refunded**, or **Out of stock**. Always use past tense for status labels: **Refunded** not **Refund**.\n- **Use appropriate tones:** Apply `critical` for errors or urgent issues needing action, `warning` for problems requiring attention, `success` for positive confirmations, and `info` for neutral statuses. Use consistent tones for the same status across your app.\n- **Position in content flow:** Place badges adjacent to the items they describe. In list items, position them near the title. In tables, place them in their own column for scannability.\n- **Know when not to use badges:** Badges are static, system-generated indicators. Don't use badges for merchant-created tags or removable items." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Badge text truncates with an ellipsis when it exceeds the available width. Truncated text isn't accessible via tooltip, so keep labels concise.\n- Badge text never wraps to multiple lines. Long labels will truncate rather than expand the badge height.\n- Only specific predefined icons from the admin icon set are supported. Custom icons or images can't be used. The icon always appears to the left of the text and can't be repositioned." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the badge component.", - "type": "Badge", - "typeDefinitions": { - "Badge": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Badge", - "description": "Configure the following properties on the badge component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "Controls the visual weight and emphasis of the badge.\n\n- `base`: Standard weight with moderate emphasis, suitable for most use cases.\n- `strong`: Increased visual weight for higher emphasis and prominence.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the badge.\n\n- `base`: Default size suitable for most badge use cases.\n- `large`: Larger badge for increased visibility and prominence.\n- `large-100`: Extra large badge for maximum visibility in emphasized contexts.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Badge extends PreactCustomElement implements BadgeProps {\n accessor color: BadgeProps['color'];\n accessor icon: BadgeProps['icon'];\n accessor size: BadgeProps['size'];\n accessor tone: BadgeProps['tone'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The badge component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "BadgeSlots", - "typeDefinitions": { - "BadgeSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "BadgeSlots", - "description": "The badge component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text label displayed within the badge component, typically a short status indicator or category label.", - "isOptional": true - } - ], - "value": "export interface BadgeSlots {\n /**\n * The text label displayed within the badge component, typically a short status indicator or category label.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "badge-default.png", - "description": "Create badges with different tones to represent statuses. This example shows the tones `auto` (implicit default), `info`, `success`, `caution`, `warning`, and `critical`.", - "codeblock": { - "title": "Add status badges with tones", - "tabs": [ - { - "title": "html", - "code": "<s-badge>Fulfilled</s-badge>\n<s-badge tone=\"info\">Draft</s-badge>\n<s-badge tone=\"success\">Active</s-badge>\n<s-badge tone=\"caution\">Open</s-badge>\n<s-badge tone=\"warning\">On hold</s-badge>\n<s-badge tone=\"critical\">Action required</s-badge>\n", - "language": "html", - "editable": false - }, - { - "code": "
Fulfilled\nDraft\nActive\nOpen\nOn hold\nAction required\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Combine tones with icons to provide stronger visual cues. This example shows product and inventory status badges with icons that reinforce meaning.", - "codeblock": { - "title": "Add icons to status badges", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <!-- Product status -->\n <s-stack direction=\"inline\" gap=\"base\">\n <s-badge tone=\"success\" icon=\"view\">Active</s-badge>\n <s-badge tone=\"warning\" icon=\"clock\">Scheduled</s-badge>\n <s-badge tone=\"critical\">Archived</s-badge>\n </s-stack>\n\n <!-- Inventory status -->\n <s-stack direction=\"inline\" gap=\"base\">\n <s-badge tone=\"success\">In stock</s-badge>\n <s-badge tone=\"warning\" icon=\"alert-triangle\">Low stock</s-badge>\n <s-badge tone=\"critical\">Out of stock</s-badge>\n </s-stack>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n Active\n Scheduled\n Archived\n \n\n \n \n In stock\n Low stock\n Out of stock\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place badges inside [table cells](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/table) to give merchants a scannable overview of status information. This example shows fulfillment and payment badges in an order table.", - "codeblock": { - "title": "Display badges in a table", - "tabs": [ - { - "title": "html", - "code": "<s-table>\n <s-table-header-row>\n <s-table-header>Order</s-table-header>\n <s-table-header>Fulfillment</s-table-header>\n <s-table-header>Payment</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>#1001</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Fulfilled</s-badge>\n </s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Paid</s-badge>\n </s-table-cell>\n </s-table-row>\n </s-table-body>\n</s-table>\n", - "language": "html" - }, - { - "code": "\n \n Order\n Fulfillment\n Payment\n \n \n \n #1001\n \n Fulfilled\n \n \n Paid\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `size` property to create visual hierarchy between badges. This example shows the base size for standard usage and the large size for badges that need more prominence.", - "codeblock": { - "title": "Control badge size for emphasis", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-badge size=\"base\">New</s-badge>\n <s-badge size=\"large\">Attention needed</s-badge>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n New\n Attention needed\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Banner", - "description": "The banner component highlights important information or required actions prominently within the interface. Use banner to communicate statuses, provide feedback, draw attention to critical updates, or guide users toward necessary actions.\n\nBanners support multiple tones to convey urgency levels, optional actions for next steps, and can be positioned contextually within sections or page-wide at the top. For inline status indicators on individual items, use [badge](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/badge).", - "category": "Web components", - "subCategory": "Feedback and status indicators", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/banner.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Focus on single actions:** Present one piece of information or required action per banner to maintain clarity and prevent confusion.\n- **Keep messages concise:** Write scannable content that merchants can quickly understand without spending time deciphering meaning or next steps.\n- **Provide clear actions:** Info, warning, and critical banners should include a call to action with specific next steps so merchants know how to proceed.\n- **Make dismissible when appropriate:** Allow merchants to dismiss banners unless immediate action's required. Avoid persistent banners that can't be closed.\n- **Position contextually:** Place banners outside sections for page-wide messages or inside sections for contextual messages relevant to specific content." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The dismissed state doesn't persist across page loads or sessions. You must implement your own persistence logic using local storage, cookies, or server-side state.\n- Multiple banners stack vertically without built-in prioritization or queueing. If you show multiple banners at once, all appear simultaneously. You must implement banner queueing logic yourself to show one at a time.\n- Banners can't be fixed or sticky at the top of the viewport. They scroll with page content.\n- Banners don't have built-in truncation or \"read more\" functionality. Very long banner messages will wrap to multiple lines, creating tall banners that dominate the screen." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the banner component.", - "type": "Banner", - "typeDefinitions": { - "Banner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Banner", - "description": "Configure the following properties on the banner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dismissible", - "value": "boolean", - "description": "Whether the banner displays a close button that allows users to dismiss it.\n\nWhen the close button is pressed, the `dismiss` event fires, then `hidden` is set to `true`, any animation completes, and the `afterhide` event fires.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The heading text displayed at the top of the banner.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "description": "Controls whether the banner is visible or hidden.\n\nWhen using a controlled component pattern and the banner is `dismissible`, update this property to `true` when the `dismiss` event fires.\n\nYou can hide the banner programmatically by setting this to `true` even if it's not `dismissible`.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Banner extends PreactCustomElement implements BannerProps {\n accessor heading: BannerProps['heading'];\n accessor tone: BannerProps['tone'];\n accessor hidden: BannerProps['hidden'];\n accessor dismissible: BannerProps['dismissible'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The banner component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "BannerEvents", - "typeDefinitions": { - "BannerEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "BannerEvents", - "description": "The banner component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "afterhide", - "value": "CallbackEventListener | null", - "description": "A callback fired after the banner is hidden.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "dismiss", - "value": "CallbackEventListener | null", - "description": "A callback fired when the banner is dismissed.", - "isOptional": true - } - ], - "value": "export interface BannerEvents {\n /**\n * A callback fired when the banner is dismissed.\n */\n dismiss: CallbackEventListener | null = null;\n /**\n * A callback fired after the banner is hidden.\n */\n afterhide: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The banner component supports slots for additional content placement within the banner. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "BannerSlots", - "typeDefinitions": { - "BannerSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "BannerSlots", - "description": "The banner component supports slots for additional content placement within the banner. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The main message content displayed within the banner component, providing important information or guidance to users.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "secondary-actions", - "value": "HTMLElement", - "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\"`.", - "isOptional": true - } - ], - "value": "export interface BannerSlots {\n /**\n * The main message content displayed within the banner component, providing important information or guidance to users.\n */\n children?: HTMLElement;\n /**\n * Action buttons displayed at the bottom of the banner that let users respond to the message.\n * Accepts up to two button components with `variant=\"secondary\"` or `variant=\"auto\"`.\n */\n 'secondary-actions'?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "banner-default.png", - "description": "Create an informational banner with a heading and body text. This example shows a basic banner communicating a status update that merchants can dismiss.", - "codeblock": { - "title": "Add a dismissible info banner", - "tabs": [ - { - "title": "html", - "code": "<s-banner heading=\"Order archived\" tone=\"info\" dismissible>\n This order was archived on March 7, 2017 at 3:12pm EDT.\n</s-banner>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n This order was archived on March 7, 2017 at 3:12pm EDT.\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use a warning-toned banner with secondary action [buttons](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) to highlight a problem and give merchants clear next steps. This example shows a shipping weight issue with links to review products and access a setup guide.", - "codeblock": { - "title": "Create a warning banner with buttons for next steps", - "tabs": [ - { - "title": "html", - "code": "<s-banner heading=\"127 products missing shipping weights\" tone=\"warning\">\n Products without weights may show inaccurate shipping rates, leading to\n checkout abandonment.\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n href=\"/admin/products?filter=missing-weights\"\n >\n Review products\n </s-button>\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n href=\"javascript:void(0)\"\n >\n Setup guide\n </s-button>\n</s-banner>\n", - "language": "html" - }, - { - "code": "\n Products without weights may show inaccurate shipping rates, leading to\n checkout abandonment.\n \n Review products\n \n \n Setup guide\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use a critical-toned banner to signal an urgent issue that requires immediate merchant action. This example shows a fraud review alert with [buttons](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) to review order details and adjust settings.", - "codeblock": { - "title": "Alert merchants to critical issues requiring action", - "tabs": [ - { - "title": "html", - "code": "<s-banner heading=\"Order #1024 flagged for fraud review\" tone=\"critical\">\n This order shows multiple risk indicators and cannot be auto-fulfilled. Review\n required within 24 hours to prevent automatic cancellation.\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n href=\"/admin/orders/1024/risk\"\n >\n Review order details\n </s-button>\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n href=\"/admin/settings/payments/fraud\"\n >\n Adjust fraud settings\n </s-button>\n</s-banner>\n", - "language": "html" - }, - { - "code": "\n This order shows multiple risk indicators and cannot be auto-fulfilled. Review\n required within 24 hours to prevent automatic cancellation.\n \n Review order details\n \n \n Adjust fraud settings\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use a success-toned banner with the `dismissible` property to confirm a completed operation. This example shows a product import confirmation that merchants can dismiss once acknowledged.", - "codeblock": { - "title": "Confirm a completed action with a dismissible banner", - "tabs": [ - { - "title": "html", - "code": "<s-banner heading=\"Products imported\" tone=\"success\" dismissible=\"true\">\n Successfully imported 50 products to your store.\n</s-banner>\n", - "language": "html" - }, - { - "code": "\n Successfully imported 50 products to your store.\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Box", - "description": "The box component provides a generic, flexible container for custom designs and layouts. Use box to apply styling like backgrounds, padding, borders, or border radius when existing components don't meet your needs, or to nest and group other components.\n\nBox contents maintain their natural size, making it especially useful within layout components that would otherwise stretch their children. For structured layouts, use [stack](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/stack) or [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid).", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/box.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for layout and grouping:** The component provides spacing, borders, and backgrounds for organizing content. When you need specific layout patterns like rows or columns, use [stack](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/stack) or [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid) instead. The component works best as a general-purpose container.\n- **Consider semantic alternatives first:** Before using the component, check whether a more specific component like [section](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/section) or [banner](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/banner) better describes your content's purpose. Semantic components provide better accessibility and clearer intent.\n- **Design for different screen sizes:** Layouts that work on desktop might not work on mobile. Use responsive properties to adjust spacing and layout based on available space rather than creating fixed layouts.\n- **Make interactive containers accessible:** When boxes contain interactive content or represent distinct regions, provide appropriate ARIA roles and labels so screen reader users can navigate and understand the interface structure.\n- **Avoid excessive nesting:** Deep nesting of boxes creates complex DOM structures and makes styling harder to manage. Look for opportunities to simplify your layout or use more appropriate layout components." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the box component.", - "type": "Box", - "typeDefinitions": { - "Box": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Box", - "description": "Configure the following properties on the box component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Box extends BoxElement implements BoxProps {\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The box component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "BoxSlots", - "typeDefinitions": { - "BoxSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "BoxSlots", - "description": "The box component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the box component, which serves as a flexible container for organizing and styling other components.", - "isOptional": true - } - ], - "value": "export interface BoxSlots {\n /**\n * The content displayed within the box component, which serves as a flexible container for organizing and styling other components.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "box-default.png", - "description": "Create a container with padding and optional visual styling. This example shows a plain box and a styled box with background, border, and rounded corners.", - "codeblock": { - "title": "Add a content container", - "tabs": [ - { - "title": "html", - "code": "<s-box padding=\"base\">Available for iPad, iPhone, and Android.</s-box>\n\n<s-box padding=\"base\" background=\"subdued\" border=\"base\" borderRadius=\"base\">\n Available for iPad, iPhone, and Android.\n</s-box>\n", - "language": "html", - "editable": false - }, - { - "code": "
Available for iPad, iPhone, and Android.\n\n\n Available for iPad, iPhone, and Android.\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use responsive padding values with container queries to adapt spacing based on available width. This example shows a shipping notice that adjusts its padding depending on the container size.", - "codeblock": { - "title": "Adapt spacing with responsive padding", - "tabs": [ - { - "title": "html", - "code": "<s-query-container>\n <s-box\n padding=\"@container (inline-size > 400px) base, large-200\"\n background=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n >\n <s-paragraph>Your order will be processed within 2-3 business days</s-paragraph>\n </s-box>\n</s-query-container>", - "language": "html" - }, - { - "code": "\n 400px) base, large-200\"\n background=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n >\n Your order will be processed within 2-3 business days\n \n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `accessibilityRole` property to `status` to create a live region. When your code updates the text inside this box , screen readers automatically announce the new content. Use this for any content that updates dynamically.", - "codeblock": { - "title": "Announce dynamic updates with a live region", - "tabs": [ - { - "title": "html", - "code": "<s-box\n accessibilityRole=\"status\"\n padding=\"base\"\n background=\"strong\"\n borderRadius=\"base\"\n>\n <s-paragraph>Syncing inventory: 3 of 10 products updated</s-paragraph>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n Syncing inventory: 3 of 10 products updated\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `accessibilityVisibility` property to `exclusive` to hide content visually while keeping it available to screen readers. This example shows a box with pricing context that only assistive technology users can access.", - "codeblock": { - "title": "Add screen-reader-only content", - "tabs": [ - { - "title": "html", - "code": "<s-box accessibilityVisibility=\"exclusive\">\n <s-paragraph>Price includes tax and shipping</s-paragraph>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n Price includes tax and shipping\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Nest boxes to create hierarchical layouts with distinct visual sections. This example shows an inventory status section and a product sales section organized as cards within a vertical stack.", - "codeblock": { - "title": "Build nested card layouts", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <!-- Inventory status section -->\n <s-box\n padding=\"base\"\n background=\"base\"\n borderRadius=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n >\n <s-stack gap=\"base\">\n <s-box padding=\"small-100\" background=\"subdued\" borderRadius=\"small\">\n <s-paragraph>In stock: 45 units</s-paragraph>\n </s-box>\n <s-box padding=\"small-100\" background=\"subdued\" borderRadius=\"small\">\n <s-paragraph>Low stock alert: 5 units</s-paragraph>\n </s-box>\n </s-stack>\n </s-box>\n\n <!-- Product information section -->\n <s-box\n padding=\"base\"\n background=\"base\"\n borderRadius=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n >\n <s-stack gap=\"base\">\n <s-heading>Product sales</s-heading>\n <s-paragraph color=\"subdued\">No recent sales of this product</s-paragraph>\n <s-link>View details</s-link>\n </s-stack>\n </s-box>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n In stock: 45 units\n \n \n Low stock alert: 5 units\n \n \n \n\n \n \n \n Product sales\n No recent sales of this product\n View details\n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Button", - "description": "The button component triggers actions or events, such as submitting forms, opening dialogs, or navigating to other pages. Use buttons to let users perform specific tasks or initiate interactions throughout the interface.\n\nButtons support various visual styles, tones, and interaction patterns to communicate intent and hierarchy. They can also function as links, guiding users to internal or external destinations. For navigation-focused interactions within text, use [link](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/link). For grouping multiple related buttons, use [button group](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button-group).", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/button.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Label buttons clearly:** Use strong, actionable verbs that clearly and accurately describe the action (like **Save**, **Edit**, or **Add tags**). Write labels in sentence case and avoid unnecessary words and articles (like **a**, **an**, **the**). Don't use punctuation.\n- **Use appropriate button tones:** Apply established button tones appropriately. Use critical tone only for destructive actions that are difficult or impossible to undo. Match the tone to the action's impact and importance.\n- **Establish clear hierarchy:** Prioritize the most important actions to avoid confusion. Use primary buttons for main actions, secondary buttons for supporting actions, and tertiary buttons for supplementary actions.\n- **Position consistently:** Place buttons in consistent locations throughout the interface to create predictable interaction patterns.\n- **Icon-only buttons:** For icon-only buttons, always use `accessibilityLabel` to describe the action for screen reader users." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- When using `href` for navigation, external URLs (domains outside Shopify admin) might be blocked or show security warnings depending on the extension context and merchant's browser security settings.\n- Setting `loading={true}` provides visual feedback and prevents form submission or multiple clicks. You must implement additional logic to debounce or disable the button action during async operations.\n- Icon-only buttons have a minimum touch target size but don't expand to fill available space. They maintain a fixed size based on the icon and padding, which might create layout inconsistencies if mixed with text buttons in the same container.\n- Disabled buttons (`disabled={true}`) are removed from the tab order and can't receive keyboard focus. If you disable a button temporarily (for example, while waiting for form validation), then provide visible text explaining why it's disabled. For async operations, use `loading` over `disabled` because `loading` communicates that an action is in progress." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the button component.", - "type": "Button", - "typeDefinitions": { - "Button": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Button", - "description": "Configure the following properties on the button component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the button is disabled, preventing it from being clicked or receiving focus.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether to replace the button content with a loading indicator while a background action is being performed.\n\nThis also disables the button component.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"primary\" | \"secondary\" | \"tertiary\"", - "description": "The visual appearance of the button component.\n\n- `auto`: The variant is automatically determined by the button component's context.\n- `primary`: High emphasis button for the primary action on the page. Should be used sparingly.\n- `secondary`: Medium emphasis button for secondary actions.\n- `tertiary`: Low emphasis button for less important actions.", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Button extends Button_base implements ButtonProps {\n accessor disabled: ButtonProps['disabled'];\n accessor icon: ButtonProps['icon'];\n accessor loading: ButtonProps['loading'];\n accessor variant: ButtonProps['variant'];\n accessor tone: ButtonProps['tone'];\n accessor target: ButtonProps['target'];\n accessor href: ButtonProps['href'];\n accessor download: ButtonProps['download'];\n accessor type: ButtonProps['type'];\n accessor accessibilityLabel: ButtonProps['accessibilityLabel'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The button component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ButtonEvents", - "typeDefinitions": { - "ButtonEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonEvents", - "description": "The button component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener | null", - "description": "A callback fired when the button loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "CallbackEventListener | null", - "description": "A callback fired when the button is clicked.\n\nLearn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener | null", - "description": "A callback fired when the button receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - } - ], - "value": "export interface ButtonEvents {\n /**\n * A callback fired when the button is clicked.\n *\n * Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).\n */\n click: CallbackEventListener | null = null;\n /**\n * A callback fired when the button loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener | null = null;\n /**\n * A callback fired when the button receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The button component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ButtonSlots", - "typeDefinitions": { - "ButtonSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonSlots", - "description": "The button component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The label text or elements displayed inside the button component, describing the action that will be performed when clicked.", - "isOptional": true - } - ], - "value": "export interface ButtonSlots {\n /**\n * The label text or elements displayed inside the button component, describing the action that will be performed when clicked.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "button-default.png", - "description": "Create a button with a text label to let merchants trigger an action. This example shows the basic button component with default styling.", - "codeblock": { - "title": "Add a basic button", - "tabs": [ - { - "title": "html", - "code": "<s-button>Save</s-button>\n", - "language": "html", - "editable": false - }, - { - "code": "
Save\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Create buttons for actions like saving, creating, or navigating. This example shows primary and secondary buttons with clear, action-oriented labels.", - "codeblock": { - "title": "Add primary and secondary buttons", - "tabs": [ - { - "title": "html", - "code": "<s-button variant=\"primary\">Add Product</s-button>\n<s-button variant=\"secondary\">Save Theme</s-button>\n", - "language": "html" - }, - { - "code": "Add Product\nSave Theme\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use variants to establish a clear visual hierarchy between primary, secondary, and supplementary actions. This example shows all four variant options: primary, secondary, tertiary, and auto.", - "codeblock": { - "title": "Set visual emphasis with variants", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button variant=\"primary\">Primary</s-button>\n <s-button variant=\"secondary\">Secondary</s-button>\n <s-button variant=\"tertiary\">Tertiary</s-button>\n <s-button variant=\"auto\">Auto</s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Primary\n Secondary\n Tertiary\n Auto\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Apply tones to signal the purpose and potential impact of an action through color. This example shows critical tone for destructive actions, neutral tone for less prominent actions, and the default auto tone.", - "codeblock": { - "title": "Communicate intent with tones", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button tone=\"critical\">Delete</s-button>\n <s-button tone=\"neutral\">Save draft</s-button>\n <s-button>Continue</s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Delete\n Save draft\n Continue\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Combine an icon with a text label to help merchants identify what a button does. This example shows a button with both a text label and an icon to reinforce the action.", - "codeblock": { - "title": "Add an icon alongside a text label", - "tabs": [ - { - "title": "html", - "code": "<s-button icon=\"plus\">Add product</s-button>\n", - "language": "html" - }, - { - "code": "Add product\n", - "language": "preview" - } - ] - } - }, - { - "description": "Create icon-only buttons to save space in dense interfaces like toolbars and action bars. This example shows multiple icon-only buttons with an `accessibilityLabel` for screen reader support.", - "codeblock": { - "title": "Create compact icon-only buttons for toolbars", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button\n icon=\"duplicate\"\n variant=\"tertiary\"\n accessibilityLabel=\"Duplicate product\"\n ></s-button>\n <s-button\n icon=\"view\"\n variant=\"tertiary\"\n accessibilityLabel=\"Preview product\"\n ></s-button>\n <s-button\n icon=\"menu-horizontal\"\n variant=\"tertiary\"\n accessibilityLabel=\"More actions\"\n ></s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add a loading state to prevent duplicate submissions and reassure merchants that an action is being processed. This example shows buttons with the loading prop across different variants.", - "codeblock": { - "title": "Show loading feedback during async operations", - "tabs": [ - { - "title": "html", - "code": "<!-- Product save operation -->\n<s-button loading variant=\"primary\">Saving product...</s-button>\n\n<!-- Bulk inventory update -->\n<s-button loading variant=\"secondary\">Updating 247 variants...</s-button>\n\n<!-- Order fulfillment -->\n<s-button loading tone=\"neutral\">Processing shipment...</s-button>\n", - "language": "html" - }, - { - "code": "\nSaving product...\n\n\nUpdating 247 variants...\n\n\nProcessing shipment...\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable buttons to prevent interaction when prerequisites are not met, and set type to submit to integrate with HTML forms. This example shows a disabled button alongside a submit button.", - "codeblock": { - "title": "Disable buttons and submit forms", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button disabled>Save draft</s-button>\n <s-button type=\"submit\" variant=\"primary\">Save product</s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Save draft\n Save product\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `href` property to make buttons navigate like links while maintaining button styling. This example shows internal navigation, opening external URLs in new tabs, and triggering file downloads.", - "codeblock": { - "title": "Use buttons for navigation and downloads", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button href=\"javascript:void(0)\">View products</s-button>\n <s-button href=\"javascript:void(0)\" target=\"_blank\">Help docs</s-button>\n <s-button href=\"javascript:void(0)\" download=\"sales-report.csv\">\n Export data\n </s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n View products\n Help docs\n \n Export data\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Pair a cancel button with a critical-toned action button to help merchants avoid accidental destructive operations. This example shows a confirmation pattern for deleting a resource.", - "codeblock": { - "title": "Confirm destructive actions with critical tone", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-button variant=\"secondary\">Cancel</s-button>\n <s-button variant=\"primary\" tone=\"critical\">Delete variant</s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Cancel\n Delete variant\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use `commandFor` to connect a button to another component by ID, triggering built-in actions like toggling a popover or showing a modal. This example shows a button that opens a popover with a list of additional actions.", - "codeblock": { - "title": "Trigger actions on other components", - "tabs": [ - { - "title": "html", - "code": "<s-button commandFor=\"actions-popover\">More actions</s-button>\n\n<s-popover id=\"actions-popover\">\n <s-stack direction=\"block\">\n <s-button variant=\"tertiary\">Export products</s-button>\n <s-button variant=\"tertiary\">Import products</s-button>\n <s-button variant=\"tertiary\">Print labels</s-button>\n </s-stack>\n</s-popover>\n", - "language": "html" - }, - { - "code": "More actions\n\n\n \n Export products\n Import products\n Print labels\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Button group", - "description": "The button group component displays multiple related buttons in a structured layout. Use button group to organize action buttons together, creating clear visual hierarchies and helping users understand available options.\n\nButton groups support various layouts including segmented appearances for tightly related options like view switching or filter controls. For individual actions, use [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button).", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/buttongroup.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Group related actions:** Organize related calls to action together to create clear action hierarchies and help merchants understand available options.\n- **Maintain visual hierarchy:** Use primary variants for main actions and secondary or tertiary variants for supporting actions to guide merchant attention.\n- **Limit action count:** Avoid including too many buttons, which can overwhelm merchants and create decision paralysis.\n- **Use segmented appearance for toggles:** Apply the segmented appearance for tightly related options like view switching or filter controls.\n- **Separate destructive actions:** Position destructive actions appropriately and use critical tone to prevent accidental activation." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the button group component.", - "type": "ButtonGroup", - "typeDefinitions": { - "ButtonGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroup", - "description": "Configure the following properties on the button group component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "\"base\" | \"none\"", - "description": "The spacing between buttons in the group.\n\n- `base`: Standard spacing that provides clear visual separation between buttons.\n- `none`: No spacing, creating a connected button group.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class ButtonGroup\n extends PreactCustomElement\n implements ButtonGroupProps\n{\n accessor gap: ButtonGroupProps['gap'];\n accessor accessibilityLabel: ButtonGroupProps['accessibilityLabel'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The button group component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ButtonGroupSlots", - "typeDefinitions": { - "ButtonGroupSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ButtonGroupSlots", - "description": "The button group component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The buttons displayed within the button group component, which are arranged together as a cohesive set of related actions.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "primary-action", - "value": "HTMLElement", - "description": "The main action for this group, displayed with high visual emphasis. Accepts a single button with `variant=\"primary\"`.\n\nUse this for the primary action you want users to take. This can't be used when `gap=\"none\"`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "secondary-actions", - "value": "HTMLElement", - "description": "Supporting actions displayed with less emphasis than the primary action. Accepts one or more button components with `variant=\"secondary\"` or `variant=\"auto\"`.\n\nUse these for alternative or less critical actions.", - "isOptional": true - } - ], - "value": "export interface ButtonGroupSlots {\n /**\n * The buttons displayed within the button group component, which are arranged together as a cohesive set of related actions.\n */\n children?: HTMLElement;\n /**\n * The main action for this group, displayed with high visual emphasis.\n * Accepts a single button with `variant=\"primary\"`.\n *\n * Use this for the primary action you want users to take. This can't be used when `gap=\"none\"`.\n */\n 'primary-action'?: HTMLElement;\n /**\n * Supporting actions displayed with less emphasis than the primary action.\n * Accepts one or more button components with `variant=\"secondary\"` or `variant=\"auto\"`.\n *\n * Use these for alternative or less critical actions.\n */\n 'secondary-actions'?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "buttongroup-default.png", - "description": "Group related buttons together with a primary action and secondary options. This example shows a button group with a save button and a cancel button.", - "codeblock": { - "title": "Group a primary and secondary action", - "tabs": [ - { - "title": "html", - "code": "<s-button-group>\n <s-button slot=\"primary-action\">Save</s-button>\n <s-button slot=\"secondary-actions\">Cancel</s-button>\n</s-button-group>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Save\n Cancel\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Present multiple secondary actions for operating on selected items. This example shows archive, export, and delete buttons grouped together for bulk operations.", - "codeblock": { - "title": "Add bulk action buttons", - "tabs": [ - { - "title": "html", - "code": "<s-button-group>\n <s-button slot=\"secondary-actions\">Archive</s-button>\n <s-button slot=\"secondary-actions\">Export</s-button>\n <s-button slot=\"secondary-actions\" tone=\"critical\">Delete</s-button>\n</s-button-group>\n", - "language": "html" - }, - { - "code": "\n Archive\n Export\n Delete\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add icons to grouped buttons to help merchants identify each action. This example shows duplicate, archive, and delete buttons with icons.", - "codeblock": { - "title": "Add icons to grouped buttons", - "tabs": [ - { - "title": "html", - "code": "<s-button-group>\n <s-button slot=\"secondary-actions\" icon=\"duplicate\">Duplicate</s-button>\n <s-button slot=\"secondary-actions\" icon=\"archive\">Archive</s-button>\n <s-button slot=\"secondary-actions\" icon=\"delete\" tone=\"critical\">\n Delete\n </s-button>\n</s-button-group>\n", - "language": "html" - }, - { - "code": "\n Duplicate\n Archive\n \n Delete\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Remove the gap between buttons to create a segmented control for toggling between views or options. This example shows day, week, and month buttons joined together with no spacing.", - "codeblock": { - "title": "Create a segmented button group", - "tabs": [ - { - "title": "html", - "code": "<s-button-group gap=\"none\">\n <s-button slot=\"secondary-actions\">Day</s-button>\n <s-button slot=\"secondary-actions\">Week</s-button>\n <s-button slot=\"secondary-actions\">Month</s-button>\n</s-button-group>\n", - "language": "html" - }, - { - "code": "\n Day\n Week\n Month\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Pair a cancel button with a critical action for destructive confirmation flows. This example shows a cancel and delete button grouped together for a confirmation dialog.", - "codeblock": { - "title": "Confirm a destructive action", - "tabs": [ - { - "title": "html", - "code": "<s-button-group>\n <s-button slot=\"secondary-actions\">Cancel</s-button>\n <s-button slot=\"secondary-actions\" tone=\"critical\">Delete product</s-button>\n</s-button-group>\n", - "language": "html" - }, - { - "code": "\n Cancel\n Delete product\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Checkbox", - "description": "The checkbox component provides a clear way for users to make selections, such as agreeing to terms, enabling settings, or choosing multiple items from a list. Use checkbox to create binary on/off controls or multi-select interfaces where users can select any combination of options.\n\nCheckboxes support labels, help text, error states, and an indeterminate state for \"select all\" functionality when working with grouped selections. For settings that take effect immediately, use [switch](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/switch) instead.", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/checkbox.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Ensure independence**: Each checkbox should work independently from others, allowing merchants to select any combination of options.\n- **Always include labels**: Provide descriptive labels when checkboxes activate or deactivate settings to ensure clarity.\n- **Order logically**: List checkboxes in a logical sequence like alphabetical, numerical, or time-based to help merchants find options easily.\n- **Use indeterminate state appropriately**: Apply the indeterminate state for \"select all\" functionality when only some items in a group are selected.\n- **Provide help text**: Include descriptive details text to give additional context about checkbox options when needed." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the checkbox component.", - "type": "Checkbox", - "typeDefinitions": { - "Checkbox": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Checkbox", - "description": "Configure the following properties on the checkbox component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultIndeterminate", - "value": "boolean", - "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.\n\nThis value applies until `indeterminate` is explicitly set or the user changes the checkbox state by clicking.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "indeterminate", - "value": "boolean", - "description": "Whether the checkbox displays in an indeterminate state (neither checked nor unchecked), typically used to indicate partial selection in hierarchical lists.\n\nThis visual state takes priority over the `checked` prop in appearance only. The form submission value is still determined by the `checked` prop.\n\nIf `indeterminate` has not been explicitly set and hasn't been modified by user interaction, it returns the value of `defaultIndeterminate`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked.", - "isOptional": true - } - ], - "value": "declare class Checkbox extends PreactCheckboxElement implements CheckboxProps {\n get indeterminate(): CheckboxProps['indeterminate'];\n set indeterminate(indeterminate: CheckboxProps['indeterminate']);\n accessor defaultIndeterminate: CheckboxProps['defaultIndeterminate'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The checkbox component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "CheckboxEvents", - "typeDefinitions": { - "CheckboxEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "CheckboxEvents", - "description": "The checkbox component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the checkbox value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the checkbox.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface CheckboxEvents {\n /**\n * A callback fired when the checkbox value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the checkbox.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "checkbox-default.png", - "description": "Let users toggle a single option on or off. This example displays a checkbox with a label and helper text providing additional context.", - "codeblock": { - "title": "Select an option", - "tabs": [ - { - "title": "html", - "code": "<s-checkbox\n label=\"Require a confirmation step\"\n details=\"Ensure all criteria are met before proceeding\"\n></s-checkbox>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Indicate partial selection in bulk actions. This example displays a \"select all\" checkbox in an indeterminate state when some items are checked.", - "codeblock": { - "title": "Show an indeterminate state", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"small\">\n <s-checkbox\n label=\"Select all items\"\n indeterminate\n ></s-checkbox>\n <s-divider></s-divider>\n <s-checkbox label=\"Item 1\" checked></s-checkbox>\n <s-checkbox label=\"Item 2\"></s-checkbox>\n <s-checkbox label=\"Item 3\"></s-checkbox>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate when a required selection is missing. This example displays an error message when the terms checkbox isn't checked.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-checkbox\n label=\"I agree to the terms\"\n error=\"You must accept the terms to continue\"\n></s-checkbox>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Indicate when an option isn't available. This example presents a disabled checkbox with helper text explaining how to enable it.", - "codeblock": { - "title": "Show a disabled checkbox", - "tabs": [ - { - "title": "html", - "code": "<s-checkbox\n label=\"Advanced settings\"\n disabled\n details=\"Contact your administrator to enable advanced settings\"\n></s-checkbox>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Organize related options together. This example groups multiple checkboxes in a settings panel with individual helper text.", - "codeblock": { - "title": "Group multiple checkboxes", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-checkbox label=\"Show only published products\" checked></s-checkbox>\n <s-checkbox\n label=\"Enable inventory tracking\"\n details=\"Track inventory levels and receive low stock alerts\"\n checked\n ></s-checkbox>\n <s-checkbox\n label=\"View customer data\"\n details=\"Allow staff to access customer contact information and order history\"\n ></s-checkbox>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Provide immediate feedback on required selections. This example demonstrates validation with an error message when the checkbox is unchecked.", - "codeblock": { - "title": "Validate in real time", - "tabs": [ - { - "title": "html", - "code": "<s-section>\n <s-stack gap=\"base\" justifyContent=\"start\">\n <s-text-field label=\"Name\"></s-text-field>\n <s-checkbox\n label=\"I agree to the terms\"\n error=\"You must accept the terms to continue\"\n ></s-checkbox>\n </s-stack>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Chip", - "description": "The chip component displays static labels, categories, or attributes that help classify and organize content. Use chip to show product tags, categories, or metadata near the items they describe, helping users identify items with similar properties.\n\nChips support multiple visual variants for different levels of emphasis and can include icons to provide additional visual context. For system-generated status indicators, use [badge](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/badge). For interactive or removable chips, use [clickable chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/clickable-chip).", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/chip.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use chips to label and categorize content:** Chip works best for displaying tags, statuses, and categories that help merchants quickly understand content attributes. Don't use chips for actions—they're visual indicators, not buttons. For interactive or dismissible chips, use [clickable chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/clickable-chip) instead.\n- **Keep chip text concise and scannable:** Short labels like \"Featured\" or \"On sale\" are instantly recognizable. Long chip text defeats the purpose of quick scanning and might truncate, hiding important information.\n- **Choose the right visual weight:** Use subdued chips for secondary metadata, standard chips for typical tags and categories, and strong chips for important or verified information that needs emphasis.\n- **Position chips near what they describe:** Place chips adjacent to the items they categorize for immediate context. In lists, position chips consistently to help merchants scan efficiently.\n- **Add icons to reinforce meaning:** Icons can make chip meanings clearer at a glance, especially for status indicators or commonly recognized categories." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Chip text is single-line only and truncates with an ellipsis when space is limited. There's no built-in way to show the full text on hover or through tooltips.\n- Only predefined style variants are available. Custom colors, borders, or backgrounds can't be applied to chips.\n- Icons in chips must come from the standard icon library. Custom icons, images, or other graphics aren't supported." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the chip component.", - "type": "Chip", - "typeDefinitions": { - "Chip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Chip", - "description": "Configure the following properties on the chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Chip extends PreactCustomElement implements ChipProps {\n accessor color: ChipProps['color'];\n accessor accessibilityLabel: ChipProps['accessibilityLabel'];\n constructor();\n}" - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ChipSlots", - "typeDefinitions": { - "ChipSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChipSlots", - "description": "The chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text label displayed within the chip component, typically representing a selected filter, tag, or removable item.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "graphic", - "value": "HTMLElement", - "description": "An optional icon to display at the start of the chip. Accepts only icon components.", - "isOptional": true - } - ], - "value": "export interface ChipSlots {\n /**\n * The text label displayed within the chip component, typically representing a selected filter, tag, or removable item.\n */\n children?: HTMLElement;\n /**\n * An optional icon to display at the start of the chip. Accepts only icon components.\n */\n graphic?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "chip-default.png", - "description": "Create a chip with a text label to categorize or tag content. This example shows the basic chip component with default styling.", - "codeblock": { - "title": "Add a basic chip", - "tabs": [ - { - "title": "html", - "code": "<s-chip color=\"base\" accessibilityLabel=\"Product status\">Active</s-chip>\n", - "language": "html", - "editable": false - }, - { - "code": "
Active\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use color variants to control the visual emphasis of chips. This example shows `subdued` chips for secondary metadata, `base` chips for standard tags, and `strong` chips for important information.", - "codeblock": { - "title": "Set visual weight with color variants", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-chip color=\"subdued\" accessibilityLabel=\"Secondary information\">\n Draft\n </s-chip>\n <s-chip color=\"base\" accessibilityLabel=\"Standard information\">\n Published\n </s-chip>\n <s-chip color=\"strong\" accessibilityLabel=\"Important status\">\n <s-icon slot=\"graphic\" type=\"check\" size=\"small\"></s-icon>\n Verified\n </s-chip>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Draft\n \n \n Published\n \n \n \n Verified\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Combine an icon with a text label to make chip meanings clearer. This example shows a chip with an icon in the graphic slot to visually reinforce the category.", - "codeblock": { - "title": "Add an icon to reinforce meaning", - "tabs": [ - { - "title": "html", - "code": "<s-chip color=\"strong\" accessibilityLabel=\"Product category\">\n <s-icon slot=\"graphic\" type=\"catalog-product\" size=\"small\"></s-icon>\n Electronics\n</s-chip>\n", - "language": "html" - }, - { - "code": "\n \n Electronics\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display chips with long labels in constrained spaces. This example shows how chip text automatically truncates with an ellipsis when the content exceeds the container width.", - "codeblock": { - "title": "Handle long text with truncation", - "tabs": [ - { - "title": "html", - "code": "<s-box maxInlineSize=\"200px\">\n <s-stack gap=\"base\">\n <s-chip color=\"base\" accessibilityLabel=\"Long product name\">\n This is a very long product name that will be truncated with ellipsis when\n it exceeds the container width\n </s-chip>\n <s-chip color=\"strong\" accessibilityLabel=\"Long category name\">\n <s-icon slot=\"graphic\" type=\"catalog-product\" size=\"small\"></s-icon>\n Electronics and computer accessories category with extended description\n </s-chip>\n </s-stack>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n \n This is a very long product name that will be truncated with ellipsis when\n it exceeds the container width\n \n \n \n Electronics and computer accessories category with extended description\n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Choice list", - "description": "The choice list component presents multiple options for single or multiple selections. Use it when merchants need to choose from a defined set of options, such as filtering results or collecting preferences.\n\nThe component supports both single selection (radio button behavior) and multiple selection (checkbox behavior) modes. It includes configurable labels, help text, and validation. For compact dropdown selection with four or more options, use [select](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/select).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/choicelist.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Choose appropriate selection modes:** Use single selection for mutually exclusive options like payment methods or shipping speeds. Enable `multiple` when merchants can select more than one.\n- **Write clear, specific labels:** Use choice labels that describe the outcome, like **Email notifications for new orders** rather than just **Email**. Keep labels concise but descriptive enough that merchants understand each option without additional explanation.\n- **Write clear titles:** Use titles that pose a clear question or statement, like **Which shipping method?** or **Select notification preferences**. Avoid vague titles like **Options** or **Settings**.\n- **Add context to complex choices:** Use the `details` slot on individual choices (for example, ``) to explain implications when needed.\n- **Provide actionable validation:** Show specific error messages like **Please select at least one notification preference** rather than generic **Required field**." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't include search, filtering, or lazy loading. For large option sets (20+ choices), consider using a [select](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/select) dropdown instead.\n- Rendering 50+ checkboxes or radio buttons can cause noticeable performance issues, especially on mobile devices. Consider pagination, virtualization, or alternative UI patterns for large lists.\n- The component is either single-selection (radio buttons) or multiple-selection (checkboxes) for all choices. You can't mix both types in the same list.\n- Component types other than choice can't be used as options within the choice list." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the choice list component.", - "type": "ChoiceList", - "typeDefinitions": { - "ChoiceList": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceList", - "description": "Configure the following properties on the choice list component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@16010", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction. When `true`, the `disabled` property on any child choices is ignored.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple choices can be selected.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "values", - "value": "string[]", - "description": "An array of `value` attributes for the currently selected options. When provided, this property automatically sets the `selected` state on child option components that have matching `value` attributes. Options with values included in this array will be marked as selected, while others will be unselected.", - "isOptional": true - } - ], - "value": "declare class ChoiceList extends BaseClass$3 implements ChoiceListProps {\n accessor disabled: ChoiceListProps['disabled'];\n accessor name: ChoiceListProps['name'];\n accessor error: ChoiceListProps['error'];\n accessor details: ChoiceListProps['details'];\n accessor multiple: ChoiceListProps['multiple'];\n accessor label: ChoiceListProps['label'];\n accessor labelAccessibilityVisibility: ChoiceListProps['labelAccessibilityVisibility'];\n get values(): ChoiceListProps['values'];\n set values(values: ChoiceListProps['values']);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The choice list component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ChoiceListEvents", - "typeDefinitions": { - "ChoiceListEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceListEvents", - "description": "The choice list component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener | null", - "description": "A callback fired when the choice list selection changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener | null", - "description": "A callback fired when the user inputs data into the choice list.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface ChoiceListEvents {\n /**\n * A callback fired when the choice list selection changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener | null = null;\n /**\n * A callback fired when the user inputs data into the choice list.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "type": "Choice", - "typeDefinitions": { - "Choice": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Choice", - "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.\n\nChoice components support labels, help text, and custom content through slots, providing flexible option presentation within choice lists.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\".", - "isOptional": true - } - ], - "value": "declare class Choice extends PreactCustomElement implements ChoiceProps {\n accessor disabled: ChoiceProps['disabled'];\n get selected(): boolean;\n set selected(selected: ChoiceProps['selected']);\n accessor value: ChoiceProps['value'];\n accessor accessibilityLabel: ChoiceProps['accessibilityLabel'];\n accessor defaultSelected: ChoiceProps['defaultSelected'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The choice list component supports slots for additional content placement within each choice. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ChoiceSlots", - "typeDefinitions": { - "ChoiceSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ChoiceSlots", - "description": "The choice list component supports slots for additional content placement within each choice. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The label text or elements that identify this selectable choice to users.\n\nThe label is produced by extracting and concatenating the text nodes from the provided content; any markup or element structure is ignored.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "details", - "value": "HTMLElement", - "description": "Additional text to provide context or guidance for the input.\n\nThis text is displayed along with the input and its label to offer more information or instructions to the user.", - "isOptional": true - } - ], - "value": "export interface ChoiceSlots {\n /**\n * The label text or elements that identify this selectable choice to users.\n *\n * The label is produced by extracting and\n * concatenating the text nodes from the provided content;\n * any markup or element structure is ignored.\n */\n children?: HTMLElement;\n /**\n * Additional text to provide context or guidance for the input.\n *\n * This text is displayed along with the input and its label\n * to offer more information or instructions to the user.\n *\n * @implementation this content should be linked to the input with an `aria-describedby` attribute.\n */\n details?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "choicelist-default.png", - "description": "Present a group of options for merchants to choose from using radio buttons. This example shows a single-select choice list component with a label, help text, and an `onChange` handler.", - "codeblock": { - "title": "Add a single-select choice list", - "tabs": [ - { - "title": "html", - "code": "<script>\n const handleChange = (event) =>\n console.log('Values: ', event.currentTarget.values);\n</script>\n<s-choice-list\n label=\"Company name\"\n name=\"Company name\"\n details=\"The company name will be displayed on the checkout page.\"\n onChange=\"handleChange(event)\"\n>\n <s-choice value=\"hidden\">Hidden</s-choice>\n <s-choice value=\"optional\">Optional</s-choice>\n <s-choice value=\"required\">Required</s-choice>\n</s-choice-list>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n\n Hidden\n Optional\n Required\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Set a default selection so merchants see a pre-selected option when the form loads. This example shows a single-select choice list with one option already selected.", - "codeblock": { - "title": "Pre-select a default option", - "tabs": [ - { - "title": "html", - "code": "<s-choice-list label=\"Product visibility\" name=\"visibility\">\n <s-choice value=\"hidden\">Hidden</s-choice>\n <s-choice value=\"optional\">Optional</s-choice>\n <s-choice value=\"required\" selected>Required</s-choice>\n</s-choice-list>\n", - "language": "html" - }, - { - "code": "\n Hidden\n Optional\n Required\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Allow merchants to select more than one option using checkboxes instead of radio buttons. This example shows a multi-select choice list with descriptive details on each option.", - "codeblock": { - "title": "Enable multiple selections with details", - "tabs": [ - { - "title": "html", - "code": "<s-choice-list label=\"Checkout options\" name=\"checkout\" multiple>\n <s-choice value=\"shipping\" selected>\n Use the shipping address as the billing address by default\n <s-text slot=\"details\">\n Reduces the number of fields required to check out. The billing address\n can still be edited.\n </s-text>\n </s-choice>\n <s-choice value=\"confirmation\">\n Require a confirmation step\n <s-text slot=\"details\">\n Customers must review their order details before purchasing.\n </s-text>\n </s-choice>\n</s-choice-list>\n", - "language": "html" - }, - { - "code": "\n \n Use the shipping address as the billing address by default\n \n Reduces the number of fields required to check out. The billing address\n can still be edited.\n \n \n \n Require a confirmation step\n \n Customers must review their order details before purchasing.\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display an error message when a selection is invalid or a required choice has not been made. This example shows a choice list with a static error message.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-choice-list\n label=\"Product visibility\"\n error=\"Please select an option\"\n>\n <s-choice value=\"hidden\">Hidden</s-choice>\n <s-choice value=\"optional\">Optional</s-choice>\n <s-choice value=\"required\">Required</s-choice>\n</s-choice-list>\n", - "language": "html" - }, - { - "code": "\n Hidden\n Optional\n Required\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable a choice list to prevent interaction while keeping the current selection visible. This example shows a disabled choice list with a pre-selected option.", - "codeblock": { - "title": "Disable a choice list", - "tabs": [ - { - "title": "html", - "code": "<s-choice-list label=\"Account type\" name=\"account-type\" disabled>\n <s-choice value=\"basic\" selected>Basic</s-choice>\n <s-choice value=\"advanced\">Advanced</s-choice>\n <s-choice value=\"enterprise\">Enterprise</s-choice>\n</s-choice-list>\n", - "language": "html" - }, - { - "code": "\n Basic\n Advanced\n Enterprise\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Clickable", - "description": "The clickable component wraps content to make it interactive and clickable. Use it when you need more styling control than [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) or [link](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/link) provide, such as custom backgrounds, padding, or borders around your clickable content.\n\nClickable supports button, link, and submit modes with built-in accessibility properties for keyboard navigation and screen reader support.", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/clickable.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Provide accessibility labels:** Always include `accessibilityLabel` for elements without visible text to ensure screen reader users understand the element's purpose.\n- **Choose appropriate modes:** Use button mode for triggering actions, link mode for navigation, and submit mode for form submissions.\n- **Indicate disabled state:** When disabling clickable elements, provide clear visual feedback and explanatory text about why the element's unavailable." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the clickable component.", - "type": "Clickable", - "typeDefinitions": { - "Clickable": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Clickable", - "description": "Configure the following properties on the clickable component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "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 shouldapply disabled styling as needed.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the component is in a loading state, which indicates to assistive technology that an action is in progress and prevents interaction.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"button\" | \"reset\" | \"submit\"", - "description": "The behavior of the button component.\n\n- `button`: Used to indicate the component acts as a button, meaning it has no default action.\n- `reset`: Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n- `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "defaultValue": "'button'", - "isOptional": true - } - ], - "value": "declare class Clickable extends Clickable_base implements ClickableProps {\n accessor disabled: ClickableProps['disabled'];\n accessor loading: ClickableProps['loading'];\n accessor target: ClickableProps['target'];\n accessor href: ClickableProps['href'];\n accessor download: ClickableProps['download'];\n accessor type: ClickableProps['type'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The clickable component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ClickableEvents", - "typeDefinitions": { - "ClickableEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableEvents", - "description": "The clickable component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener | null", - "description": "A callback fired when the component loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "CallbackEventListener | null", - "description": "A callback fired when the component is clicked.\n\nLearn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener | null", - "description": "A callback fired when the component receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - } - ], - "value": "export interface ClickableEvents {\n /**\n * A callback fired when the component is clicked.\n *\n * Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).\n */\n click: CallbackEventListener | null = null;\n /**\n * A callback fired when the component loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener | null = null;\n /**\n * A callback fired when the component receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The clickable component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ClickableSlots", - "typeDefinitions": { - "ClickableSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableSlots", - "description": "The clickable component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the clickable component, which makes any content interactive and clickable without the semantic meaning of a button or link.", - "isOptional": true - } - ], - "value": "export interface ClickableSlots {\n /**\n * The content displayed within the clickable component, which makes any content interactive and clickable without the semantic meaning of a button or link.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "clickable-default.png", - "description": "Build custom interactive elements with flexible styling that [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) or [link](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/link) don't support. This example shows two clickable elements with different background and border styles.", - "codeblock": { - "title": "Create a custom interactive element", - "tabs": [ - { - "title": "html", - "code": "<s-clickable padding=\"base\">Create Store</s-clickable>\n\n<s-clickable\n border=\"base\"\n padding=\"base\"\n background=\"subdued\"\n borderRadius=\"base\"\n>\n View Shipping Settings\n</s-clickable>\n", - "language": "html", - "editable": false - }, - { - "code": "
Create Store\n\n\n View Shipping Settings\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Set the `href` property to make a clickable element navigate like a link. This example shows a clickable component that opens a URL in a new browser tab.", - "codeblock": { - "title": "Navigate to a URL", - "tabs": [ - { - "title": "html", - "code": "<s-clickable href=\"javascript:void(0)\" target=\"_blank\">\n Visit Shopify\n</s-clickable>\n", - "language": "html" - }, - { - "code": "\n Visit Shopify\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use a clickable component as a form submit button with a disabled state to prevent premature submission. This example shows a disabled submit-type clickable component with a border and padding.", - "codeblock": { - "title": "Create a form submit button", - "tabs": [ - { - "title": "html", - "code": "<s-clickable type=\"submit\" disabled border=\"base\" padding=\"base\">\n Save changes\n</s-clickable>\n", - "language": "html" - }, - { - "code": "\n Save changes\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add a clickable button alongside descriptive content in a section. This example shows a styled clickable button inside a box with a heading and description.", - "codeblock": { - "title": "Add a clickable action to a section", - "tabs": [ - { - "title": "html", - "code": "<s-box padding=\"large-400\" background=\"base\" borderRadius=\"small-200\">\n <s-stack gap=\"large-300\">\n <s-heading>Product settings</s-heading>\n <s-text>Configure your product inventory and pricing settings.</s-text>\n <s-clickable background=\"base\" padding=\"base\" borderRadius=\"small\">\n <s-text type=\"strong\">Configure settings</s-text>\n </s-clickable>\n </s-stack>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n Product settings\n Configure your product inventory and pricing settings.\n \n Configure settings\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add an accessibility label to provide screen readers with more context than the visible text alone. This example shows a clickable delete button with a descriptive label for assistive technologies.", - "codeblock": { - "title": "Add an accessibility label", - "tabs": [ - { - "title": "html", - "code": "<s-clickable\n accessibilityLabel=\"Delete product winter collection jacket\"\n background=\"base\"\n padding=\"base\"\n borderRadius=\"small\"\n>\n <s-text>Delete</s-text>\n</s-clickable>\n", - "language": "html" - }, - { - "code": "\n Delete\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable a clickable link while providing an accessibility label that explains why the feature is unavailable. This example shows a disabled navigation element with a descriptive label for screen readers.", - "codeblock": { - "title": "Describe a disabled link with an accessibility label", - "tabs": [ - { - "title": "html", - "code": "<s-clickable\n href=\"javascript:void(0)\"\n disabled\n accessibilityLabel=\"This link is currently unavailable\"\n>\n <s-text>Unavailable feature</s-text>\n</s-clickable>\n", - "language": "html" - }, - { - "code": "\n Unavailable feature\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Clickable chip", - "description": "The clickable chip component displays interactive labels or categories that users can click or remove. Use clickable chip to show filter tags, selected options, or merchant-created labels that users need to interact with or dismiss.\n\nClickable chips support multiple visual variants, optional icons, and can function as both clickable buttons and removable tags for flexible interaction patterns. For non-interactive labels, use [chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/chip).", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/clickable-chip.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Keep labels to 1-3 words:** Aim for labels like **Electronics**, **Summer sale**, or **Clearance items**.\n- **Choose color variants by importance:** Use `subdued` for less important or secondary chips, `base` (default) for standard selections, and `strong` to emphasize primary or active selections.\n- **Make remove action clear:** When chips are removable, ensure the remove button's visible and has clear hover/focus states.\n- **Group related chips together:** Use an inline [stack](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/stack) to arrange multiple chips horizontally with consistent spacing." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the clickable chip component.", - "type": "ClickableChip", - "typeDefinitions": { - "ClickableChip": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChip", - "description": "Configure the following properties on the clickable chip component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "ColorKeyword", - "description": "The color emphasis level that controls visual intensity.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the chip is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hidden", - "value": "boolean", - "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.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "removable", - "value": "boolean", - "description": "Whether the chip displays a remove button for dismissal. When clicked, the `remove` callback fires.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class ClickableChip\n extends ClickableChip_base\n implements ClickableChipProps\n{\n accessor color: ClickableChipProps['color'];\n accessor accessibilityLabel: ClickableChipProps['accessibilityLabel'];\n accessor removable: ClickableChipProps['removable'];\n accessor hidden: ClickableChipProps['hidden'];\n accessor disabled: ClickableChipProps['disabled'];\n accessor href: ClickableChipProps['href'];\n constructor();\n}" - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The clickable chip component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ClickableChipEvents", - "typeDefinitions": { - "ClickableChipEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChipEvents", - "description": "The clickable chip component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "afterhide", - "value": "CallbackEventListener | null", - "description": "A callback fired after the chip is hidden.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "CallbackEventListener | null", - "description": "A callback fired when the chip is clicked.\n\nLearn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "remove", - "value": "CallbackEventListener | null", - "description": "A callback fired when the chip is removed.", - "isOptional": true - } - ], - "value": "export interface ClickableChipEvents {\n /**\n * A callback fired when the chip is clicked.\n *\n * Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).\n */\n click: CallbackEventListener | null = null;\n /**\n * A callback fired when the chip is removed.\n */\n remove: CallbackEventListener | null = null;\n /**\n * A callback fired after the chip is hidden.\n */\n afterhide: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The clickable chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ClickableChipSlots", - "typeDefinitions": { - "ClickableChipSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickableChipSlots", - "description": "The clickable chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text label displayed within the chip, which represents an interactive filter, tag, or selectable item.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "graphic", - "value": "HTMLElement", - "description": "An optional icon to display at the start of the chip. Accepts only icon components.", - "isOptional": true - } - ], - "value": "export interface ClickableChipSlots {\n /**\n * The text label displayed within the chip, which represents an interactive filter, tag, or selectable item.\n */\n children?: HTMLElement;\n /**\n * An optional icon to display at the start of the chip. Accepts only icon components.\n */\n graphic?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "clickablechip-default.png", - "description": "Create an interactive chip that merchants can click to trigger an action. This example shows a clickable chip component with default styling.", - "codeblock": { - "title": "Add a clickable chip with default styling", - "tabs": [ - { - "title": "html", - "code": "<s-clickable-chip>Clickable chip</s-clickable-chip>\n", - "language": "html", - "editable": false - }, - { - "code": "
Clickable chip\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `color` property to visually distinguish chips by importance or category. This example shows three chips with `base`, `subdued`, and `strong` color variants.", - "codeblock": { - "title": "Apply color variants to chips", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-clickable-chip color=\"base\" accessibilityLabel=\"Filter by active products\">\n Active\n </s-clickable-chip>\n <s-clickable-chip\n color=\"subdued\"\n accessibilityLabel=\"Filter by draft products\"\n >\n Draft\n </s-clickable-chip>\n <s-clickable-chip\n color=\"strong\"\n accessibilityLabel=\"Filter by archived products\"\n >\n Archived\n </s-clickable-chip>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Active\n \n \n Draft\n \n \n Archived\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add an icon and a remove button so merchants can see the status and dismiss the chip. This example shows a removable chip with a check circle icon in the graphic slot.", - "codeblock": { - "title": "Add an icon and a remove button to a chip", - "tabs": [ - { - "title": "html", - "code": "<s-clickable-chip\n color=\"strong\"\n accessibilityLabel=\"Remove status filter\"\n removable\n>\n <s-icon slot=\"graphic\" type=\"check-circle\"></s-icon>\n In progress\n</s-clickable-chip>\n", - "language": "html" - }, - { - "code": "\n \n In progress\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `href` property to make a chip link to another page when clicked. This example shows a subdued chip with a product icon that acts as a link.", - "codeblock": { - "title": "Use a chip as a link", - "tabs": [ - { - "title": "html", - "code": "<s-clickable-chip\n color=\"subdued\"\n href=\"javascript:void(0)\"\n accessibilityLabel=\"View T-shirt product\"\n>\n <s-icon slot=\"graphic\" type=\"product\"></s-icon>\n T-shirt\n</s-clickable-chip>\n", - "language": "html" - }, - { - "code": "\n \n T-shirt\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable a chip to prevent interaction while keeping it visible. This example shows a disabled chip with an accessibility label explaining the inactive state.", - "codeblock": { - "title": "Disable a clickable chip", - "tabs": [ - { - "title": "html", - "code": "<s-clickable-chip\n color=\"base\"\n disabled\n accessibilityLabel=\"Status filter (disabled)\"\n>\n Inactive\n</s-clickable-chip>\n", - "language": "html" - }, - { - "code": "\n Inactive\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Color field", - "description": "The color field component allows users to select colors through an integrated color picker or direct text input. Use color field for theme colors, brand colors, or any color selection to provide both visual and text-based color input methods.\n\nColor fields support hex color codes, color preview swatches, and validation to ensure users select or enter valid color values. For a standalone visual color palette interface without text input, use [color picker](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/color-picker).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/color-field.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Label by specific purpose:** Use labels that describe exactly what the color affects (**Button background color**, **Heading text color**, or **Border accent color** rather than generic **Color**).\n- **Pre-populate when editing:** Always show the current color value when editing existing settings so merchants understand what they're changing from." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component always outputs values in hex format. While it accepts multiple input formats (hex, RGB, HSL), the `change` event emits values in hex: 6-digit (`#RRGGBB`) or 8-digit with alpha (`#RRGGBBAA`)." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the color field component.", - "type": "ColorField", - "typeDefinitions": { - "ColorField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorField", - "description": "Configure the following properties on the color field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\"", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setInternalValue", - "value": "(value: string, normalize: boolean) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format.", - "isOptional": true - } - ], - "value": "declare class ColorField\n extends PreactFieldElement\n implements ColorFieldProps\n{\n accessor alpha: ColorFieldProps['alpha'];\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n constructor();\n /** @private */\n setInternalValue(value: string, normalize: boolean): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The color field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ColorFieldEvents", - "typeDefinitions": { - "ColorFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorFieldEvents", - "description": "The color field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the color field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the color field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the color field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the color field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface ColorFieldEvents {\n /**\n * A callback fired when the color field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the color field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the color field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the color field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "color-field-default.png", - "description": "Display a labeled color field with a pre-selected hex value.", - "codeblock": { - "title": "Pick a color", - "tabs": [ - { - "title": "html", - "code": "<s-color-field\n label=\"Brand color\"\n value=\"#FF0000\"\n></s-color-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Identify the color field's purpose clearly. This example displays a labeled color field with a name attribute for form submission.", - "codeblock": { - "title": "Add a label", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field label=\"Brand color\" name=\"color\" value=\"#FF0000\"></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Ensure users provide a color value before submitting. This example presents a required color field that must have a value.", - "codeblock": { - "title": "Mark as required", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field label=\"Brand color\" value=\"#FF0000\" required></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Allow selection of semi-transparent colors. This example displays a color field with alpha enabled, presenting an RGBA value with 50% opacity.", - "codeblock": { - "title": "Enable alpha transparency", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field\n label=\"Background color\"\n value=\"rgba(255, 0, 0, 0.5)\"\n alpha\n ></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate color format problems clearly. This example demonstrates an error message when an invalid hex code is entered.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field\n label=\"Brand color\"\n name=\"brandColor\"\n value=\"#invalid\"\n error=\"Please enter a valid color format (hex, rgb, or rgba)\"\n required\n ></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Guide users on how the color will be used. This example adds helper text beneath the field explaining the color's purpose.", - "codeblock": { - "title": "Add helper text", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field\n label=\"Primary color\"\n value=\"#1a73e8\"\n details=\"Main brand color used for buttons and links\"\n ></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Show a color value without allowing changes. This example presents a read-only color field displaying a locked value.", - "codeblock": { - "title": "Show a read-only field", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-color-field label=\"System color\" name=\"color\" value=\"#1a73e8\" readOnly></s-color-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Build a complete theme customization interface. This example combines multiple color fields for primary, secondary, and overlay colors with helper text.", - "codeblock": { - "title": "Combine multiple fields in a form", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-section>\n <s-heading>Theme settings</s-heading>\n <s-stack gap=\"base\">\n <s-color-field\n label=\"Primary brand color\"\n name=\"primaryColor\"\n value=\"#1a73e8\"\n defaultValue=\"#1a73e8\"\n details=\"This color will be used for buttons, links, and brand elements\"\n required\n ></s-color-field>\n <s-color-field\n label=\"Secondary color\"\n name=\"secondaryColor\"\n value=\"#34a853\"\n details=\"Used for secondary actions and accents\"\n ></s-color-field>\n <s-color-field\n label=\"Background overlay\"\n name=\"overlayColor\"\n value=\"rgba(0, 0, 0, 0.5)\"\n alpha\n details=\"Background color for modal overlays and dropdowns\"\n ></s-color-field>\n </s-stack>\n </s-section>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Theme settings\n \n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - }, - { - "title": "", - "examples": [ - { - "description": "Provide immediate feedback on color format validity. This example demonstrates real-time validation that checks hex format as the user types.", - "codeblock": { - "title": "Validate in real time", - "tabs": [ - { - "title": "html", - "code": "<s-section>\n <s-stack gap=\"base\" justifyContent=\"start\">\n <s-text-field label=\"Theme name\"></s-text-field>\n <s-color-field\n label=\"Brand color\"\n name=\"Color\"\n value=\"#invalid\"\n error=\"Please enter a valid color format\"\n required\n ></s-color-field>\n </s-stack>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Color picker", - "description": "The color picker component allows users to select colors from a visual color palette interface. Use color picker to provide an intuitive, visual way for users to choose colors for themes, branding, or design customization.\n\nColor pickers support multiple color formats, predefined color swatches, and interactive selection to make color choice easy and accurate. For combined visual and text-based color input with validation, use [color field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/color-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/color-picker.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Initialize with current values:** When editing existing colors, always set the picker's initial value to the current color. This shows merchants what they're changing from and maintains context.\n- **Show preview of final result:** If possible, show how the selected color will look in its actual context (like previewing a button color on a button) alongside the picker.\n- **Pair with color field for precision:** Use the component for visual selection combined with a [color field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/color-field) for precise hex input. This gives merchants both visual intuition and exact control." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The 2D color gradient area requires mouse/touch interaction. Keyboard users can only navigate between major UI elements (hue slider, alpha slider) but can't make fine-grained color adjustments in the gradient itself.\n- The picker operates in the HSL color space and outputs values in hex format. Colors from other color spaces (like CMYK or LAB) might not be precisely represented, and might shift during conversion.\n- On touch devices, selecting precise colors in the gradient can be difficult due to finger size obscuring the selection point. The picker works best with mouse or stylus input for fine color selection." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the color picker component.", - "type": "ColorPicker", - "typeDefinitions": { - "ColorPicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPicker", - "description": "Configure the following properties on the color picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@16111", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alpha", - "value": "boolean", - "description": "Whether to enable alpha (transparency) channel selection in the color picker, allowing users to choose semi-transparent colors.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected color value. Accepts multiple input formats:\n\n- Hex: `#RGB`, `#RRGGBB`, `#RRGGBBAA` (3, 6, or 8 digits)\n- RGB/RGBA: `rgb(255, 0, 0)` or `rgb(255 0 0)` (comma or space-separated)\n- HSL/HSLA: `hsl(0, 100%, 50%)` or `hsl(0 100% 50%)`\n\nReturns an empty string if the value is invalid. The `change` event always emits values in hex format.", - "isOptional": true - } - ], - "value": "declare class ColorPicker extends BaseClass$2 implements ColorPickerProps {\n accessor alpha: boolean;\n accessor name: string;\n accessor defaultValue: string;\n get value(): string;\n set value(value: string);\n /**\n * A callback that fires when the containing form is reset (using the form's `reset()` method or a reset button). When triggered, the component's `value` reverts to its `defaultValue`.\n */\n formResetCallback(): void;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The color picker component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ColorPickerEvents", - "typeDefinitions": { - "ColorPickerEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ColorPickerEvents", - "description": "The color picker component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener | null", - "description": "A callback fired when the color picker value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener | null", - "description": "A callback fired when the user inputs data into the color picker.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface ColorPickerEvents {\n /**\n * A callback fired when the color picker value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener | null = null;\n /**\n * A callback fired when the user inputs data into the color picker.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "color-picker-default.png", - "description": "Display the default color picker with hue and saturation controls.", - "codeblock": { - "title": "Pick a color", - "tabs": [ - { - "title": "html", - "code": "<s-color-picker value=\"#FF0000\"></s-color-picker>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Allow users to select semi-transparent colors. This example displays a color picker with an alpha slider for adjusting opacity levels.", - "codeblock": { - "title": "Enable alpha transparency", - "tabs": [ - { - "title": "html", - "code": "<s-box padding=\"large\" border=\"base\" borderRadius=\"base\">\n <s-color-picker\n value=\"#FF0000FF\"\n alpha\n name=\"color-with-alpha\"\n ></s-color-picker>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Date field", - "description": "The date field component captures date input with a consistent interface for date selection and proper validation. Use it to collect date information in forms, scheduling interfaces, or data entry workflows.\n\nThe component supports manual text entry. For visual calendar-based selection, consider using [date picker](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/date-picker).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/datefield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use smart defaults:** Pre-populate fields with sensible dates when editing existing data or suggesting common selections.\n- **Restrict dates appropriately:** Use the `allow` and `disallow` properties to restrict selectable dates for your use case (like only future dates for scheduling or only weekdays for business operations).\n- **Explain date constraints:** Use the `details` property to clarify requirements like \"Select a date within the next 30 days\" or \"Must be a future date.\"\n- **Write actionable error messages:** Provide clear validation messages for invalid dates that help merchants correct their input." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the date field component.", - "type": "DateField", - "typeDefinitions": { - "DateField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateField", - "description": "Configure the following properties on the date field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "DateAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date in `YYYY-MM-DD` format. An empty string means no date is selected.", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`.", - "isOptional": true - } - ], - "value": "declare class DateField\n extends PreactFieldElement\n implements DateFieldProps\n{\n accessor allow: DateFieldProps['allow'];\n accessor disallow: DateFieldProps['disallow'];\n accessor allowDays: DateFieldProps['allowDays'];\n accessor disallowDays: DateFieldProps['disallowDays'];\n set view(view: string);\n get view(): string;\n accessor defaultView: DateFieldProps['defaultView'];\n constructor();\n}" - }, - "DateAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DateAutocompleteField", - "value": "'bday-day' | 'bday-month' | 'bday-year' | 'bday' | 'cc-expiry-month' | 'cc-expiry-year' | 'cc-expiry'", - "description": "Represents autocomplete values that are valid for date input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for date-based inputs.\n\nAvailable values:\n- `bday` - Complete birthday date\n- `bday-day` - Day component of a birthday (1-31)\n- `bday-month` - Month component of a birthday (1-12)\n- `bday-year` - Year component of a birthday (1990)\n- `cc-expiry` - Complete credit card expiration date\n- `cc-expiry-month` - Month component of a credit card expiration date (1-12)\n- `cc-expiry-year` - Year component of a credit card expiration date (2025)", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The date field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "DateFieldEvents", - "typeDefinitions": { - "DateFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DateFieldEvents", - "description": "The date field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the date field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the date field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the date field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the date field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "invalid", - "value": "CallbackEventListener | null", - "description": "A callback fired when the date field value is invalid.\n\nLearn more about the [invalid event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "viewchange", - "value": "CallbackEventListener | null", - "description": "A callback fired when the calendar view changes (such as when navigating between months).", - "isOptional": true - } - ], - "value": "export interface DateFieldEvents {\n /**\n * A callback fired when the date field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the date field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the date field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the date field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n /**\n * A callback fired when the calendar view changes (such as when navigating between months).\n */\n viewchange: CallbackEventListener | null = null;\n /**\n * A callback fired when the date field value is invalid.\n *\n * Learn more about the [invalid event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/invalid_event).\n */\n invalid: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "datefield-default.png", - "description": "Add a date field to let merchants select a date using a built-in calendar picker. This example shows a basic date field with a default view and pre-selected value.", - "codeblock": { - "title": "Add a basic date field", - "tabs": [ - { - "title": "html", - "code": "<s-date-field defaultView=\"2025-09\" defaultValue=\"2025-09-01\"></s-date-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Collect a date from merchants with a labeled input and placeholder text. This example shows a date field configured with a label, name, and placeholder.", - "codeblock": { - "title": "Collect a date with a label and placeholder", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Order date\"\n name=\"orderDate\"\n placeholder=\"Select date\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Pre-populate a date field so merchants can review or edit a provided date. This example shows a date field with a value already set.", - "codeblock": { - "title": "Pre-populate with an existing date", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Shipping date\"\n name=\"shippingDate\"\n value=\"2024-03-15\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Restrict which days of the week merchants can select, such as excluding weekends. This example shows a date field that only allows weekday selections.", - "codeblock": { - "title": "Restrict selectable days of the week", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Delivery date\"\n name=\"deliveryDate\"\n disallowDays=\"[0, 6]\"\n details=\"Delivery available Monday through Friday only\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Limit selection to a specific set of dates, such as available appointment slots. This example shows a date field that only allows dates from a predefined list.", - "codeblock": { - "title": "Allow only specific dates", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Available appointment dates\"\n name=\"appointmentDate\"\n allow='[\"2024-03-20\", \"2024-03-22\", \"2024-03-25\", \"2024-03-27\"]'\n details=\"Select from available time slots\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display an error message when a required date is missing or an invalid date is entered. This example shows a date field with a static error and the required attribute.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Event date\"\n name=\"eventDate\"\n required\n error=\"Select a valid event date\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Prevent editing by making a date field read-only or fully disabled. This example shows a read-only field for viewing a creation date and a disabled field for an archived date.", - "codeblock": { - "title": "Disable or make a date field read-only", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-date-field\n label=\"Creation date\"\n name=\"createdDate\"\n value=\"2024-01-01\"\n readOnly\n ></s-date-field>\n\n <s-date-field\n label=\"Archived date\"\n name=\"archivedDate\"\n value=\"2024-02-15\"\n disabled\n ></s-date-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Combine date fields with other form elements like text fields and buttons. This example shows a complete order form with a required date, a weekday-restricted delivery date, and a submit button.", - "codeblock": { - "title": "Use date fields in a form", - "tabs": [ - { - "title": "html", - "code": "<form>\n <s-stack gap=\"base\">\n <s-text-field\n label=\"Customer name\"\n name=\"customerName\"\n required\n ></s-text-field>\n\n <s-date-field\n label=\"Order date\"\n name=\"orderDate\"\n value=\"2024-03-15\"\n required\n ></s-date-field>\n\n <s-date-field\n label=\"Requested delivery date\"\n name=\"deliveryDate\"\n disallowDays=\"[0, 6]\"\n details=\"Weekdays only\"\n ></s-date-field>\n\n <s-button type=\"submit\" variant=\"primary\">Process order</s-button>\n </s-stack>\n</form>\n", - "language": "html" - }, - { - "code": "\n \n \n\n \n\n \n\n Process order\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Pair two date fields to let merchants define a start and end date for a range. This example shows side-by-side date fields for selecting a report period.", - "codeblock": { - "title": "Select a date range with two fields", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-heading>Sales report period</s-heading>\n\n <s-stack direction=\"inline\" gap=\"base\">\n <s-date-field\n label=\"Start date\"\n name=\"startDate\"\n id=\"report-start\"\n ></s-date-field>\n\n <s-date-field\n label=\"End date\"\n name=\"endDate\"\n id=\"report-end\"\n ></s-date-field>\n </s-stack>\n\n <s-button variant=\"primary\">Generate report</s-button>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Sales report period\n\n \n \n\n \n \n\n Generate report\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Validate a date field in real time and update the error message as the merchant interacts. This example shows a required date field that clears its error once a valid date is selected.", - "codeblock": { - "title": "Validate a date field dynamically", - "tabs": [ - { - "title": "html", - "code": "<s-date-field\n label=\"Event date\"\n name=\"eventDate\"\n required\n error=\"Select a valid event date\"\n></s-date-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Date picker", - "description": "The date picker component allows merchants to select dates using a calendar interface. Use it when merchants benefit from seeing dates in context of the full month, such as selecting dates relative to today or needing weekday context.\n\nThe component supports single dates, multiple dates, and date ranges. For text date entry, use [date field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/date-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/datepicker.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use smart defaults:** Pre-populate the picker with sensible dates to speed up the selection process.\n- **Provide quick selections:** Offer preset date options for common selections (like **Today**, **Last 7 days**, or **This month**) to improve usability.\n- **Use date ranges when appropriate:** Enable range selection mode when merchants need to select start and end dates for reports, analytics, or time-based filters.\n- **Restrict dates appropriately:** Use the `allow` and `disallow` properties to prevent selection of invalid dates for your specific use case.\n- **Provide adequate space:** Ensure sufficient spacing around the picker to avoid interfering with on-screen keyboards or other interactive elements.\n- **Consider alternatives for distant dates:** Navigating month-by-month becomes impractical for dates more than a few years away. For dates outside a 5-10 year range, consider providing date presets or manual year input." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the date picker component.", - "type": "DatePicker", - "typeDefinitions": { - "DatePicker": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePicker", - "description": "Configure the following properties on the date picker component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@16155", - "value": "boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@16154", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allow", - "value": "string", - "description": "Specifies which dates can be selected as a comma-separated list. An empty string (default) allows all dates.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `2024-02--2025`: February 2024 through end of 2025\n- `2024-05-09, 2024-05-11`: Only May 9th and 11th, 2024", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "allowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (only weekends)", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initially selected date(s) when the component first renders. An empty string means no date is initially selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultView", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallow", - "value": "string", - "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.\n\n**Formats:**\n- `YYYY-MM-DD`: Single date\n- `YYYY-MM`: Whole month\n- `YYYY`: Whole year\n- `start--end`: Date range (inclusive, unbounded if start/end omitted)\n\n**Examples:**\n- `--2024-02`: All dates before February 2024\n- `2024-05-09, 2024-05-11`: May 9th and 11th, 2024", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disallowDays", - "value": "string", - "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.\n\n**Valid days**: `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`\n\n**Example:** `saturday, sunday` (no weekends)", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"single\" | \"range\"", - "description": "The type of date selection allowed.\n\n- `single`: Select a single date\n- `range`: Select a date range", - "defaultValue": "\"single\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "value", - "value": "string", - "description": "The currently selected date(s). An empty string means no date is selected.\n\n- Single date in `YYYY-MM-DD` format when `type` is set to `\"single\"`\n- Date range in `YYYY-MM-DD--YYYY-MM-DD` format (inclusive) when `type` is set to `\"range\"`", - "defaultValue": "\"\"", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "SetAccessor", - "name": "view", - "value": "string", - "description": "The currently displayed month in `YYYY-MM` format. When changed, the `viewchange` callback is triggered. Defaults to `defaultView`.", - "isOptional": true - } - ], - "value": "declare class DatePicker extends BaseClass$1 implements DatePickerProps {\n accessor defaultView: string;\n set view(view: string);\n get view(): string;\n accessor allow: DatePickerProps['allow'];\n accessor disallow: DatePickerProps['disallow'];\n accessor allowDays: DatePickerProps['allowDays'];\n accessor disallowDays: DatePickerProps['disallowDays'];\n accessor type: DatePickerProps['type'];\n accessor defaultValue: DatePickerProps['defaultValue'];\n accessor name: DatePickerProps['name'];\n set value(value: string);\n get value(): string;\n /** @private */\n [dirtyStateSymbol]: boolean;\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The date picker component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "DatePickerEvents", - "typeDefinitions": { - "DatePickerEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DatePickerEvents", - "description": "The date picker component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener | null", - "description": "A callback fired when the date picker loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener | null", - "description": "A callback fired when the date picker value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener | null", - "description": "A callback fired when the date picker receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener | null", - "description": "A callback fired when the user inputs data into the date picker.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "viewchange", - "value": "CallbackEventListener | null", - "description": "A callback fired when the calendar view changes, such as when navigating between months.", - "isOptional": true - } - ], - "value": "export interface DatePickerEvents {\n /**\n * A callback fired when the calendar view changes, such as when navigating between months.\n */\n viewchange: CallbackEventListener | null = null;\n /**\n * A callback fired when the date picker receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener | null = null;\n /**\n * A callback fired when the date picker loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener | null = null;\n /**\n * A callback fired when the user inputs data into the date picker.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener | null = null;\n /**\n * A callback fired when the date picker value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "datepicker-default.png", - "description": "Add a calendar picker for selecting a date or date range. This example shows a range-type date picker with a pre-selected date range and a specific month view.", - "codeblock": { - "title": "Add a date range picker", - "tabs": [ - { - "title": "html", - "code": "<s-date-picker\n view=\"2025-05\"\n type=\"range\"\n value=\"2025-05-28--2025-05-31\"\n></s-date-picker>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Configure the picker for single date selection when merchants need to choose one specific date. This example shows a single-type date picker with a pre-selected date and month view.", - "codeblock": { - "title": "Select a single date", - "tabs": [ - { - "title": "html", - "code": "<s-date-picker\n type=\"single\"\n name=\"delivery-date\"\n value=\"2024-01-15\"\n view=\"2024-01\"\n></s-date-picker>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Restrict which dates merchants can select by defining an allowed range. This example shows a date picker that blocks past dates and limits selection to a specific month.", - "codeblock": { - "title": "Restrict selectable dates to a range", - "tabs": [ - { - "title": "html", - "code": "<!-- Disable past dates and far future dates -->\n<s-date-picker\n type=\"single\"\n name=\"appointment-date\"\n disallow=\"past\"\n allow=\"2024-06-01--2024-06-31\"\n view=\"2024-06\"\n></s-date-picker>\n", - "language": "html" - }, - { - "code": "\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Capture the selected date when the merchant makes a change so you can update your app state. This example shows a range picker inside a form with an `onChange` handler that stores the selected value.", - "codeblock": { - "title": "Capture date selections with onChange", - "tabs": [ - { - "title": "html", - "code": "<form>\n <s-text-field\n label=\"Order number\"\n placeholder=\"Search orders...\"\n ></s-text-field>\n <s-date-picker\n type=\"range\"\n name=\"order-date-range\"\n value=\"2024-01-01--2024-01-31\"\n view=\"2024-01\"\n ></s-date-picker>\n <s-button type=\"submit\">Apply filters</s-button>\n</form>\n", - "language": "html" - }, - { - "code": "
\n \n \n Apply filters\n\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Add preset buttons so merchants can quickly select common date ranges like \"Last 7 days\" or \"This month.\" This example shows a range picker with quick-selection buttons that programmatically update the selected value.", - "codeblock": { - "title": "Add quick preset date range buttons", - "tabs": [ - { - "title": "html", - "code": "<!-- Quick date selection with onChange callback -->\n<s-stack gap=\"base\">\n <s-button-group>\n <s-button slot=\"secondary-actions\" id=\"last-7-days\">Last 7 days</s-button>\n <s-button slot=\"secondary-actions\" id=\"last-30-days\">Last 30 days</s-button>\n <s-button slot=\"secondary-actions\" id=\"this-month\">This month</s-button>\n </s-button-group>\n <s-date-picker\n type=\"range\"\n name=\"analytics-period\"\n id=\"analytics-picker\"\n value=\"2025-01-01--2025-01-31\"\n view=\"2025-01\"\n onchange=\"console.log('Date range changed:', event.currentTarget.value)\"\n ></s-date-picker>\n <s-text id=\"selected-range\">\n Selected range: 2025-01-01--2025-01-31\n </s-text>\n</s-stack>\n\n<script>\n const picker = document.getElementById('analytics-picker');\n const display = document.getElementById('selected-range');\n\n // Handle picker changes\n picker.addEventListener('change', (event) => {\n display.textContent = `Selected range: ${event.currentTarget.value}`;\n });\n\n // Quick selection buttons\n document.getElementById('last-7-days').addEventListener('click', () => {\n picker.value = '2025-01-07--2025-01-13';\n display.textContent = 'Selected range: 2025-01-07--2025-01-13';\n });\n\n document.getElementById('last-30-days').addEventListener('click', () => {\n picker.value = '2024-12-14--2025-01-13';\n display.textContent = 'Selected range: 2024-12-14--2025-01-13';\n });\n\n document.getElementById('this-month').addEventListener('click', () => {\n picker.value = '2025-01-01--2025-01-31';\n display.textContent = 'Selected range: 2025-01-01--2025-01-31';\n });\n</script>\n", - "language": "html" - }, - { - "code": "\n\n \n Last 7 days\n Last 30 days\n This month\n \n \n \n Selected range: 2025-01-01--2025-01-31\n \n\n\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Divider", - "description": "The divider component creates clear visual separation between elements in the interface. Use divider to separate distinct content groups in forms, settings panels, lists, or page sections, helping users scan and understand content organization.\n\nDividers support both horizontal and vertical orientations, along with different visual strengths for varying levels of emphasis. For more structured content grouping with headings, use [section](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/section).", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for truly distinct boundaries:** Dividers work best when separating fundamentally different content sections. Overusing dividers creates visual clutter and makes interfaces feel fragmented. Consider whether whitespace alone could achieve the same grouping.\n- **Match visual weight to hierarchy:** The divider's prominence should reflect the importance of the separation. Major section breaks can support stronger visual dividers, while minor groupings need subtler separation or just whitespace.\n- **Align with layout direction:** The divider's orientation should match your content flow. A horizontal divider between vertically stacked items or a vertical divider between horizontally arranged items creates clear, predictable separation.\n- **Prefer whitespace for subtle grouping:** Whitespace often provides cleaner visual grouping than dividers. Before adding a divider, try using spacing properties on your layout components. Dividers should enhance clarity, not replace thoughtful spacing." - } - ], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/divider.png", - "isVisualComponent": true, - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the divider component.", - "type": "Divider", - "typeDefinitions": { - "Divider": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Divider", - "description": "Configure the following properties on the divider component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"strong\"", - "description": "The visual prominence of the divider line.\n\n- `base`: Standard divider for most separations (default)\n- `strong`: More prominent divider for major section breaks", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "\"inline\" | \"block\"", - "description": "The orientation of the divider line, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: Horizontal divider for separating vertically stacked content\n- `block`: Vertical divider for separating horizontally arranged content", - "defaultValue": "'inline'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Divider extends PreactCustomElement implements DividerProps {\n accessor direction: DividerProps['direction'];\n accessor color: DividerProps['color'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - } - ], - "defaultExample": { - "image": "divider-default.png", - "description": "Create a horizontal divider to visually separate content sections. This example shows the default divider with base color and inline direction.", - "codeblock": { - "title": "Add a horizontal divider", - "tabs": [ - { - "title": "html", - "code": "<s-divider></s-divider>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `color` property to display a more prominent divider that marks a major section break. This example shows a strong-colored divider for increased visual emphasis.", - "codeblock": { - "title": "Increase visual emphasis with a strong divider", - "tabs": [ - { - "title": "html", - "code": "<s-divider color=\"strong\"></s-divider>\n", - "language": "html" - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `direction` property to create a vertical divider between horizontally arranged items. This example shows a vertical divider separating text items in an inline stack.", - "codeblock": { - "title": "Create a vertical divider between inline items", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-text>Item 1</s-text>\n <s-divider direction=\"block\"></s-divider>\n <s-text>Item 2</s-text>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Item 1\n \n Item 2\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place a divider between groups of form fields to visually distinguish related sections. This example shows a divider separating store details from contact information fields.", - "codeblock": { - "title": "Separate form sections with a divider", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-text-field label=\"Store name\"></s-text-field>\n <s-text-field label=\"Description\"></s-text-field>\n <s-divider></s-divider>\n <s-text-field label=\"Email address\"></s-text-field>\n <s-text-field label=\"Phone number\"></s-text-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Drop zone", - "description": "The drop zone component lets users upload files through drag-and-drop or by clicking to browse. Use for file uploads such as images, documents, or CSV imports.\n\nThe component provides visual feedback during drag operations and supports file type validation through the `accept` property. Rejected files trigger the `droprejected` event for custom error handling.", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/dropzone.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- Set clear file type and size restrictions using the `accept` property.\n- Use the `droprejected` event to display meaningful error messages when uploads fail validation.\n- Consider using `disabled` to prevent uploads during processing." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- File size validation must be handled in your event handler; the component only validates file types.\n- The `change` event provides the file list but does not automatically upload files.\n- Multiple file selection requires the `multiple` attribute to be set." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the drop zone component.", - "type": "DropZone", - "typeDefinitions": { - "DropZone": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZone", - "description": "Configure the following properties on the drop zone component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@16192", - "value": "() => HTMLInputElement", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals@16191", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@16190", - "value": "(files: File[]) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accept", - "value": "string", - "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:\n- A file extension starting with a period (\".\") character (e.g. .jpg, .pdf, .doc)\n- A valid MIME type string with no extensions\n\nIf omitted, all file types are accepted.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "files", - "value": "File[]", - "description": "An array of File objects representing the files currently selected by the user.\n\nThis property is read-only and cannot be directly modified. To clear the selected files, set the `value` prop to an empty string or null.", - "defaultValue": "[]", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "multiple", - "value": "boolean", - "description": "Whether multiple files can be selected or dropped at once.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "This sets the input value for a file type, which cannot be set programatically, so it can only be reset.", - "defaultValue": "''", - "isOptional": true - } - ], - "value": "declare class DropZone extends BaseClass implements DropZoneProps {\n accessor accept: DropZoneProps['accept'];\n accessor accessibilityLabel: DropZoneProps['accessibilityLabel'];\n accessor disabled: DropZoneProps['disabled'];\n accessor error: DropZoneProps['error'];\n accessor label: DropZoneProps['label'];\n accessor labelAccessibilityVisibility: DropZoneProps['labelAccessibilityVisibility'];\n accessor multiple: DropZoneProps['multiple'];\n accessor name: DropZoneProps['name'];\n accessor required: DropZoneProps['required'];\n get value(): string;\n /** This sets the input value for a file type, which cannot be set programatically, so it can only be reset. */\n set value(value: '' | null);\n get files(): File[];\n set files(files: File[]);\n /** @private */\n [setFiles](files: File[]): void;\n /** @private */\n [getFileInput](): ReplaceType<\n Element | null | undefined,\n Element,\n HTMLInputElement\n >;\n\n /** @private */\n formResetCallback(): void;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The drop zone component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "DropZoneEvents", - "typeDefinitions": { - "DropZoneEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "DropZoneEvents", - "description": "The drop zone component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener", - "description": "A callback fired when the drop zone value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "droprejected", - "value": "CallbackEventListener", - "description": "A callback fired when a dropped file is rejected due to file type or size restrictions.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener", - "description": "A callback fired when the user inputs data into the drop zone.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface DropZoneEvents {\n /**\n * A callback fired when the drop zone value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener = null;\n /**\n * A callback fired when the user inputs data into the drop zone.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener = null;\n /**\n * A callback fired when a dropped file is rejected due to file type or size restrictions.\n */\n droprejected: CallbackEventListener = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "description": "Let users upload files by dragging or clicking to browse. This example creates a basic upload area with default prompts.", - "codeblock": { - "title": "Accept file uploads", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone\n label=\"Upload\"\n accessibilityLabel=\"Upload image of type jpg, png, or gif\"\n accept=\".jpg,.png,.gif\"\n multiple\n onInput=\"console.log('onInput', event.currentTarget?.value)\"\n onChange=\"console.log('onChange', event.currentTarget?.value)\"\n onDropRejected=\"console.log('onDropRejected', event.currentTarget?.value)\"\n></s-drop-zone>\n", - "language": "html", - "editable": false - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Accept multiple files in a single interaction. This example uses the `multiple` attribute with a custom label.", - "codeblock": { - "title": "Allow multiple file uploads", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone label=\"Drop files to upload\" multiple></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Preview uploaded images before submission. This example generates thumbnails after file selection.", - "codeblock": { - "title": "Upload images", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone accept=\"image/*\" label=\"Upload images\" multiple></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Ensure files are provided before form submission. This example enforces validation using the `required` attribute.", - "codeblock": { - "title": "Require file upload", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone name=\"file\" required label=\"Upload file\"></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Block uploads while files are being processed. This example demonstrates the `disabled` state during an active upload.", - "codeblock": { - "title": "Disable uploads during processing", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone label=\"Upload not available\" disabled></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Accept only specific file formats. This example restricts uploads to PDF and DOC files using the `accept` property.", - "codeblock": { - "title": "Restrict file types", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone\n accept=\".pdf,.doc,.docx\"\n label=\"Upload documents\"\n multiple\n></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate why an upload failed. This example displays error messaging when files are rejected.", - "codeblock": { - "title": "Show upload errors", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone\n label=\"Upload file\"\n error=\"File size must be less than 5mb\"\n></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Support screen reader users with clear labels. This example configures custom accessibility announcements.", - "codeblock": { - "title": "Configure accessibility labels", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone\n label=\"Upload files\"\n accessibilityLabel=\"Upload files using drag and drop or file selector\"\n labelAccessibilityVisibility=\"exclusive\"\n multiple\n></s-drop-zone>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - }, - { - "title": "Complete workflow", - "examples": [ - { - "description": "Handle the complete upload lifecycle with validation and feedback. This example combines type and size validation, error states, and disabled state during processing.", - "codeblock": { - "title": "Upload with validation", - "tabs": [ - { - "title": "html", - "code": "<s-drop-zone \n id=\"upload\" \n label=\"Product images\" \n accept=\"image/*\" \n multiple\n></s-drop-zone>\n\n<script>\n const dropzone = document.getElementById('upload');\n\n dropzone.addEventListener('change', async (e) => {\n const files = e.currentTarget.files;\n\n // Validate size (5MB max per file)\n const maxSize = 5 * 1024 * 1024;\n if (files.some(f => f.size > maxSize)) {\n dropzone.error = 'Files must be under 5MB';\n return;\n }\n dropzone.error = '';\n\n // Disable during upload\n dropzone.disabled = true;\n\n const formData = new FormData();\n files.forEach(f => formData.append('images[]', f));\n\n try {\n await fetch('/api/upload', { method: 'POST', body: formData });\n dropzone.value = ''; // Clear for next upload\n // Show success feedback\n } catch (error) {\n dropzone.error = 'Upload failed. Please try again.';\n } finally {\n dropzone.disabled = false;\n }\n });\n\n dropzone.addEventListener('droprejected', () => {\n dropzone.error = 'Only image files are accepted';\n });\n</script>\n", - "language": "html" - }, - { - "code": "\n\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Email field", - "description": "The email field component captures email address input. Use it to collect email information in forms, customer profiles, or contact workflows.\n\nEmail field doesn't perform automatic email validation. Implement your own validation logic, and use the `error` property to display validation results. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/emailfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Write descriptive labels:** Use specific labels like **Customer Email**, **Receipt Email Address**, or **Order Notification Email** rather than generic **Email** or **Email Address**.\n- **Provide context in details:** Use `details` for additional context like \"Required for digital receipts\" or \"We'll send order updates to this address.\"\n- **Show format examples in placeholders:** Use placeholders like **you@example.com** or **support@yourstore.com** to demonstrate expected format, but don't repeat the label text.\n- **Write actionable error messages:** Provide clear validation messages like \"Please enter a valid email address\" or \"Email must include @ symbol\" that help merchants correct their input." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Email addresses can't exceed 254 characters total per RFC 5321. Setting `maxLength` higher than 254 allows values that will fail during email delivery.\n- Different browsers implement email validation differently. Always validate email format server-side for critical functionality." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the email field component.", - "type": "EmailField", - "typeDefinitions": { - "EmailField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailField", - "description": "Configure the following properties on the email field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.", - "isOptional": true - } - ], - "value": "declare class EmailField\n extends PreactFieldElement\n implements EmailFieldProps\n{\n accessor autocomplete: EmailFieldProps['autocomplete'];\n accessor maxLength: EmailFieldProps['maxLength'];\n accessor minLength: EmailFieldProps['minLength'];\n /**\n * The current email address value in the field. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as an email address format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "EmailAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "EmailAutocompleteField", - "value": "'email' | 'home email' | 'mobile email' | 'fax email' | 'pager email'", - "description": "Represents autocomplete values that are valid for email input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for email inputs.\n\nAvailable values:\n- `email` - Primary email address\n- `home email` - Home email address\n- `mobile email` - Mobile device email address\n- `fax email` - Fax machine email address\n- `pager email` - Pager device email address", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The email field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "EmailFieldEvents", - "typeDefinitions": { - "EmailFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "EmailFieldEvents", - "description": "The email field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the email field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the email field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the email field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the email field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface EmailFieldEvents {\n /**\n * A callback fired when the email field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the email field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the email field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the email field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "emailfield-default.png", - "description": "Collect an email address from merchants with a labeled input and helper text. This example shows a basic email field with a placeholder and details text.", - "codeblock": { - "title": "Add a basic email field", - "tabs": [ - { - "title": "html", - "code": "<s-email-field\n label=\"Email\"\n placeholder=\"bernadette.lapresse@jadedpixel.com\"\n details=\"Used for sending notifications\"\n></s-email-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Display an error message and help text to guide merchants toward entering a valid email. This example shows a required email field with both a details hint and an error message.", - "codeblock": { - "title": "Show an error with help text", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-email-field\n label=\"Contact email\"\n details=\"We'll send your order confirmation here\"\n error=\"Please enter a valid email address\"\n required\n ></s-email-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display an existing email address that merchants can see but not edit. This example shows a read-only email field with a pre-filled value.", - "codeblock": { - "title": "Make an email field read-only", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-email-field\n label=\"Account email\"\n value=\"user@example.com\"\n readOnly\n ></s-email-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable an email field to prevent all interaction while keeping the value visible. This example shows a disabled field with a pre-filled email address.", - "codeblock": { - "title": "Disable an email field", - "tabs": [ - { - "title": "html", - "code": "<s-email-field\n label=\"Account email\"\n value=\"admin@example.com\"\n disabled\n></s-email-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set minimum and maximum character lengths to add validation beyond the standard email format check. This example shows a required email field with minLength and maxLength constraints.", - "codeblock": { - "title": "Set character length constraints", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-email-field\n label=\"Business email\"\n minLength=\"5\"\n maxLength=\"100\"\n required\n ></s-email-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Grid", - "description": "The grid component organizes content in a matrix of rows and columns to create responsive page layouts. Use grid to build complex, multi-column layouts that adapt to different screen sizes and maintain consistent alignment.\n\nGrid follows the CSS grid layout pattern and supports flexible column configurations, gap spacing, and alignment properties for precise layout control. For simpler linear layouts (horizontal or vertical), use [stack](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/stack).", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Design for different screen sizes:** Layouts that work well on desktop often fail on mobile. Plan how your grid should reflow or reconfigure for smaller screens rather than creating a fixed layout that doesn't adapt.\n- **Keep spacing consistent:** Consistent spacing between grid items creates visual rhythm and makes layouts easier to scan. Avoid mixing different spacing approaches within the same grid.\n- **Consider content overflow:** Grid cells have fixed dimensions, but content length varies. Plan how your layout handles content that's too long or too wide, whether through wrapping, truncation, or scrolling.\n- **Use semantic alternatives when appropriate:** Before using the component, consider whether simpler layout components would work. Grid's power comes with complexity, so use it when you need its specific capabilities." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't support CSS subgrid for aligning nested grid tracks with parent grids. If you need nested grids to align with parent grid lines, you'll need to manually coordinate the sizing or use a different layout approach." - } - ], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/grid.png", - "isVisualComponent": true, - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the grid component.", - "type": "Grid", - "typeDefinitions": { - "Grid": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Grid", - "description": "Configure the following properties on the grid component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "\"\" | AlignContentKeyword", - "description": "Aligns the grid along the block axis. This overrides the block value of `placeContent`.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "\"\" | AlignItemsKeyword", - "description": "Aligns the grid items along the block axis.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateColumns", - "value": "string", - "description": "The columns in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridTemplateRows", - "value": "string", - "description": "The rows in the grid and their sizes.\n\nAccepts:\n- [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`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported track sizing values as a query value", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "\"\" | JustifyContentKeyword", - "description": "Aligns the grid along the inline axis. This overrides the inline value of `placeContent`.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyItems", - "value": "\"\" | JustifyItemsKeyword", - "description": "Aligns the grid items along the inline axis.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", - "description": "A shorthand property for `justify-content` and `align-content`.", - "defaultValue": "'normal normal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", - "description": "A shorthand property for `justify-items` and `align-items`.", - "defaultValue": "'normal normal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "s spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Grid extends BoxElement implements GridProps {\n constructor();\n accessor gridTemplateColumns: GridProps['gridTemplateColumns'];\n accessor gridTemplateRows: GridProps['gridTemplateRows'];\n accessor justifyItems: GridProps['justifyItems'];\n accessor alignItems: GridProps['alignItems'];\n accessor placeItems: GridProps['placeItems'];\n accessor justifyContent: GridProps['justifyContent'];\n accessor alignContent: GridProps['alignContent'];\n accessor placeContent: GridProps['placeContent'];\n accessor gap: GridProps['gap'];\n accessor rowGap: GridProps['rowGap'];\n accessor columnGap: GridProps['columnGap'];\n}" - }, - "JustifyItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Justify items defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.\n\nLearn more about the [justify-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The grid component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "GridSlots", - "typeDefinitions": { - "GridSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridSlots", - "description": "The grid component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The child elements displayed within the grid component, which are arranged in a flexible grid layout with configurable columns, rows, and spacing.", - "isOptional": true - } - ], - "value": "export interface GridSlots {\n /**\n * The child elements displayed within the grid component, which are arranged in a flexible grid layout with configurable columns, rows, and spacing.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Grid item", - "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.\n\nGrid 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.", - "type": "GridItem", - "typeDefinitions": { - "GridItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItem", - "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.\n\nGrid 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridColumn", - "value": "\"auto\" | `span ${number}`", - "description": "The number of columns the item will span across.\n\nLearn more about the [grid-column property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gridRow", - "value": "\"auto\" | `span ${number}`", - "description": "The number of rows the item will span across.\n\nLearn more about the [grid-row property](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class GridItem extends BoxElement implements GridItemProps {\n accessor gridColumn: GridItemProps['gridColumn'];\n accessor gridRow: GridItemProps['gridRow'];\n constructor();\n}" - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The grid item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "GridItemSlots", - "typeDefinitions": { - "GridItemSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "GridItemSlots", - "description": "The grid item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface GridItemSlots {\n /**\n * The content displayed within the grid item component, which represents a single cell in the grid layout and can span multiple columns or rows.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "grid-default.png", - "description": "Create a grid layout with columns and grid items that span them. This example shows a two-column grid with a full-width header row and two equal columns below.", - "codeblock": { - "title": "Add a grid layout with column spans", - "tabs": [ - { - "title": "html", - "code": "<s-grid\n gridTemplateColumns=\"repeat(2, 1fr)\"\n gap=\"small\"\n justifyContent=\"center\"\n>\n <s-grid-item gridColumn=\"span 2\" border=\"base\" borderStyle=\"dashed\">\n Summary of sales\n </s-grid-item>\n <s-grid-item gridColumn=\"span 1\" border=\"base\" borderStyle=\"dashed\">\n Orders\n </s-grid-item>\n <s-grid-item gridColumn=\"auto\" border=\"base\" borderStyle=\"dashed\">\n Customers\n </s-grid-item>\n</s-grid>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n \n Summary of sales\n \n \n Orders\n \n \n Customers\n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Create a simple two-column layout. This example uses a 12-column grid system with equal-width columns.", - "codeblock": { - "title": "Create a two-column layout", - "tabs": [ - { - "title": "html", - "code": "<s-grid gridTemplateColumns=\"repeat(12, 1fr)\" gap=\"base\">\n <s-grid-item gridColumn=\"span 6\" gridRow=\"span 1\">\n <s-section>\n <s-text>Left column</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 6\" gridRow=\"span 1\">\n <s-section>\n <s-text>Right column</s-text>\n </s-section>\n </s-grid-item>\n</s-grid>\n", - "language": "html" - }, - { - "code": "\n \n \n Left column\n \n \n \n \n Right column\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use a 12-column grid system with spans to create full-width, half-width, and third-width column arrangements. This example shows multiple rows with progressively narrower columns.", - "codeblock": { - "title": "Build layouts with column spans", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-grid gridTemplateColumns=\"repeat(12, 1fr)\" gap=\"base\">\n <s-grid-item gridColumn=\"span 12\" gridRow=\"span 1\">\n <s-section>\n <s-text>Full width field</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 6\" gridRow=\"span 2\">\n <s-section>\n <s-text>Half width field</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 6\" gridRow=\"span 2\">\n <s-section>\n <s-text>Half width field</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 4\" gridRow=\"span 3\">\n <s-section>\n <s-text>Third width field</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 4\" gridRow=\"span 3\">\n <s-section>\n <s-text>Third width field</s-text>\n </s-section>\n </s-grid-item>\n <s-grid-item gridColumn=\"span 4\" gridRow=\"span 3\">\n <s-section>\n <s-text>Third width field</s-text>\n </s-section>\n </s-grid-item>\n </s-grid>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n Full width field\n \n \n \n \n Half width field\n \n \n \n \n Half width field\n \n \n \n \n Third width field\n \n \n \n \n Third width field\n \n \n \n \n Third width field\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `gridTemplateColumns` property with container queries to automatically adjust the column count based on available width. This example shows a grid that switches from a single column in narrow containers to three columns in wider ones.", - "codeblock": { - "title": "Create a responsive grid with container queries", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-text type=\"strong\">Narrow container (375px)</s-text>\n <s-box inlineSize=\"375px\">\n <s-query-container>\n <s-grid\n gridTemplateColumns=\"@container (inline-size > 400px) 1fr 1fr 1fr, 1fr\"\n gap=\"base\"\n >\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 1</s-text>\n </s-box>\n </s-grid-item>\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 2</s-text>\n </s-box>\n </s-grid-item>\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 3</s-text>\n </s-box>\n </s-grid-item>\n </s-grid>\n </s-query-container>\n </s-box>\n\n <s-text type=\"strong\">Wide container (450px)</s-text>\n <s-box inlineSize=\"450px\">\n <s-query-container>\n <s-grid\n gridTemplateColumns=\"@container (inline-size > 400px) 1fr 1fr 1fr, 1fr\"\n gap=\"base\"\n >\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 1</s-text>\n </s-box>\n </s-grid-item>\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 2</s-text>\n </s-box>\n </s-grid-item>\n <s-grid-item>\n <s-box padding=\"small\" background=\"subdued\">\n <s-text>Item 3</s-text>\n </s-box>\n </s-grid-item>\n </s-grid>\n </s-query-container>\n </s-box>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Narrow container (375px)\n \n \n 400px) 1fr 1fr 1fr, 1fr\"\n gap=\"base\"\n >\n \n \n Item 1\n \n \n \n \n Item 2\n \n \n \n \n Item 3\n \n \n \n \n \n\n Wide container (450px)\n \n \n 400px) 1fr 1fr 1fr, 1fr\"\n gap=\"base\"\n >\n \n \n Item 1\n \n \n \n \n Item 2\n \n \n \n \n Item 3\n \n \n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Heading", - "description": "The heading component renders hierarchical titles to communicate the structure and organization of page content. Use heading to create section titles and content headers that help users understand information hierarchy and navigate content.\n\nHeading levels adjust automatically based on nesting within parent [section](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/section) components, ensuring meaningful and accessible page outlines without manual level management.", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/heading.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use headings to structure content hierarchy:** The component creates a clear outline of your interface that helps merchants navigate and understand content organization. Every major section should have a heading.\n- **Let the component handle semantic levels:** The component automatically assigns appropriate HTML heading levels (h2, h3, h4) based on nesting depth. This ensures proper document structure for screen readers without manual management.\n- **Write clear, descriptive headings:** Headings should clearly describe the section they introduce. Avoid vague headings like \"Details\" when \"Product details\" or \"Customer details\" would be clearer.\n- **Use line clamping sparingly:** Line clamping helps manage long headings in constrained spaces like cards, but truncated headings can hide important information. Only clamp when it's absolutely necessary.\n- **Maintain consistent styling within contexts:** Use similar heading styles for similar content types. For example, all card headings in a list should look the same." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Heading levels (h2, h3, h4) are determined automatically based on nesting depth. You can't set a specific heading level, but you can remove heading semantics entirely by setting `accessibilityRole` to `\"presentation\"` or `\"none\"`.\n- Line clamping truncates text visually but doesn't provide a way to show the full heading text on hover or through other interactions. Truncated content might not be fully accessible to screen readers." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the heading component.", - "type": "Heading", - "typeDefinitions": { - "Heading": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Heading", - "description": "Configure the following properties on the heading component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'heading'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Heading extends PreactCustomElement implements HeadingProps {\n accessor accessibilityRole: HeadingProps['accessibilityRole'];\n accessor lineClamp: HeadingProps['lineClamp'];\n accessor accessibilityVisibility: HeadingProps['accessibilityVisibility'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The heading component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "HeadingSlots", - "typeDefinitions": { - "HeadingSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "HeadingSlots", - "description": "The heading component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The heading text displayed within the heading component, which provides a title or section header for content.", - "isOptional": true - } - ], - "value": "export interface HeadingSlots {\n /**\n * The heading text displayed within the heading component, which provides a title or section header for content.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "heading-default.png", - "description": "Create a heading for a content section. This example shows the basic heading component with default styling and automatic heading level assignment.", - "codeblock": { - "title": "Add a basic heading", - "tabs": [ - { - "title": "html", - "code": "<s-heading>Online store dashboard</s-heading>\n", - "language": "html", - "editable": false - }, - { - "code": "
Online store dashboard\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Limit the number of visible lines in a heading using the `lineClamp` property. This example shows a heading truncated to two lines with an ellipsis, useful for long product names in constrained layouts.", - "codeblock": { - "title": "Truncate long headings with line clamping", - "tabs": [ - { - "title": "html", - "code": "<s-box inlineSize=\"200px\">\n <s-heading lineClamp=\"2\">\n Premium organic cotton t-shirt with sustainable manufacturing practices\n </s-heading>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n Premium organic cotton t-shirt with sustainable manufacturing practices\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Configure the heading's ARIA role and visibility for assistive technologies. This example shows a heading with `accessibilityRole` set to presentation and `accessibilityVisibility` set to hidden, removing it from the document outline.", - "codeblock": { - "title": "Customize accessibility roles and visibility", - "tabs": [ - { - "title": "html", - "code": "<s-heading accessibilityRole=\"presentation\" accessibilityVisibility=\"hidden\">\n Sale badge\n</s-heading>\n", - "language": "html" - }, - { - "code": "\n Sale badge\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Nest headings inside section components to automatically assign appropriate heading levels (h2, h3, h4). This example shows how the heading level increments with each nested section, creating proper document structure for screen readers.", - "codeblock": { - "title": "Create a heading hierarchy with nested sections", - "tabs": [ - { - "title": "html", - "code": "<s-section>\n <s-heading>Order information</s-heading>\n <!-- Renders as h2 -->\n <s-section>\n <s-heading>Shipping details</s-heading>\n <!-- Renders as h3 -->\n <s-section>\n <s-heading>Tracking updates</s-heading>\n <!-- Renders as h4 -->\n </s-section>\n </s-section>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n Order information\n \n \n Shipping details\n \n \n Tracking updates\n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Icon", - "description": "The icon component renders graphic symbols to visually communicate actions, status, and navigation throughout the interface. Use icon to reinforce button actions, indicate status states, or provide wayfinding cues that help users understand available functionality.\n\nIcons support multiple sizes, tones for semantic meaning, and can be integrated with other components like [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button), [badge](/docs/api/{API_NAME}/{API_VERSION}/web-components/feedback-and-status-indicators/badge), and [chip](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/chip) to enhance visual communication.", - "category": "Web components", - "subCategory": "Media and visuals", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/icon.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Available icons", - "type": "Generic", - "anchorLink": "available-icons", - "sectionContent": "Search and filter across all the available icons: \n \n " - }, - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use icons to support actions and status, not decorate**: Icons should clarify what an action does or indicate state. Use the trash icon for delete actions, a checkmark for completed status, or a warning icon for errors. Avoid adding icons purely for visual interest.\n- **Maintain consistency across your interface**: Always use the same icon for the same action or concept throughout your extension. If you use a pencil for edit in one place, use it everywhere. Inconsistent icon usage confuses merchants.\n- **Pair icons with text labels whenever possible**: Icons work best as visual reinforcement alongside text. Without text, even common icons can be ambiguous—a gear might mean settings, preferences, or configuration. Only use icons alone in space-constrained contexts like icon-only buttons with proper accessibility labels.\n- **Choose icons that are universally recognizable**: Stick to icons with established meanings like magnifying glass (search), trash (delete), and plus (add). Test any icon you're unsure about—if it needs explanation, it's not the right choice.\n- **Use semantic tones to communicate meaning**: Apply tones like `critical` for destructive actions, `success` for positive states, and `warning` for caution. Tones should convey information, not serve as decoration." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Icons are limited to the predefined set provided by the component. Custom SVG icons, icon fonts, or external icon libraries aren't supported.\n- Icons can't be animated or include interactive states beyond color changes. For complex graphics or illustrations, use the [image](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/image) component instead.\n- Icon color is determined by the `tone` and `color` properties. Custom colors or gradients aren't available." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the icon component.", - "type": "Icon", - "typeDefinitions": { - "Icon": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Icon", - "description": "Configure the following properties on the icon component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"base\"", - "description": "The size of the icon.\n\n- `small`: Smaller icon suitable for inline use within text or compact UI elements.\n- `base`: Default size that works well for standalone icons and standard use cases.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `caution`: Advisory notices that need attention.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "The icon to display from the icon library.\n\nSet 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'`.", - "isOptional": true - } - ], - "value": "declare class Icon extends PreactCustomElement implements IconProps {\n accessor color: IconProps['color'];\n accessor tone: IconProps['tone'];\n accessor type: IconProps['type'];\n accessor size: IconProps['size'];\n accessor interestFor: string;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - } - ], - "defaultExample": { - "image": "icon-default.png", - "description": "Add visual cues to help users understand available actions. This example displays common icons for home, orders, products, and settings.", - "codeblock": { - "title": "Display icons", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-icon type=\"home\"></s-icon>\n <s-icon type=\"order\"></s-icon>\n <s-icon type=\"product\"></s-icon>\n <s-icon type=\"settings\"></s-icon>\n</s-stack>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n \n \n \n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Communicate status through color-coded icons. This example displays icons with warning, success, info, and caution tones.", - "codeblock": { - "title": "Apply semantic tones", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-icon type=\"alert-circle\" tone=\"warning\"></s-icon>\n <s-icon type=\"check-circle\" tone=\"success\"></s-icon>\n <s-icon type=\"info\" tone=\"info\"></s-icon>\n <s-icon type=\"alert-triangle\" tone=\"caution\"></s-icon>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Fit icons into tight layouts without losing clarity. This example uses a small-sized icon that takes up minimal space.", - "codeblock": { - "title": "Reduce the size", - "tabs": [ - { - "title": "html", - "code": "<s-icon type=\"search\" size=\"small\"></s-icon>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "De-emphasize icons for secondary content. This example displays a subdued icon with lower contrast for supporting information.", - "codeblock": { - "title": "Apply subdued color", - "tabs": [ - { - "title": "html", - "code": "<s-icon type=\"question-circle\" color=\"subdued\"></s-icon>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Target icons in scripts or stylesheets. This example adds an ID attribute for JavaScript event handling or custom CSS styling.", - "codeblock": { - "title": "Add an ID", - "tabs": [ - { - "title": "html", - "code": "<s-icon type=\"settings\" id=\"settings-icon\"></s-icon>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Improve accessibility for screen reader users. This example connects an icon to related interactive content using the `interest` attribute.", - "codeblock": { - "title": "Connect to related content", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"info-tooltip\">\n SKU must be unique across all products and cannot be changed after creation\n</s-tooltip>\n<s-icon type=\"info\" tone=\"info\" interestFor=\"info-tooltip\" />", - "language": "html" - }, - { - "code": "\n SKU must be unique across all products and cannot be changed after creation\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Reinforce button actions with visual cues. This example places icons in buttons for add and delete actions with appropriate tones.", - "codeblock": { - "title": "Use in buttons", - "tabs": [ - { - "title": "html", - "code": "<s-button-group>\n <s-button slot=\"secondary-actions\" icon=\"plus\">Add product</s-button>\n <s-button slot=\"secondary-actions\" icon=\"delete\" tone=\"critical\">\n Delete\n </s-button>\n</s-button-group>\n", - "language": "html" - }, - { - "code": "\n Add product\n \n Delete\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Enhance status badges with visual indicators. This example pairs badges with icons for active and pending states.", - "codeblock": { - "title": "Use in badges", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\">\n <s-badge tone=\"success\" icon=\"check-circle\">Active</s-badge>\n <s-badge tone=\"warning\" icon=\"alert-triangle\">Pending</s-badge>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Active\n Pending\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Image", - "description": "The image component embeds images within the interface with control over presentation and loading behavior. Use image to visually illustrate concepts, showcase products, display user content, or support tasks and interactions with visual context.\n\nImages support responsive sizing, alt text for accessibility, aspect ratio control, and loading states for progressive enhancement. For small preview images in lists or tables, use [thumbnail](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/thumbnail). For profile images, use [avatar](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/avatar).", - "category": "Web components", - "subCategory": "Media and visuals", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/image.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Always provide descriptive alternative text:** Write alt text that describes what's in the image, not what the image is for. Use \"Blue cotton t-shirt with crew neck\" instead of \"Product image.\" For decorative images that don't add information, use an empty alt attribute.\n- **Use images for meaningful content, not decoration:** Display product photos, diagrams, charts, or instructional screenshots. For icons or decorative elements, use the [Icon](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/icon) component instead.\n- **Ensure images are accessible and performant:** Use appropriate image formats (WebP for photos, PNG for graphics with transparency, SVG for logos). Ensure images load from reliable sources with proper CORS configuration if cross-origin.\n- **Consider the image's purpose and context:** Use images to help merchants understand products, visualize data, or follow instructions. Every image should serve a clear purpose in your interface." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Images can be loaded from remote URLs or local file resources. Cross-origin images require proper CORS headers from the image host.\n- The component displays images at their intrinsic aspect ratio. Use `aspectRatio` (for example, `'16/9'`) to set a fixed ratio, and `objectFit` (`'cover'` or `'contain'`) to control how the image resizes within its container.\n- The component provides a basic placeholder while images load but doesn't include built-in loading skeletons or progressive loading features." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the image component.", - "type": "Image", - "typeDefinitions": { - "Image": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Image", - "description": "Configure the following properties on the image component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "\"none\" | \"presentation\" | \"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.\n\n- `none`: Completely hides the element and its content from assistive technologies\n- `presentation`: Removes semantic meaning, making the image purely decorative and ignored by screen readers.\n- `img`: Identifies the element as an image that conveys meaningful information to users.", - "defaultValue": "'img'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "aspectRatio", - "value": "`${number}` | `${number}/${number}` | `${number}/ ${number}` | `${number} /${number}` | `${number} / ${number}`", - "description": "The aspect ratio of the image.\n\nThe rendering of the image will depend on the `inlineSize` value:\n\n- `inlineSize=\"fill\"`: the aspect ratio will be respected and the image will take the necessary space.\n- `inlineSize=\"auto\"`: the image will not render until it has loaded and the aspect ratio will be ignored.\n\nFor 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`.\n\nLearn more about the [aspect-ratio property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio).", - "defaultValue": "'1/1'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied around the image using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "description": "The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the image's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "description": "The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"auto\" | \"fill\"", - "description": "The displayed inline width of the image.\n\n- `fill`: the image will takes up 100% of the available inline size.\n- `auto`: the image will be displayed at its natural size.\n\nLearn more about the [width attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#width).", - "defaultValue": "'fill'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "\"eager\" | \"lazy\"", - "description": "The loading strategy for the image.\n\n- `eager`: Immediately loads the image, irrespective of its position within the visible viewport.\n- `lazy`: Delays loading the image until it approaches a specified distance from the viewport.\n\nLearn more about the [loading attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading).", - "defaultValue": "'eager'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "objectFit", - "value": "\"contain\" | \"cover\"", - "description": "The image resizing behavior to fit within its container.\n\n- `contain`: Scales the image to fit within the container while maintaining its aspect ratio. The entire image is visible, but might leave empty space.\n- `cover`: Scales the image to fill the entire container while maintaining its aspect ratio. The image might be cropped to fit.\n\nThe image is always positioned in the center of the container.\n\nLearn more about the [object-fit property](https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit).", - "defaultValue": "'contain'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "sizes", - "value": "string", - "description": "A set of media conditions and their corresponding sizes.\n\nLearn more about the [sizes attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#sizes).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "srcSet", - "value": "string", - "description": "A set of image sources and their width or pixel density descriptors. This overrides the `src` property.\n\nLearn more about the [srcset attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#srcset).", - "isOptional": true - } - ], - "value": "declare class Image extends PreactCustomElement implements ImageProps {\n accessor src: ImageProps['src'];\n accessor srcSet: ImageProps['srcSet'];\n accessor sizes: ImageProps['sizes'];\n accessor alt: ImageProps['alt'];\n accessor aspectRatio: ImageProps['aspectRatio'];\n accessor objectFit: ImageProps['objectFit'];\n accessor loading: ImageProps['loading'];\n accessor accessibilityRole: ImageProps['accessibilityRole'];\n accessor inlineSize: ImageProps['inlineSize'];\n /**\n * A border applied around the image using shorthand syntax to specify width, color, and style in a single property.\n */\n accessor border: ImageProps['border'];\n /**\n * The thickness of the border around the image. When set, this overrides the width value specified in the `border` property.\n */\n accessor borderWidth: ImageProps['borderWidth'];\n /**\n * The visual style of the border around the image, such as solid, dashed, or dotted. When set, this overrides the style value specified in the `border` property.\n */\n accessor borderStyle: ImageProps['borderStyle'];\n /**\n * The color of the border around the image using the design system's color scale. When set, this overrides the color value specified in the `border` property.\n */\n accessor borderColor: ImageProps['borderColor'];\n /**\n * The roundedness of the image's corners using the design system's radius scale.\n */\n accessor borderRadius: ImageProps['borderRadius'];\n constructor();\n}" - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The image component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ImageEvents", - "typeDefinitions": { - "ImageEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ImageEvents", - "description": "The image component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "error", - "value": "OnErrorEventHandler", - "description": "A callback fired when the image fails to load.\n\nLearn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "load", - "value": "CallbackEventListener | null", - "description": "A callback fired when the image successfully loads.\n\nLearn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).", - "isOptional": true - } - ], - "value": "export interface ImageEvents {\n /**\n * A callback fired when the image successfully loads.\n *\n * Learn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).\n */\n load: CallbackEventListener | null = null;\n /**\n * A callback fired when the image fails to load.\n *\n * Learn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).\n */\n error: OnErrorEventHandler = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "image-default.png", - "description": "Display a product thumbnail with metadata in a grid layout. This example demonstrates how to control image sizing with `aspectRatio`, `objectFit`, and `inlineSize`, and round corners with `borderRadius`.", - "codeblock": { - "title": "Display a product thumbnail", - "tabs": [ - { - "title": "html", - "code": "<s-grid gridTemplateColumns=\"80px 1fr\" gap=\"base\" alignItems=\"center\">\n <s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Indoor plant\"\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n borderRadius=\"base\"\n inlineSize=\"fill\"\n />\n <s-stack gap=\"small\">\n <s-text type=\"strong\">Indoor Plant</s-text>\n <s-text color=\"subdued\">SKU: PLT-001</s-text>\n <s-text tone=\"success\">In stock</s-text>\n </s-stack>\n</s-grid>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n \n \n Indoor Plant\n SKU: PLT-001\n In stock\n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Control image proportions with a fixed aspect ratio. This example displays a 16:9 image that scales to fill its container using `objectFit=\"cover\"`, with lazy loading for performance.", - "codeblock": { - "title": "Set an aspect ratio", - "tabs": [ - { - "title": "html", - "code": "<s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Featured product\"\n aspectRatio=\"16/9\"\n objectFit=\"cover\"\n loading=\"lazy\"\n></s-image>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set up responsive image sources using `srcSet` and `sizes`. This example demonstrates how to configure the browser to select appropriate image sources based on viewport width.", - "codeblock": { - "title": "Use responsive images", - "tabs": [ - { - "title": "html", - "code": "<s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n srcSet=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png 400w,\n https://cdn.shopify.com/static/sample-product/House-Plant1.png 800w\"\n sizes=\"(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 400px\"\n alt=\"Product detail\"\n aspectRatio=\"16/9\"\n objectFit=\"cover\"\n></s-image>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add visual emphasis with border styling. This example displays an image with border width, color, and rounded corners.", - "codeblock": { - "title": "Add border styling", - "tabs": [ - { - "title": "html", - "code": "<s-box inlineSize=\"300px\">\n <s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Product thumbnail\"\n borderWidth=\"large\"\n borderStyle=\"solid\"\n borderColor=\"strong\"\n borderRadius=\"large\"\n objectFit=\"cover\"\n aspectRatio=\"1/1\"\n ></s-image>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Hide images from screen readers when purely decorative. This example presents an image with empty `alt` text and `presentation` role for accessibility.", - "codeblock": { - "title": "Mark as decorative", - "tabs": [ - { - "title": "html", - "code": "<s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"\"\n accessibilityRole=\"presentation\"\n objectFit=\"cover\"\n></s-image>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Build a product image gallery with consistent sizing using [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid). This example arranges three product photos in a row, each constrained to a square with rounded corners so they line up evenly.", - "codeblock": { - "title": "Use in a grid layout", - "tabs": [ - { - "title": "html", - "code": "<s-grid gridTemplateColumns=\"repeat(3, 150px)\" gap=\"base\" alignItems=\"center\">\n <s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Main view\"\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n borderRadius=\"base\"\n inlineSize=\"fill\"\n ></s-image>\n <s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Side view\"\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n borderRadius=\"base\"\n inlineSize=\"fill\"\n ></s-image>\n <s-image\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Detail view\"\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n borderRadius=\"base\"\n inlineSize=\"fill\"\n ></s-image>\n</s-grid>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Link", - "description": "The link component makes text interactive, allowing users to navigate to other pages or perform specific actions. Use link for navigation, external references, or triggering actions while maintaining standard link semantics and accessibility.\n\nLinks support standard URLs, custom protocols, navigation within Shopify admin pages, and can open in new windows for external destinations. For prominent actions or form submissions, use [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) instead.", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/link.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Open external links in new tabs:** Use `target=\"_blank\"` only for external URLs (like help documentation or partner sites). Keep internal admin links in the same tab to maintain workflow context." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Links within extensions have limited control over navigation behavior in the Shopify admin. Some admin navigation patterns might override link behavior for consistency.\n- Links with `target=\"_blank\"` automatically get `rel=\"noopener noreferrer\"` for security, but external URLs are still subject to browser security policies. Some browsers might block external navigation from extensions or show security warnings.\n- Links don't have a built-in loading or disabled state. If clicking a link triggers a slow navigation or async operation, you must implement loading feedback yourself.\n- The `download` attribute for forcing file downloads has inconsistent browser support. It works reliably for same-origin files but might be ignored for cross-origin resources. Safari on iOS doesn't support the download attribute at all." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the link component.", - "type": "Link", - "typeDefinitions": { - "Link": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Link", - "description": "Configure the following properties on the link component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "The action that [command](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the visibility of the target component.", - "defaultValue": "'--auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The component that [commandFor](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor) should act on when this component is activated.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "download", - "value": "string", - "description": "Prompts the browser to download the linked URL rather than navigate to it. When set, the value specifies the suggested filename for the downloaded file.\n\nThe filename suggestion is only respected for same-origin URLs, `blob:`, and `data:` schemes. Cross-origin URLs can still trigger downloads, but browsers might ignore the suggested filename.\n\nLearn more about the [download attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "href", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lang", - "value": "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).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "target", - "value": "\"auto\" | AnyString | \"_blank\" | \"_self\" | \"_parent\" | \"_top\"", - "description": "The browsing context where the linked URL should be displayed.\n\n- `auto`: The target is automatically determined based on the origin of the URL.\n- `_blank`: Opens the URL in a new window or tab.\n- `_self`: Opens the URL in the same browsing context as the current one.\n- `_parent`: Opens the URL in the parent browsing context of the current one. If there is no parent, behaves as `_self`.\n- `_top`: Opens the URL in the topmost browsing context (the highest ancestor of the current one). If there is no ancestor, behaves as `_self`.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"critical\" | \"auto\" | \"neutral\"", - "description": "The semantic meaning and color treatment of the component.\n\n- `critical`: Urgent problems or destructive actions.\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Link extends Link_base implements LinkProps {\n accessor tone: LinkProps['tone'];\n accessor accessibilityLabel: LinkProps['accessibilityLabel'];\n accessor href: LinkProps['href'];\n accessor target: LinkProps['target'];\n accessor download: LinkProps['download'];\n accessor lang: LinkProps['lang'];\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The link component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "LinkEvents", - "typeDefinitions": { - "LinkEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "LinkEvents", - "description": "The link component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "CallbackEventListener | null", - "description": "A callback fired when the link is clicked.\n\nLearn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", - "isOptional": true - } - ], - "value": "export interface LinkEvents {\n /**\n * A callback fired when the link is clicked.\n *\n * Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).\n */\n click: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The link component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "LinkSlots", - "typeDefinitions": { - "LinkSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "LinkSlots", - "description": "The link component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text or elements displayed within the link component, which navigates users to a different location when activated.", - "isOptional": true - } - ], - "value": "export interface LinkSlots {\n /**\n * The text or elements displayed within the link component, which navigates users to a different location when activated.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "link-default.png", - "description": "Add an inline link to let merchants navigate to another page. This example shows a basic text link with an `href` property.", - "codeblock": { - "title": "Add a basic link", - "tabs": [ - { - "title": "html", - "code": "<s-link href=\"#beep\">fulfilling orders</s-link>", - "language": "html", - "editable": false - }, - { - "code": "
fulfilling orders
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Embed links within a [Paragraph](/docs/api/app-home/web-components/typography-and-content/paragraph) so merchants can navigate to related content inline. This example shows two links inside a paragraph that inherit the surrounding text tone.", - "codeblock": { - "title": "Embed links in paragraph text", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph>\n Your product catalog is empty. Start by <s-link href=\"javascript:void(0)\">adding your first product</s-link> or <s-link href=\"javascript:void(0)\">importing existing inventory</s-link>.\n</s-paragraph>\n", - "language": "html" - }, - { - "code": "\n Your product catalog is empty. Start by adding your first product or importing existing inventory.\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place links inside banners to provide direct actions alongside important notifications. This example shows a link inside an info banner prompting merchants to create a campaign.", - "codeblock": { - "title": "Add links inside a banner", - "tabs": [ - { - "title": "html", - "code": "<s-banner tone=\"info\">\n <s-paragraph>\n Black Friday campaigns are now available!\n <s-link href=\"javascript:void(0)\">Create your campaign</s-link>\n </s-paragraph>\n</s-banner>\n", - "language": "html" - }, - { - "code": "\n \n Black Friday campaigns are now available!\n Create your campaign\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place links inside a box container to provide navigation within a visually distinct content area. This example shows two links inside a bordered box with background and padding.", - "codeblock": { - "title": "Add links inside a box container", - "tabs": [ - { - "title": "html", - "code": "<s-box padding=\"base\" background=\"base\" borderWidth=\"base\" borderColor=\"base\">\n <s-paragraph>\n Boost your store's conversion with professional themes. <s-link href=\"javascript:void(0)\">Browse theme store</s-link> or <s-link href=\"javascript:void(0)\">customize your current theme</s-link>.\n </s-paragraph>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n Boost your store's conversion with professional themes. Browse theme store or customize your current theme.\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `download` property to trigger a file download when the link is clicked. This example shows a link that downloads a CSV file for customer data export.", - "codeblock": { - "title": "Trigger a file download", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph>\n Export your customer data for marketing analysis. <s-link href=\"javascript:void(0)\" download=\"customer-export.csv\">Download customer list</s-link>\n</s-paragraph>\n", - "language": "html" - }, - { - "code": "\n Export your customer data for marketing analysis. Download customer list\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Open external URLs in a new tab so merchants stay on the current page. This example shows two links with `target=\"_blank\"` pointing to external documentation.", - "codeblock": { - "title": "Open external links in a new tab", - "tabs": [ - { - "title": "html", - "code": "<s-box padding=\"base\">\n <s-paragraph>\n Need help with policies? Read our <s-link href=\"javascript:void(0)\" target=\"_blank\">billing docs</s-link> or review the <s-link href=\"javascript:void(0)\" target=\"_blank\">terms of service</s-link>.\n </s-paragraph>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n Need help with policies? Read our billing docs or review the terms of service.\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `lang` property so screen readers pronounce the link text correctly. This example shows a French-language link with the `lang` attribute set.", - "codeblock": { - "title": "Set the language for a link", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph>\n Voir en français: <s-link lang=\"fr\">Gérer les produits</s-link>\n</s-paragraph>", - "language": "html" - }, - { - "code": "\n Voir en français: Gérer les produits\n", - "language": "preview" - } - ] - } - }, - { - "description": "Configure links that inherit the tone of their parent paragraph and match the surrounding context. This example shows links inside paragraphs with six different tones.", - "codeblock": { - "title": "Match link tone to surrounding context", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-paragraph>\n Default tone: <s-link>View orders</s-link>\n </s-paragraph>\n\n <s-paragraph tone=\"success\">\n Neutral tone: <s-link>Inventory help</s-link>\n </s-paragraph>\n\n <s-paragraph tone=\"critical\">\n Critical tone: <s-link>Close store</s-link>\n </s-paragraph>\n\n <s-paragraph tone=\"warning\">\n Warning tone: <s-link>Update billing info</s-link>\n </s-paragraph>\n\n <s-paragraph tone=\"info\">\n Info tone: <s-link>Learn more about reports</s-link>\n </s-paragraph>\n\n <s-paragraph tone=\"caution\">\n Subdued tone: <s-link>View archived products</s-link>\n </s-paragraph>\n</s-stack>", - "language": "html" - }, - { - "code": "\n \n Default tone: View orders\n \n\n \n Neutral tone: Inventory help\n \n\n \n Critical tone: Close store\n \n\n \n Warning tone: Update billing info\n \n\n \n Info tone: Learn more about reports\n \n\n \n Subdued tone: View archived products\n \n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Menu", - "description": "The menu component displays a list of actions that can be performed on a resource or within a specific context. Use menu to present multiple related actions in a compact dropdown format, reducing visual clutter while maintaining discoverability.\n\nMenus support action grouping, icons for visual clarity, and keyboard navigation for efficient interaction.", - "category": "Web components", - "subCategory": "Actions", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/menu.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Reserve for secondary actions:** Place primary actions directly in the UI (like **Save** in the page header). Use menus for less frequent or destructive actions (like **Archive**, **Duplicate**, or **Export data**) that shouldn't take up permanent space.\n- **Write action-oriented labels:** Use the `{verb}+{noun}` format: **Edit details**, **Export as CSV**, **Duplicate product**, **Archive order**. Never use vague labels like **Options**, **More**, or **Settings**.\n- **Group related actions with sections:** When you have 4+ menu items, organize into sections with headings: group **Edit details**, **Duplicate product** under **Manage**, and **Archive product**, **Delete product** under **Danger zone**.\n- **Use icons to reinforce meaning:** Add icons to menu items to provide visual recognition: use an edit icon for **Edit**, trash icon for **Delete**, or download icon for **Export**. Icons should clarify, not replace, text labels.\n- **Only disable temporarily unavailable actions:** Use disabled items when an action's contextually unavailable (like **Refund order** when already refunded). If an action's never available, remove it from the menu entirely." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Menus automatically reposition to stay within the viewport boundaries, but in extremely constrained spaces (like narrow mobile screens or small modals), the menu might partially overflow or be cut off.\n- While there's no hard technical limit on menu items, menus with more than 10-12 items become difficult to scan. Performance remains acceptable up to ~50 items, but beyond this, consider pagination, search, or alternative UI patterns.\n- The component doesn't support nested submenus (like cascading dropdowns). All menu items must be at a single level, organized into sections if needed.\n- When navigating with arrow keys, focus moves sequentially through all items regardless of section boundaries. Section headings aren't focusable and serve only as visual separators.\n- The menu renders in a popover layer with a specific z-index. If placed within containers that have their own stacking contexts (like modals, sticky headers, or elements with transforms), the menu might appear behind other elements or clip unexpectedly." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the menu component.", - "type": "Menu", - "typeDefinitions": { - "Menu": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Menu", - "description": "Configure the following properties on the menu component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@16327", - "value": "HTMLElement", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@16326", - "value": "boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@16328", - "value": "number", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Menu extends PreactOverlayElement implements MenuProps {\n accessor accessibilityLabel: string;\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The menu component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "MenuSlots", - "typeDefinitions": { - "MenuSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MenuSlots", - "description": "The menu component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface MenuSlots {\n /**\n * The items displayed within the menu. Only accepts button and section components. Use button for individual menu actions and section to group related items.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "menu-default.png", - "description": "Add a dropdown menu of actions triggered by a button. This example shows a menu with three icon buttons including a critical delete action.", - "codeblock": { - "title": "Add a basic actions menu", - "tabs": [ - { - "title": "html", - "code": "<s-button commandFor=\"customer-menu\">Edit customer</s-button>\n\n<s-menu id=\"customer-menu\" accessibilityLabel=\"Customer actions\">\n <s-button icon=\"merge\">Merge customer</s-button>\n <s-button icon=\"incoming\">Request customer data</s-button>\n <s-button icon=\"delete\" tone=\"critical\">Delete customer</s-button>\n</s-menu>\n", - "language": "html", - "editable": false - }, - { - "code": "
Edit customer\n\n\n Merge customer\n Request customer data\n Delete customer\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Organize menu items into labeled groups so merchants can find related actions. This example shows two sections with headings separating product actions from export options.", - "codeblock": { - "title": "Organize items into sections", - "tabs": [ - { - "title": "html", - "code": "<s-button commandFor=\"organized-menu\">Bulk actions</s-button>\n\n<s-menu id=\"organized-menu\" accessibilityLabel=\"Organized menu\">\n <s-section heading=\"Product actions\">\n <s-button icon=\"edit\">Edit selected</s-button>\n <s-button icon=\"duplicate\">Duplicate selected</s-button>\n <s-button icon=\"archive\">Archive selected</s-button>\n </s-section>\n <s-section heading=\"Export options\">\n <s-button icon=\"export\">Export as CSV</s-button>\n <s-button icon=\"print\">Print barcodes</s-button>\n </s-section>\n</s-menu>\n", - "language": "html" - }, - { - "code": "Bulk actions\n\n\n \n Edit selected\n Duplicate selected\n Archive selected\n \n \n Export as CSV\n Print barcodes\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Mix link-based, standard, and disabled buttons in a single menu. This example shows a menu with a link that opens in a new tab, a disabled action, and a download link.", - "codeblock": { - "title": "Add links and disabled items to a menu", - "tabs": [ - { - "title": "html", - "code": "<s-button commandFor=\"mixed-menu\">Options</s-button>\n\n<s-menu id=\"mixed-menu\" accessibilityLabel=\"Mixed menu options\">\n <s-button href=\"javascript:void(0)\" target=\"_blank\">\n View product page\n </s-button>\n <s-button disabled>Unavailable action</s-button>\n <s-button download href=\"javascript:void(0)\">Download report</s-button>\n</s-menu>\n", - "language": "html" - }, - { - "code": "Options\n\n\n \n View product page\n \n Unavailable action\n Download report\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Combine sections with root-level items to separate grouped actions from standalone ones like a destructive action. This example shows two sections for customer management alongside a root-level delete button.", - "codeblock": { - "title": "Mix sections with root-level actions", - "tabs": [ - { - "title": "html", - "code": "<s-button commandFor=\"customer-menu\">Edit customer</s-button>\n\n<s-menu id=\"customer-menu\" accessibilityLabel=\"Customer actions\">\n <s-section heading=\"Customer management\">\n <s-button icon=\"edit\">Edit customer</s-button>\n <s-button icon=\"email\">Send email</s-button>\n <s-button icon=\"order\">View orders</s-button>\n </s-section>\n <s-section heading=\"Account actions\">\n <s-button icon=\"reset\">Reset password</s-button>\n <s-button icon=\"lock\">Disable account</s-button>\n </s-section>\n <s-button tone=\"critical\" icon=\"delete\">Delete customer</s-button>\n</s-menu>\n", - "language": "html" - }, - { - "code": "Edit customer\n\n\n \n Edit customer\n Send email\n View orders\n \n \n Reset password\n Disable account\n \n Delete customer\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Build a settings-style menu with multiple sections and a standalone action at the bottom. This example shows account and store settings sections with a root-level sign-out link.", - "codeblock": { - "title": "Build a settings menu with sections", - "tabs": [ - { - "title": "html", - "code": "<s-button icon=\"settings\" commandFor=\"admin-settings\">Settings</s-button>\n\n<s-menu id=\"admin-settings\" accessibilityLabel=\"Settings menu\">\n <s-section heading=\"Account\">\n <s-button icon=\"profile\">Profile settings</s-button>\n <s-button icon=\"lock\">Security</s-button>\n <s-button>Billing information</s-button>\n </s-section>\n <s-section heading=\"Store\">\n <s-button icon=\"store\">Store settings</s-button>\n <s-button>Payment providers</s-button>\n <s-button icon=\"delivery\">Shipping rates</s-button>\n </s-section>\n <s-button href=\"javascript:void(0)\" icon=\"person-exit\">Sign out</s-button>\n</s-menu>\n", - "language": "html" - }, - { - "code": "Settings\n\n\n \n Profile settings\n Security\n Billing information\n \n \n Store settings\n Payment providers\n Shipping rates\n \n Sign out\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use an icon-only button as the menu trigger for a compact \"more actions\" pattern. This example shows a three-dot icon button that opens a menu with common product actions.", - "codeblock": { - "title": "Trigger a menu from an icon-only button", - "tabs": [ - { - "title": "html", - "code": "<s-button\n icon=\"menu-horizontal\"\n variant=\"tertiary\"\n accessibilityLabel=\"More actions\"\n commandFor=\"more-actions-menu\"\n></s-button>\n\n<s-menu id=\"more-actions-menu\" accessibilityLabel=\"More actions\">\n <s-button icon=\"edit\">Edit product</s-button>\n <s-button icon=\"duplicate\">Duplicate product</s-button>\n <s-button icon=\"archive\">Archive product</s-button>\n <s-button icon=\"delete\" tone=\"critical\">Delete product</s-button>\n</s-menu>\n", - "language": "html" - }, - { - "code": "\n\n\n Edit product\n Duplicate product\n Archive product\n Delete product\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Modal", - "description": "Displays content in an overlay. Use to create a distraction-free experience such as a confirmation dialog or a settings panel.", - "category": "Web components", - "subCategory": "Overlays", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/modal.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Usage", - "type": "Generic", - "anchorLink": "usage", - "sectionContent": "Modals are closed by default and should be triggered by a button using the `commandFor` attribute. The button's `commandFor` value should match the modal's `id`." - }, - { - "title": "Useful for", - "type": "Generic", - "anchorLink": "useful-for", - "sectionContent": "- Focusing on a specific task or piece of information\n- Completing a flow that needs dedicated attention\n- Confirming a significant action before proceeding\n- Viewing information that's only temporarily relevant" - }, - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- Use for focused, specific tasks that require merchants to make a decision or acknowledge critical information\n- Include a prominent and clear call to action\n- Don't nest modals (avoid launching one modal from another)\n- Have concise and descriptive title and button text\n- Use thoughtfully and sparingly—don't create unnecessary interruptions\n- Use as a last resort for important decisions, not for contextual tools or actions that could happen on the page directly" - }, - { - "title": "Content guidelines", - "type": "Generic", - "anchorLink": "content-guidelines", - "sectionContent": "- Use 1-3 word titles in sentence case without punctuation\n- Keep body content to 1-2 short sentences\n- For destructive actions, explain the consequences\n- Use clear action verbs for buttons (e.g., \"Delete\", \"Edit\") instead of vague language like \"Yes\" or \"OK\"" - } - ], - "definitions": [ - { - "title": "Properties", - "description": "", - "type": "Modal", - "typeDefinitions": { - "Modal": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Modal", - "description": "Configure the following properties on the modal component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@abortController@16386", - "value": "AbortController", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@childrenRerenderObserver@16388", - "value": "MutationObserver", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@dialog@16380", - "value": "HTMLDialogElement", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@dismiss@16381", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@focusedElement@16382", - "value": "HTMLElement", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@hasOpenChildModal@16376", - "value": "boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@hide@16378", - "value": "() => Promise", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@isOpen@16379", - "value": "boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@nestedModals@16384", - "value": "Map", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@onBackdropClick@16385", - "value": "(event: MouseEvent) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@onChildModalChange@16387", - "value": "EventListenerOrEventListenerObject", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@onEscape@16383", - "value": "(event: KeyboardEvent) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@16327", - "value": "HTMLElement", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@16326", - "value": "boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@16328", - "value": "number", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@shadowDomRerenderObserver@16389", - "value": "MutationObserver", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "__@show@16377", - "value": "() => Promise", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.\n\nThis overrides the `heading` prop for screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "A title that describes the content of the modal.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hideOverlay", - "value": "() => void", - "description": "A method to programmatically hide the overlay.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "Adjust the padding around the modal content.\n\n`base`: applies padding that is appropriate for the element.\n\n`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.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "showOverlay", - "value": "() => void", - "description": "A method to programmatically show the overlay.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-100\" | \"base\" | \"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.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "toggleOverlay", - "value": "() => void", - "description": "A method to programmatically toggle the visibility of the overlay.", - "isOptional": true - } - ], - "value": "declare class Modal extends PreactOverlayElement implements ModalProps {\n accessor accessibilityLabel: ModalProps['accessibilityLabel'];\n accessor heading: ModalProps['heading'];\n accessor padding: ModalProps['padding'];\n accessor size: ModalProps['size'];\n /** @private */\n [abortController]: AbortController;\n /** @private */\n [dialog]: HTMLDialogElement | null;\n /** @private */\n [focusedElement]: HTMLElement | null;\n /** @private */\n [nestedModals]: Map;\n /** @private */\n [childrenRerenderObserver]: MutationObserver;\n /** @private */\n [shadowDomRerenderObserver]: MutationObserver;\n /** @private */\n [onEscape]: (event: KeyboardEvent) => void;\n /** @private */\n [onBackdropClick]: (event: MouseEvent) => void;\n /** @private */\n [onChildModalChange]: EventListenerOrEventListenerObject;\n /** @private */\n get [isOpen](): boolean;\n /** @private */\n [dismiss](): void;\n /** @private */\n get [hasOpenChildModal](): boolean;\n /** @private */\n [show](): Promise;\n /** @private */\n [hide](): Promise;\n showOverlay(): void;\n hideOverlay(): void;\n toggleOverlay(): void;\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).", - "type": "ModalEvents", - "typeDefinitions": { - "ModalEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ModalEvents", - "description": "The modal component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "afterhide", - "value": "CallbackEventListener | null", - "description": "A callback fired after the modal is hidden.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "aftershow", - "value": "CallbackEventListener | null", - "description": "A callback fired after the modal is shown.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "hide", - "value": "CallbackEventListener | null", - "description": "A callback fired when the modal is hidden.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "show", - "value": "CallbackEventListener | null", - "description": "A callback fired when the modal is shown.", - "isOptional": true - } - ], - "value": "export interface ModalEvents {\n /**\n * A callback fired when the modal is hidden.\n */\n hide: CallbackEventListener | null = null;\n /**\n * A callback fired when the modal is shown.\n */\n show: CallbackEventListener | null = null;\n /**\n * A callback fired after the modal is hidden.\n */\n afterhide: CallbackEventListener | null = null;\n /**\n * A callback fired after the modal is shown.\n */\n aftershow: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "", - "type": "ModalSlots", - "typeDefinitions": { - "ModalSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ModalSlots", - "description": "The modal component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the modal component, typically including form fields, information, or interactive elements.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "primary-action", - "value": "HTMLElement", - "description": "The main action button displayed in the modal footer, representing the primary action users should take.\n\nOnly accepts a single button component with a `variant` of `primary`. This action should align with the modal's main purpose.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "secondary-actions", - "value": "HTMLElement", - "description": "Additional action buttons displayed in the modal footer, providing alternative or supporting actions.\n\nOnly accepts button components with a `variant` of `secondary` or `auto`. These are visually de-emphasized to establish clear hierarchy.", - "isOptional": true - } - ], - "value": "export interface ModalSlots {\n /**\n * The content displayed within the modal component, typically including form fields, information, or interactive elements.\n */\n children?: HTMLElement;\n /**\n * The main action button displayed in the modal footer, representing the primary action users should take.\n *\n * Only accepts a single button component with a `variant` of `primary`. This action should align with the modal's main purpose.\n */\n 'primary-action'?: HTMLElement;\n /**\n * Additional action buttons displayed in the modal footer, providing alternative or supporting actions.\n *\n * Only accepts button components with a `variant` of `secondary` or `auto`. These are visually de-emphasized to establish clear hierarchy.\n */\n 'secondary-actions'?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "codeblock": { - "title": "Code", - "tabs": [ - { - "title": "jsx", - "code": "<>\n <s-button commandFor=\"modal\">Open</s-button>\n\n <s-modal id=\"modal\" heading=\"Details\">\n <s-paragraph>Displaying more details here.</s-paragraph>\n\n <s-button slot=\"secondary-actions\" commandFor=\"modal\" command=\"--hide\">\n Close\n </s-button>\n <s-button\n slot=\"primary-action\"\n variant=\"primary\"\n commandFor=\"modal\"\n command=\"--hide\"\n >\n Save\n </s-button>\n </s-modal>\n</>", - "language": "jsx", - "editable": false - }, - { - "code": "<s-button commandFor=\"modal\">Open</s-button>\n\n<s-modal id=\"modal\" heading=\"Details\">\n <s-paragraph>Displaying more details here.</s-paragraph>\n\n <s-button slot=\"secondary-actions\" commandFor=\"modal\" command=\"--hide\">\n Close\n </s-button>\n <s-button\n slot=\"primary-action\"\n variant=\"primary\"\n commandFor=\"modal\"\n command=\"--hide\"\n >\n Save\n </s-button>\n</s-modal>\n", - "language": "html", - "customStyles": { - "minHeight": "300px" - }, - "title": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "Basic usage", - "examples": [ - { - "description": "Simple modal with heading and basic content for displaying information. Click the button to open the modal.", - "codeblock": { - "title": "Basic modal", - "tabs": [ - { - "title": "jsx", - "code": "<>\n <s-button commandFor=\"info-modal\" command=\"--show\">\n Show product info\n </s-button>\n\n <s-modal id=\"info-modal\" heading=\"Product information\">\n <s-text>\n This product is currently out of stock and cannot be ordered.\n </s-text>\n\n <s-button slot=\"secondary-actions\" commandFor=\"info-modal\" command=\"--hide\">\n Close\n </s-button>\n </s-modal>\n</>", - "language": "jsx" - }, - { - "title": "html", - "code": "<s-button commandFor=\"info-modal\" command=\"--show\">Show product info</s-button>\n\n<s-modal id=\"info-modal\" heading=\"Product information\">\n <s-text>This product is currently out of stock and cannot be ordered.</s-text>\n\n <s-button slot=\"secondary-actions\" commandFor=\"info-modal\" command=\"--hide\">\n Close\n </s-button>\n</s-modal>\n", - "language": "html" - }, - { - "code": "Show product info\n\n\n This product is currently out of stock and cannot be ordered.\n\n \n Close\n \n\n", - "language": "preview" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Modal with primary and secondary action buttons. Click the button to open the confirmation modal.", - "codeblock": { - "title": "Modal with actions", - "tabs": [ - { - "title": "jsx", - "code": "<s-stack gap=\"base\">\n <s-button tone=\"critical\" commandFor=\"delete-modal\" command=\"--show\">\n Delete product\n </s-button>\n\n <s-modal id=\"delete-modal\" heading=\"Delete product?\">\n <s-stack gap=\"base\">\n <s-text>Are you sure you want to delete \"Winter jacket\"?</s-text>\n <s-text tone=\"caution\">This action cannot be undone.</s-text>\n </s-stack>\n\n <s-button\n slot=\"primary-action\"\n variant=\"primary\"\n tone=\"critical\"\n commandFor=\"delete-modal\"\n command=\"--hide\"\n >\n Delete product\n </s-button>\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n commandFor=\"delete-modal\"\n command=\"--hide\"\n >\n Cancel\n </s-button>\n </s-modal>\n</s-stack>", - "language": "jsx" - }, - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-button tone=\"critical\" commandFor=\"delete-modal\" command=\"--show\">\n Delete product\n </s-button>\n\n <s-modal id=\"delete-modal\" heading=\"Delete product?\">\n <s-stack gap=\"base\">\n <s-text>Are you sure you want to delete \"Winter jacket\"?</s-text>\n <s-text tone=\"caution\">This action cannot be undone.</s-text>\n </s-stack>\n\n <s-button\n slot=\"primary-action\"\n variant=\"primary\"\n tone=\"critical\"\n commandFor=\"delete-modal\"\n command=\"--hide\"\n >\n Delete product\n </s-button>\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n commandFor=\"delete-modal\"\n command=\"--hide\"\n >\n Cancel\n </s-button>\n </s-modal>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Delete product\n \n\n \n \n Are you sure you want to delete \"Winter jacket\"?\n This action cannot be undone.\n \n\n \n Delete product\n \n \n Cancel\n \n \n\n", - "language": "preview" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Modal containing form fields demonstrating how to structure input fields within a modal. Click the button to open the modal.", - "codeblock": { - "title": "Modal with form fields", - "tabs": [ - { - "title": "jsx", - "code": "<s-stack gap=\"base\">\n <s-button variant=\"primary\" commandFor=\"edit-modal\" command=\"--show\">\n Edit customer\n </s-button>\n\n <s-modal id=\"edit-modal\" heading=\"Edit customer information\" size=\"large\">\n <s-stack gap=\"base\">\n <s-text-field\n label=\"Customer name\"\n name=\"name\"\n value=\"Sarah Johnson\"\n />\n\n <s-email-field\n label=\"Email address\"\n name=\"email\"\n value=\"sarah@example.com\"\n />\n\n <s-text-field\n label=\"Phone number\"\n name=\"phone\"\n value=\"+1 555-0123\"\n />\n\n <s-select label=\"Customer group\" name=\"group\">\n <s-option value=\"retail\">Retail</s-option>\n <s-option value=\"wholesale\" selected>\n Wholesale\n </s-option>\n <s-option value=\"vip\">VIP</s-option>\n </s-select>\n </s-stack>\n\n <s-button\n slot=\"primary-action\"\n variant=\"primary\"\n commandFor=\"edit-modal\"\n command=\"--hide\"\n >\n Save changes\n </s-button>\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n commandFor=\"edit-modal\"\n command=\"--hide\"\n >\n Cancel\n </s-button>\n </s-modal>\n</s-stack>", - "language": "jsx" - }, - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-button variant=\"primary\" commandFor=\"edit-modal\" command=\"--show\">\n Edit customer\n </s-button>\n\n <s-modal id=\"edit-modal\" heading=\"Edit customer information\" size=\"large\">\n <s-stack gap=\"base\">\n <s-text-field\n label=\"Customer name\"\n name=\"name\"\n value=\"Sarah Johnson\"\n ></s-text-field>\n\n <s-email-field\n label=\"Email address\"\n name=\"email\"\n value=\"sarah@example.com\"\n ></s-email-field>\n\n <s-text-field\n label=\"Phone number\"\n name=\"phone\"\n value=\"+1 555-0123\"\n ></s-text-field>\n\n <s-select label=\"Customer group\" name=\"group\">\n <s-option value=\"retail\">Retail</s-option>\n <s-option value=\"wholesale\" selected>Wholesale</s-option>\n <s-option value=\"vip\">VIP</s-option>\n </s-select>\n </s-stack>\n\n <s-button\n slot=\"primary-action\"\n variant=\"primary\"\n commandFor=\"edit-modal\"\n command=\"--hide\"\n >\n Save changes\n </s-button>\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n commandFor=\"edit-modal\"\n command=\"--hide\"\n >\n Cancel\n </s-button>\n </s-modal>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Edit customer\n \n\n \n \n \n\n \n\n \n\n \n Retail\n Wholesale\n VIP\n \n \n\n \n Save changes\n \n \n Cancel\n \n \n\n", - "language": "preview" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Demonstrates various modal sizes for different content requirements. Click each button to see different modal sizes.", - "codeblock": { - "title": "Different modal sizes", - "tabs": [ - { - "title": "jsx", - "code": "<s-stack gap=\"base\">\n <s-stack direction=\"inline\" gap=\"base\">\n <s-button commandFor=\"small-modal\" command=\"--show\">\n Small modal\n </s-button>\n <s-button commandFor=\"large-modal\" command=\"--show\">\n Large modal\n </s-button>\n </s-stack>\n\n {/* Small modal for quick confirmations */}\n <s-modal id=\"small-modal\" heading=\"Confirm action\" size=\"small-100\">\n <s-text>Are you sure you want to proceed?</s-text>\n <s-button\n slot=\"primary-action\"\n variant=\"primary\"\n commandFor=\"small-modal\"\n command=\"--hide\"\n >\n Confirm\n </s-button>\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n commandFor=\"small-modal\"\n command=\"--hide\"\n >\n Cancel\n </s-button>\n </s-modal>\n\n {/* Large modal for detailed content */}\n <s-modal id=\"large-modal\" heading=\"Order details\" size=\"large-100\">\n <s-stack gap=\"base\">\n <s-section>\n <s-heading>Order #1001</s-heading>\n <s-text>Placed on March 15, 2024</s-text>\n </s-section>\n\n <s-divider />\n\n <s-section>\n <s-heading>Items</s-heading>\n <s-stack gap=\"small\">\n <s-text>Winter jacket - $89.99</s-text>\n <s-text>Wool scarf - $29.99</s-text>\n <s-text>Leather gloves - $45.99</s-text>\n </s-stack>\n </s-section>\n\n <s-divider />\n\n <s-text type=\"strong\">Total: $165.97</s-text>\n </s-stack>\n\n <s-button\n slot=\"primary-action\"\n variant=\"primary\"\n commandFor=\"large-modal\"\n command=\"--hide\"\n >\n Close\n </s-button>\n </s-modal>\n</s-stack>", - "language": "jsx" - }, - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-stack direction=\"inline\" gap=\"base\">\n <s-button commandFor=\"small-modal\" command=\"--show\">Small modal</s-button>\n <s-button commandFor=\"large-modal\" command=\"--show\">Large modal</s-button>\n </s-stack>\n\n <!-- Small modal for quick confirmations -->\n <s-modal id=\"small-modal\" heading=\"Confirm action\" size=\"small-100\">\n <s-text>Are you sure you want to proceed?</s-text>\n <s-button\n slot=\"primary-action\"\n variant=\"primary\"\n commandFor=\"small-modal\"\n command=\"--hide\"\n >\n Confirm\n </s-button>\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n commandFor=\"small-modal\"\n command=\"--hide\"\n >\n Cancel\n </s-button>\n </s-modal>\n\n <!-- Large modal for detailed content -->\n <s-modal id=\"large-modal\" heading=\"Order details\" size=\"large-100\">\n <s-stack gap=\"base\">\n <s-section>\n <s-heading>Order #1001</s-heading>\n <s-text>Placed on March 15, 2024</s-text>\n </s-section>\n\n <s-divider></s-divider>\n\n <s-section>\n <s-heading>Items</s-heading>\n <s-stack gap=\"small\">\n <s-text>Winter jacket - $89.99</s-text>\n <s-text>Wool scarf - $29.99</s-text>\n <s-text>Leather gloves - $45.99</s-text>\n </s-stack>\n </s-section>\n\n <s-divider></s-divider>\n\n <s-text type=\"strong\">Total: $165.97</s-text>\n </s-stack>\n\n <s-button\n slot=\"primary-action\"\n variant=\"primary\"\n commandFor=\"large-modal\"\n command=\"--hide\"\n >\n Close\n </s-button>\n </s-modal>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Small modal\n Large modal\n \n\n \n \n Are you sure you want to proceed?\n \n Confirm\n \n \n Cancel\n \n \n\n \n \n \n \n Order #1001\n Placed on March 15, 2024\n \n\n \n\n \n Items\n \n Winter jacket - $89.99\n Wool scarf - $29.99\n Leather gloves - $45.99\n \n \n\n \n\n Total: $165.97\n \n\n \n Close\n \n \n\n", - "language": "preview" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Modal with no padding for full-width content. Click to view the modal.", - "codeblock": { - "title": "Modal without padding", - "tabs": [ - { - "title": "jsx", - "code": "<s-stack gap=\"base\">\n <s-button commandFor=\"image-modal\" command=\"--show\">\n View product image\n </s-button>\n\n <s-modal id=\"image-modal\" heading=\"Product image\" padding=\"none\">\n <s-box background=\"subdued\" padding=\"base\">\n <s-text>Image would display here with full width</s-text>\n </s-box>\n\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n commandFor=\"image-modal\"\n command=\"--hide\"\n >\n Close\n </s-button>\n </s-modal>\n</s-stack>", - "language": "jsx" - }, - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-button commandFor=\"image-modal\" command=\"--show\">\n View product image\n </s-button>\n\n <s-modal id=\"image-modal\" heading=\"Product image\" padding=\"none\">\n <s-box background=\"subdued\" padding=\"base\">\n <s-text>Image would display here with full width</s-text>\n </s-box>\n\n <s-button\n slot=\"secondary-actions\"\n variant=\"secondary\"\n commandFor=\"image-modal\"\n command=\"--hide\"\n >\n Close\n </s-button>\n </s-modal>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n View product image\n \n\n \n \n Image would display here with full width\n \n\n \n Close\n \n \n\n", - "language": "preview" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Money field", - "description": "The money field component collects monetary values from users with built-in currency formatting and validation. Use money field for prices, costs, or financial amounts to provide proper currency symbols, decimal handling, and numeric validation.\n\nMoney fields support currency codes, automatic formatting, and min/max constraints to ensure users enter valid monetary values. For non-currency numeric input, use [number field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/number-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/moneyfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Set realistic min/max constraints:** For product prices, use `min={0.01}` to prevent zero prices. For discounts, use `min={0}` and `max={orderTotal}`. For refunds, use `max={amountPaid}`. Always validate against business logic limits.\n- **Provide specific validation feedback:** Instead of **Invalid amount**, show **Price must be at least $0.01** or **Discount can't exceed $50.00 order total**. Explain the exact constraint violated.\n- **Never add currency symbols to labels:** Don't add **$** or other currency symbols to the label or placeholder, as this can create confusion with any currency formatting the component provides.\n- **Label by specific monetary purpose:** Use labels like **Product base price**, **Discount amount**, **Shipping rate per kg**, or **Subscription renewal fee** instead of vague **Amount** or **Price**.\n- **Pre-fill when editing existing values:** Always populate the field with the current value when editing. For new entries, consider smart defaults like **0.00** or typical price points for your product category." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component outputs values as strings, but converting to JavaScript numbers for arithmetic can cause floating-point precision errors. Always perform critical financial calculations on the server using decimal-precise arithmetic or integer cents (multiply by 100).\n- The component formats currency based on the merchant's store currency and locale. The same numeric value might display as **$1,234.56** (en-US) vs **1 234,56 $** (fr-FR). Test your UI with various currency/locale combinations if you operate internationally.\n- Currencies like JPY (¥), KRW (₩), and VND (₫) don't use decimal places. The component might still allow decimal input but this will be invalid for these currencies. Validate the currency's decimal places on the backend.\n- The component doesn't perform currency conversion. If you need to display amounts in multiple currencies, you must handle conversion rates and calculations separately." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the money field component.", - "type": "MoneyField", - "typeDefinitions": { - "MoneyField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyField", - "description": "Configure the following properties on the money field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "string", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.", - "isOptional": true - } - ], - "value": "declare class MoneyField\n extends PreactFieldElement\n implements MoneyFieldProps\n{\n accessor max: MoneyFieldProps['max'];\n accessor min: MoneyFieldProps['min'];\n /**\n * The current monetary value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string representing the amount in the store's currency.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The money field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "MoneyFieldEvents", - "typeDefinitions": { - "MoneyFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "MoneyFieldEvents", - "description": "The money field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the money field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the money field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the money field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the money field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface MoneyFieldEvents {\n /**\n * A callback fired when the money field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the money field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the money field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the money field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "description": "Capture monetary values with automatic currency formatting. This example pairs a label with placeholder text and helper details.", - "codeblock": { - "title": "Collect a currency value", - "tabs": [ - { - "title": "html", - "code": "<s-money-field\n label=\"Regional Price\"\n placeholder=\"99.99\"\n details=\"Recommended price for the European market\"\n></s-money-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Set input boundaries for valid amounts. This example configures min/max limits to constrain the accepted value range.", - "codeblock": { - "title": "Add a label and constraints", - "tabs": [ - { - "title": "html", - "code": "<s-money-field\n label=\"Price\"\n value=\"19.99\"\n min=\"0\"\n max=\"1000\"\n></s-money-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate input problems clearly to users. This example displays an error message when the entered value is invalid.", - "codeblock": { - "title": "Handle validation errors", - "tabs": [ - { - "title": "html", - "code": "<s-money-field\n label=\"Product cost\"\n min=\"0.01\"\n error=\"Product cost is required\"\n></s-money-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Collect multiple monetary values in a single form. This example groups money fields for price, compare-at price, and cost with individual constraints.", - "codeblock": { - "title": "Combine multiple fields in a form", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"block\" gap=\"base\">\n <s-money-field\n label=\"Price\"\n value=\"0.00\"\n min=\"0.01\"\n max=\"99999.99\"\n details=\"Customers will see this price\"\n ></s-money-field>\n\n <s-money-field\n label=\"Compare at price\"\n value=\"\"\n min=\"0\"\n max=\"99999.99\"\n details=\"Show customers the original price when on sale\"\n ></s-money-field>\n\n <s-money-field\n label=\"Cost per item\"\n value=\"\"\n min=\"0\"\n max=\"99999.99\"\n details=\"Customers won't see this\"\n ></s-money-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n \n\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Number field", - "description": "The number field component captures numeric input with built-in number validation. Use it to collect quantities, prices, or other numeric information.\n\nThe component supports min/max constraints and step increments for guided numeric entry. For monetary values with currency formatting, use [money field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/money-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/numberfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for numeric-only input:** Choose the component when you need strictly numeric values like quantities, measurements, or percentages. For values that might contain letters or symbols (like product codes or phone numbers), use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field) instead.\n- **Provide context with units:** Display units of measurement using prefix or suffix to clarify what the number represents. Without context, merchants might not know if they're entering dollars, kilograms, or percentages.\n- **Set realistic constraints:** Define minimum and maximum values that reflect actual business rules. This guides merchants toward valid inputs and prevents unrealistic values before form submission.\n- **Validate and provide clear feedback:** Always validate numeric input and show specific error messages that explain what went wrong and how to fix it. Generic error messages don't help merchants understand what value to enter." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Setting `inputMode` suggests a keyboard layout on mobile but doesn't prevent merchants from entering non-numeric characters. Always validate input values in your `change` event handler." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the number field component.", - "type": "NumberField", - "typeDefinitions": { - "NumberField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberField", - "description": "Configure the following properties on the number field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inputMode", - "value": "\"decimal\" | \"numeric\"", - "description": "The type of virtual keyboard to display on mobile devices.\n\n- `decimal`: Shows a numeric keyboard with a decimal point, suitable for prices or measurements.\n- `numeric`: Shows a numeric keyboard without a decimal point, suitable for whole numbers like quantities.\n\nLearn more about the [inputmode attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode).", - "defaultValue": "'decimal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "max", - "value": "number", - "description": "The highest decimal or integer value accepted for the field. When used with `step`, the value rounds down to the maximum number.\n\nUsers can still type values higher than the maximum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "min", - "value": "number", - "description": "The lowest decimal or integer value accepted for the field. When used with `step`, the value rounds up to the minimum number.\n\nUsers can still type values lower than the minimum using the keyboard. Implement validation to enforce this constraint.", - "defaultValue": "-Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "step", - "value": "number", - "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.", - "defaultValue": "1", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).", - "isOptional": true - } - ], - "value": "declare class NumberField\n extends PreactFieldElement\n implements NumberFieldProps\n{\n /**\n * The current numeric value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value should be a numeric string (decimal or integer).\n */\n get value(): string;\n set value(value: string);\n accessor inputMode: NumberFieldProps['inputMode'];\n accessor step: NumberFieldProps['step'];\n accessor max: NumberFieldProps['max'];\n accessor min: NumberFieldProps['min'];\n accessor prefix: NumberFieldProps['prefix'];\n accessor suffix: NumberFieldProps['suffix'];\n constructor();\n}" - }, - "NumberAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NumberAutocompleteField", - "value": "'one-time-code' | 'cc-number' | 'cc-csc'", - "description": "Represents autocomplete values that are valid for number input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for numeric inputs.\n\nAvailable values:\n- `one-time-code` - One-time codes for authentication (OTP, 2FA codes)\n- `cc-number` - Credit card number\n- `cc-csc` - Credit card security code (CVV/CVC)", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The number field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "NumberFieldEvents", - "typeDefinitions": { - "NumberFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "NumberFieldEvents", - "description": "The number field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the number field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the number field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the number field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the number field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface NumberFieldEvents {\n /**\n * A callback fired when the number field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the number field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the number field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the number field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "numberfield-default.png", - "description": "Collect a numeric value from merchants with step controls and a defined range. This example shows a number field with a label, placeholder, step increment, and min/max bounds.", - "codeblock": { - "title": "Add a basic number field", - "tabs": [ - { - "title": "html", - "code": "<s-number-field\n label=\"Quantity\"\n details=\"Number of items in stock\"\n placeholder=\"0\"\n step=\"5\"\n min=\"0\"\n max=\"100\"\n></s-number-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Add a prefix and suffix to provide context for the expected value, such as a currency symbol or unit. This example shows a price field with a dollar sign prefix, currency suffix, and decimal input mode.", - "codeblock": { - "title": "Add a prefix and suffix for currency input", - "tabs": [ - { - "title": "html", - "code": "<s-number-field\n label=\"Product price\"\n value=\"29.99\"\n prefix=\"$\"\n suffix=\"CAD\"\n inputMode=\"decimal\"\n step=\"0.01\"\n min=\"0\"\n></s-number-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display an error message when a value is outside the accepted range or a required field is empty. This example shows a required number field with an error indicating the minimum allowed value.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-number-field\n label=\"Order quantity\"\n value=\"0\"\n min=\"1\"\n max=\"999\"\n step=\"1\"\n required\n error=\"Quantity must be at least 1\"\n></s-number-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Prevent editing by making a number field read-only or fully disabled. This example shows a read-only price field and a disabled tax rate field, both with pre-filled values.", - "codeblock": { - "title": "Disable or make a number field read-only", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-number-field\n label=\"Base price\"\n value=\"49.99\"\n prefix=\"$\"\n readOnly\n ></s-number-field>\n\n <s-number-field\n label=\"Tax rate\"\n value=\"13\"\n suffix=\"%\"\n disabled\n ></s-number-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Ordered list", - "description": "The ordered list component displays a numbered list of related items in a specific sequence. Use ordered list to present step-by-step instructions, ranked items, procedures, or any content where order and sequence matter to understanding.\n\nOrdered lists automatically number items and support nested lists for hierarchical content organization. For items where order doesn't matter, use [unordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/unordered-list).", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/ordered-list.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use when order matters:** Ordered lists communicate sequence, priority, or ranking. Use them for step-by-step instructions, prioritized recommendations, or any content where the numbering provides meaningful information. When order doesn't matter, use [unordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/unordered-list) instead.\n- **Keep items parallel in structure:** Consistent grammar and structure across list items makes content easier to scan and understand. Mixing different writing styles within a list creates cognitive friction for readers.\n- **Write concise items:** List items work best as brief, scannable content. When items become long or complex, they lose the clarity and efficiency that makes lists valuable. Consider restructuring long items into separate sections.\n- **Limit nesting depth:** Nested lists help organize hierarchical content, but deep nesting becomes difficult to follow. When you find yourself nesting beyond two levels, the content structure might be too complex for a list format." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't support custom numbering styles (like Roman numerals, letters, or custom start numbers). All ordered lists use standard decimal numbering (1, 2, 3). If you need alternative numbering schemes, you'll need to create custom list styling." - } - ], - "definitions": [ - { - "title": "Slots", - "description": "The ordered list component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "OrderedListSlots", - "typeDefinitions": { - "OrderedListSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OrderedListSlots", - "description": "The ordered list component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface OrderedListSlots {\n /**\n * 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.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "List item", - "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.\n\nList 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.", - "type": "ListItem", - "typeDefinitions": { - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The list item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ListItemSlots", - "typeDefinitions": { - "ListItemSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItemSlots", - "description": "The list item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the list item, which represents a single entry in an ordered or unordered list.", - "isOptional": true - } - ], - "value": "export interface ListItemSlots {\n /**\n * The content displayed within the list item, which represents a single entry in an ordered or unordered list.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "ordered-list-default.png", - "description": "Create a numbered list of sequential steps. This example shows a basic ordered list with three setup instructions.", - "codeblock": { - "title": "Add a numbered step list", - "tabs": [ - { - "title": "html", - "code": "<s-ordered-list>\n <s-list-item>Add products to your catalog</s-list-item>\n <s-list-item>Set up payment methods</s-list-item>\n <s-list-item>Configure shipping zones</s-list-item>\n</s-ordered-list>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Add products to your catalog\n Set up payment methods\n Configure shipping zones\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Nest ordered lists inside list items to break down complex steps into sub-steps. This example shows a product setup workflow where the first step has nested instructions.", - "codeblock": { - "title": "Create nested steps with sub-instructions", - "tabs": [ - { - "title": "html", - "code": "<s-ordered-list>\n <s-list-item>\n Create product listing with title and description\n <s-ordered-list>\n <s-list-item>Add high-quality product images</s-list-item>\n <s-list-item>Set SEO title and meta description</s-list-item>\n </s-ordered-list>\n </s-list-item>\n <s-list-item>Configure pricing and inventory tracking</s-list-item>\n <s-list-item>Set up product variants (size, color, material)</s-list-item>\n <s-list-item>Enable inventory tracking and set stock levels</s-list-item>\n <s-list-item>Review and publish product to storefront</s-list-item>\n</s-ordered-list>\n", - "language": "html" - }, - { - "code": "\n \n Create product listing with title and description\n \n Add high-quality product images\n Set SEO title and meta description\n \n \n Configure pricing and inventory tracking\n Set up product variants (size, color, material)\n Enable inventory tracking and set stock levels\n Review and publish product to storefront\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Page", - "description": " Use `s-page` as the main container for placing content in your app. Page comes with preset layouts and automatically adds spacing between elements.", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "requires": "", - "thumbnail": "/assets/templated-apis-screenshots/admin/components/page.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- Always provide a title that describes the current page\n- Include breadcrumbs when the page is part of a flow\n- Include page actions in the header only if they are relevant to the entire page\n- Include no more than one primary action and 3 secondary actions per page\n- Don't include any actions at the bottom of the page" - }, - { - "title": "Content guidelines", - "type": "Generic", - "anchorLink": "content-guidelines", - "sectionContent": "- Use sentence case and avoid unnecessary words\n- Don't include punctuation like periods or exclamation marks\n- Page titles should clearly communicate the page purpose\n- Page actions should use a verb or verb + noun phrase (e.g., \"Create store\", \"Edit product\")" - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Use as the outer wrapper of a page", - "type": "Page", - "typeDefinitions": { - "Page": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Page", - "description": "Use as the outer wrapper of a page.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "string", - "description": "The main page heading", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "\"small\" | \"base\" | \"large\"", - "description": "The inline size of the page\n- `base` corresponds to a set default inline size\n- `large` full width with whitespace", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Page extends PreactCustomElement implements PageProps {\n accessor inlineSize: PageProps['inlineSize'];\n accessor heading: PageProps['heading'];\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "", - "type": "PageSlots", - "typeDefinitions": { - "PageSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PageSlots", - "description": "The page component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "aside", - "value": "HTMLElement", - "description": "The content to display in the aside section of the page.\n\nThis slot is only rendered when `inlineSize` is \"base\".", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "breadcrumb-actions", - "value": "HTMLElement", - "description": "The navigation back actions for the page.\n\nOnly accepts link components.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The main page content displayed within the page component, which serves as the primary container for the page's information and interface elements.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "primary-action", - "value": "HTMLElement", - "description": "The primary action for the page.\n\nOnly accepts a single button component with a `variant` of `primary`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "secondary-actions", - "value": "HTMLElement", - "description": "The secondary actions for the page.\n\nOnly accepts button group and button components with a `variant` of `secondary` or `auto`.", - "isOptional": true - } - ], - "value": "export interface PageSlots {\n /**\n * The main page content displayed within the page component, which serves as the primary container for the page's information and interface elements.\n */\n children?: HTMLElement;\n /**\n * The content to display in the aside section of the page.\n *\n * This slot is only rendered when `inlineSize` is \"base\".\n */\n aside?: HTMLElement;\n /**\n * The primary action for the page.\n *\n * Only accepts a single button component with a `variant` of `primary`.\n *\n */\n 'primary-action'?: HTMLElement;\n /**\n * The secondary actions for the page.\n *\n * Only accepts button group and button components with a `variant` of `secondary` or `auto`.\n */\n 'secondary-actions'?: HTMLElement;\n /**\n * The navigation back actions for the page.\n *\n * Only accepts link components.\n */\n 'breadcrumb-actions'?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "ordered-list-default.png", - "codeblock": { - "title": "", - "tabs": [ - { - "title": "jsx", - "code": "<s-page heading=\"Products\">\n <s-section>\n <s-text>Hello World</s-text>\n </s-section>\n</s-page>", - "language": "jsx", - "editable": false - }, - { - "code": "<s-page heading=\"Products\">\n <s-section>\n <s-text>Hello World</s-text>\n </s-section>\n</s-page>\n", - "language": "html", - "layout": "none", - "title": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "Basic usage", - "examples": [ - { - "description": "Shows a page with a clear heading and descriptive text, illustrating how to use the page component with a title.", - "codeblock": { - "title": "Page with heading", - "tabs": [ - { - "title": "jsx", - "code": "<s-page heading=\"Product catalog\" inlineSize=\"base\">\n <s-section>\n <s-text>Manage your product catalog and inventory.</s-text>\n </s-section>\n</s-page>", - "language": "jsx" - }, - { - "title": "html", - "code": "<s-page heading=\"Product catalog\" inline-size=\"base\">\n <s-section>\n <s-text>Manage your product catalog and inventory.</s-text>\n </s-section>\n</s-page>\n", - "language": "html", - "editable": false - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Illustrates a page with a small inline size, ideal for focused, compact content like settings or forms with minimal information.", - "codeblock": { - "title": "Small inline size for focused content", - "tabs": [ - { - "title": "jsx", - "code": "<s-page heading=\"Store settings\" inlineSize=\"small\">\n <s-section>\n <s-stack gap=\"base\">\n <s-text>Configure your basic store preferences.</s-text>\n <s-text-field label=\"Store name\" />\n <s-button variant=\"primary\">Save</s-button>\n </s-stack>\n </s-section>\n</s-page>", - "language": "jsx" - }, - { - "title": "html", - "code": "<s-page heading=\"Store settings\" inline-size=\"small\">\n <s-section>\n <s-stack gap=\"base\">\n <s-text>Configure your basic store preferences.</s-text>\n <s-text-field label=\"Store name\"></s-text-field>\n <s-button variant=\"primary\">Save</s-button>\n </s-stack>\n </s-section>\n</s-page>\n", - "language": "html", - "editable": false - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Demonstrates a page with a large inline size, perfect for displaying broader content like analytics or dashboards with multiple information sections.", - "codeblock": { - "title": "Large inline size for wide content", - "tabs": [ - { - "title": "jsx", - "code": "<s-page heading=\"Store analytics\" inlineSize=\"large\">\n <s-section>\n <s-stack gap=\"base\">\n <s-text>Monitor your store performance across all channels.</s-text>\n <s-grid>\n <s-grid-item>\n <s-box\n padding=\"base\"\n background=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n borderRadius=\"base\"\n >\n <s-heading>Sales</s-heading>\n <s-text type=\"strong\">$12,456</s-text>\n </s-box>\n </s-grid-item>\n <s-grid-item>\n <s-box\n padding=\"base\"\n background=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n borderRadius=\"base\"\n >\n <s-heading>Orders</s-heading>\n <s-text type=\"strong\">145</s-text>\n </s-box>\n </s-grid-item>\n </s-grid>\n </s-stack>\n </s-section>\n</s-page>", - "language": "jsx" - }, - { - "title": "html", - "code": "<s-page heading=\"Store analytics\" inline-size=\"large\">\n <s-section>\n <s-stack gap=\"base\">\n <s-text>Monitor your store performance across all channels.</s-text>\n <s-grid>\n <s-grid-item>\n <s-box\n padding=\"base\"\n background=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n borderRadius=\"base\"\n >\n <s-heading>Sales</s-heading>\n <s-text type=\"strong\">$12,456</s-text>\n </s-box>\n </s-grid-item>\n <s-grid-item>\n <s-box\n padding=\"base\"\n background=\"base\"\n borderWidth=\"base\"\n borderColor=\"base\"\n borderRadius=\"base\"\n >\n <s-heading>Orders</s-heading>\n <s-text type=\"strong\">145</s-text>\n </s-box>\n </s-grid-item>\n </s-grid>\n </s-stack>\n </s-section>\n</s-page>\n", - "language": "html", - "editable": false - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Shows a page with breadcrumb navigation and a descriptive heading, helping users understand their location in the navigation hierarchy.", - "codeblock": { - "title": "Page with breadcrumbs and title", - "tabs": [ - { - "title": "jsx", - "code": "<s-page heading=\"Edit Product\" inlineSize=\"base\">\n <s-link slot=\"breadcrumb-actions\" href=\"/products\">Products</s-link>\n <s-link slot=\"breadcrumb-actions\" href=\"/products/123\">Acme Widget</s-link>\n <s-section>\n <s-text>Update your product information and settings.</s-text>\n </s-section>\n</s-page>\n", - "language": "jsx" - }, - { - "title": "html", - "code": "<s-page heading=\"Edit Product\" inline-size=\"base\">\n <s-link slot=\"breadcrumb-actions\" href=\"/products\">Products</s-link>\n <s-link slot=\"breadcrumb-actions\" href=\"/products/123\">Acme Widget</s-link>\n <s-section>\n <s-text>Update your product information and settings.</s-text>\n </s-section>\n</s-page>\n", - "language": "html", - "editable": false - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Demonstrates a page with a primary action button and secondary action buttons, showing how to provide main and related actions alongside the page heading.", - "codeblock": { - "title": "Page with primary and secondary actions", - "tabs": [ - { - "title": "jsx", - "code": "<s-page heading=\"Products\" inlineSize=\"base\">\n <s-button slot=\"secondary-actions\">Preview</s-button>\n <s-button slot=\"secondary-actions\">Duplicate</s-button>\n <s-button slot=\"primary-action\" variant=\"primary\">Save</s-button>\n <s-section>\n <s-text>Manage your products and organize your catalog.</s-text>\n </s-section>\n</s-page>\n", - "language": "jsx" - }, - { - "title": "html", - "code": "<s-page heading=\"Products\" inline-size=\"base\">\n <s-button slot=\"secondary-actions\">Preview</s-button>\n <s-button slot=\"secondary-actions\">Duplicate</s-button>\n <s-button slot=\"primary-action\" variant=\"primary\">Save</s-button>\n <s-section>\n <s-text>Manage your products and organize your catalog.</s-text>\n </s-section>\n</s-page>\n", - "language": "html", - "editable": false - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Paragraph", - "description": "The paragraph component displays blocks of text content and can contain inline elements like buttons, links, or emphasized text. Use paragraph to present standalone blocks of readable content, descriptions, or explanatory text.\n\nParagraphs support alignment options and can wrap inline components to create rich, formatted content blocks. For inline text styling, use [text](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/text).", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/paragraph.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Write in short, scannable blocks:** Keep paragraphs to 2-4 sentences to improve readability. Merchants scan more than they read, so break long content into digestible chunks. Use plain language and avoid jargon.\n- **Apply tones to communicate intent:** Use semantic tones like critical for errors, caution for warnings, and success for confirmations. Tones help merchants quickly understand the nature of information, but don't rely on color alone—pair with clear language.\n- **Consider accessibility in all contexts:** Use screen-reader-only text to provide context that sighted merchants get from layout or icons. Make sure tone colors have sufficient contrast for readability.\n- **Use line clamping strategically:** Line clamping helps manage space in constrained layouts like cards or previews, but truncated content should never hide critical information." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Paragraphs render as block-level elements with spacing above and below. This spacing is designed for body content and might create unwanted gaps in tightly packed layouts.\n- Line clamping truncates text visually but doesn't provide tooltips or expandable content. Truncated information isn't fully accessible unless you provide an alternative way to view the complete text.\n- Tone colors are optimized for light backgrounds. Using toned paragraphs on dark or colored backgrounds might result in insufficient contrast for accessibility." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the paragraph component.", - "type": "Paragraph", - "typeDefinitions": { - "Paragraph": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Paragraph", - "description": "Configure the following properties on the paragraph component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "lineClamp", - "value": "number", - "description": "The maximum number of lines to display before truncating the text content.\n\nLearn more about the [-webkit-line-clamp property](https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-line-clamp).", - "defaultValue": "Infinity - no truncation is applied", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"caution\"", - "description": "The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Paragraph extends PreactCustomElement implements ParagraphProps {\n accessor fontVariantNumeric: ParagraphProps['fontVariantNumeric'];\n accessor lineClamp: ParagraphProps['lineClamp'];\n /**\n * The semantic tone that's applied to the paragraph text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: ParagraphProps['tone'];\n\n accessor color: ParagraphProps['color'];\n accessor dir: ParagraphProps['dir'];\n accessor accessibilityVisibility: ParagraphProps['accessibilityVisibility'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The paragraph component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ParagraphSlots", - "typeDefinitions": { - "ParagraphSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ParagraphSlots", - "description": "The paragraph component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The paragraph text content displayed within the paragraph component, which presents a block of related text with appropriate styling.", - "isOptional": true - } - ], - "value": "export interface ParagraphSlots {\n /**\n * The paragraph text content displayed within the paragraph component, which presents a block of related text with appropriate styling.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "paragraph-default.png", - "description": "Create a paragraph for body text content. This example shows the basic paragraph component using default styling.", - "codeblock": { - "title": "Add a basic paragraph", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph>\n Shopify POS is the easiest way to sell your products in person. Available for\n iPad, iPhone, and Android.\n</s-paragraph>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Shopify POS is the easiest way to sell your products in person. Available for\n iPad, iPhone, and Android.\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Apply semantic tones to convey different types of information through color. This example shows all five tones—`info`, `success`, `caution`, `warning`, and `critical`—for common merchant-facing messages.", - "codeblock": { - "title": "Communicate status with tones", - "tabs": [ - { - "title": "html", - "code": "<s-section>\n <s-paragraph tone=\"info\" color=\"base\">\n Your order will be processed within 2-3 business days.\n </s-paragraph>\n\n <s-paragraph tone=\"success\" color=\"base\">\n Payment successfully processed.\n </s-paragraph>\n\n <s-paragraph tone=\"caution\" color=\"base\">\n Review shipping address before processing.\n </s-paragraph>\n\n <s-paragraph tone=\"warning\" color=\"base\">\n Inventory levels are running low for this product.\n </s-paragraph>\n\n <s-paragraph tone=\"critical\" color=\"base\">\n This order requires immediate attention due to shipping delays.\n </s-paragraph>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n Your order will be processed within 2-3 business days.\n \n\n \n Payment successfully processed.\n \n\n \n Review shipping address before processing.\n \n\n \n Inventory levels are running low for this product.\n \n\n \n This order requires immediate attention due to shipping delays.\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Limit the number of visible lines in a paragraph using the `lineClamp` property. This example shows a product description truncated to a single line with an ellipsis in a constrained container.", - "codeblock": { - "title": "Truncate long text with line clamping", - "tabs": [ - { - "title": "html", - "code": "<s-box inlineSize=\"300px\">\n <s-paragraph lineClamp=\"1\">\n Premium organic cotton t-shirt featuring sustainable manufacturing\n processes, ethically sourced materials, and carbon-neutral shipping.\n Available in multiple colors and sizes with customization options for your\n brand.\n </s-paragraph>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n Premium organic cotton t-shirt featuring sustainable manufacturing\n processes, ethically sourced materials, and carbon-neutral shipping.\n Available in multiple colors and sizes with customization options for your\n brand.\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use `fontVariantNumeric` set to tabular-nums to render numbers with consistent widths for even alignment. This example shows tabular number formatting for financial data.", - "codeblock": { - "title": "Align numbers with tabular formatting", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph fontVariantNumeric=\"tabular-nums\">\n Orders: 1,234 Revenue: $45,678.90 Customers: 890\n</s-paragraph>\n", - "language": "html" - }, - { - "code": "\n Orders: 1,234 Revenue: $45,678.90 Customers: 890\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `accessibilityVisibility` property to create text that is only available to screen readers. This example shows a paragraph providing sort context for a table that assistive technologies can read.", - "codeblock": { - "title": "Add screen-reader-only text", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph accessibilityVisibility=\"exclusive\">\n Table sorted by date, newest first.\n</s-paragraph>\n", - "language": "html" - }, - { - "code": "\n Table sorted by date, newest first.\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `color` property to `subdued` for secondary information like helper text, disclaimers, and supplementary descriptions. This example shows a subdued paragraph providing guidance below a form action.", - "codeblock": { - "title": "De-emphasize secondary text with subdued color", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph color=\"subdued\">\n Changes will take effect the next time the customer visits your store.\n</s-paragraph>\n", - "language": "html" - }, - { - "code": "\n Changes will take effect the next time the customer visits your store.\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `dir` property to rtl for right-to-left languages like Arabic and Hebrew. This example shows a paragraph rendered in Arabic with right-to-left text direction.", - "codeblock": { - "title": "Render right-to-left text", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph dir=\"rtl\">\n محتوى النص باللغة العربية\n</s-paragraph>", - "language": "html" - }, - { - "code": "\n محتوى النص باللغة العربية\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Password field", - "description": "The password field component securely collects sensitive information from users. Use password field for password entry, where input characters are automatically masked for privacy.\n\nPassword fields support validation, help text, and accessibility features to create secure and user-friendly authentication experiences. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/passwordfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Support password managers:** Ensure the component works correctly with password managers by setting appropriate autocomplete values. Password managers help merchants create and store strong passwords, improving overall security.\n- **Communicate requirements clearly:** Show all password requirements before merchants start typing, not after they've already entered an invalid password. This prevents frustration and reduces form abandonment.\n- **Provide helpful feedback for password creation:** When merchants create new passwords, show real-time strength feedback and explain what would make their password stronger. Help them understand security trade-offs rather than just enforcing arbitrary rules.\n- **Never block paste functionality:** Merchants rely on password managers and other tools that use paste. Blocking paste forces merchants toward weaker passwords they can remember and type manually.\n- **Validate server-side:** Always validate passwords on the server. Client-side constraints can be bypassed by password managers, browser extensions, or merchants with developer tools. Use client-side validation for immediate feedback, not security." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't include a built-in show/hide password toggle. If you need this feature (recommended for better UX), you must implement it yourself by conditionally switching between a password field and a text field." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the password field component.", - "type": "PasswordField", - "typeDefinitions": { - "PasswordField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordField", - "description": "Configure the following properties on the password field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | PasswordAutocompleteField | `section-${string} current-password` | `section-${string} new-password` | \"shipping current-password\" | \"shipping new-password\" | \"billing current-password\" | \"billing new-password\" | `section-${string} shipping current-password` | `section-${string} shipping new-password` | `section-${string} billing current-password` | `section-${string} billing new-password`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.", - "isOptional": true - } - ], - "value": "declare class PasswordField\n extends PreactFieldElement\n implements PasswordFieldProps\n{\n accessor maxLength: PasswordFieldProps['maxLength'];\n accessor minLength: PasswordFieldProps['minLength'];\n /**\n * The current password value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The value is masked in the UI for security.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "PasswordAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PasswordAutocompleteField", - "value": "'current-password' | 'new-password'", - "description": "Represents autocomplete values that are valid for password input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for password inputs.\n\nAvailable values:\n- `current-password` - Existing password for login or authentication\n- `new-password` - New password when creating an account or changing password", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The password field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "PasswordFieldEvents", - "typeDefinitions": { - "PasswordFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PasswordFieldEvents", - "description": "The password field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the password field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the password field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the password field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the password field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface PasswordFieldEvents {\n /**\n * A callback fired when the password field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the password field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the password field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the password field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "description": "Securely collect sensitive credentials from users. This example pairs a label with masked input.", - "codeblock": { - "title": "Collect a password", - "tabs": [ - { - "title": "html", - "code": "<s-password-field\n label=\"Password\"\n placeholder=\"Enter your password\"\n details=\"Must be at least 8 characters long\"\n minLength=\"8\"\n></s-password-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Enforce password requirements before submission. This example configures a required field with minimum length validation and autocomplete for new passwords.", - "codeblock": { - "title": "Set validation rules", - "tabs": [ - { - "title": "html", - "code": "<s-password-field\n label=\"Password\"\n name=\"password\"\n required\n minLength=\"8\"\n autocomplete=\"new-password\"\n></s-password-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate password problems clearly to users. This example displays an error message when the password doesn't meet length requirements.", - "codeblock": { - "title": "Show validation errors", - "tabs": [ - { - "title": "html", - "code": "<s-password-field\n label=\"Password\"\n name=\"password\"\n error=\"Password must be at least 8 characters\"\n minLength=\"8\"\n autocomplete=\"new-password\"\n></s-password-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Help users understand password requirements upfront. This example adds helper text beneath the field explaining what makes a valid password.", - "codeblock": { - "title": "Add helper text", - "tabs": [ - { - "title": "html", - "code": "<s-password-field\n label=\"Create password\"\n name=\"new-password\"\n details=\"Password must be at least 8 characters and include uppercase, lowercase, and numbers\"\n minLength=\"8\"\n autocomplete=\"new-password\"\n></s-password-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Create a complete authentication form. This example combines a password field with an email field for login or registration.", - "codeblock": { - "title": "Build a login form", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-email-field\n label=\"Email\"\n name=\"email\"\n autocomplete=\"username\"\n required\n ></s-email-field>\n <s-password-field\n label=\"Password\"\n name=\"password\"\n autocomplete=\"current-password\"\n required\n ></s-password-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display a password requirements checklist alongside the field. This example lists requirements like character length and case requirements.", - "codeblock": { - "title": "Display a requirement checklist", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"large-100\">\n <s-password-field\n label=\"Create password\"\n name=\"password\"\n value=\"example-password\"\n autocomplete=\"new-password\"\n required\n ></s-password-field>\n <s-stack gap=\"small-200\">\n <s-text tone=\"success\">✓ At least 8 characters</s-text>\n <s-text color=\"subdued\">○ Contains uppercase letter</s-text>\n <s-text color=\"subdued\">○ Contains lowercase letter</s-text>\n <s-text color=\"subdued\">○ Contains number</s-text>\n </s-stack>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n ✓ At least 8 characters\n ○ Contains uppercase letter\n ○ Contains lowercase letter\n ○ Contains number\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Popover", - "description": "Popovers are used to display content in an overlay that can be triggered by a button.", - "category": "Web components", - "subCategory": "Overlays", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/popover.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Usage", - "type": "Generic", - "anchorLink": "usage", - "sectionContent": "Popovers are closed by default and should be triggered by a button using the `commandFor` attribute. The button's `commandFor` value should match the popover's `id`. The popover's position is determined by the button that triggers it." - }, - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- Use for secondary or less important information and actions since they're hidden until triggered\n- Contain actions that share a relationship to each other\n- Be triggered by a clearly labeled default or tertiary button" - }, - { - "title": "Content guidelines", - "type": "Generic", - "anchorLink": "content-guidelines", - "sectionContent": "- Use clear action verbs in the {verb}+{noun} format (e.g., \"Create order\", \"Edit HTML\")\n- Avoid unnecessary words like \"the\", \"an\", or \"a\"" - } - ], - "definitions": [ - { - "title": "Properties", - "description": "", - "type": "Popover", - "typeDefinitions": { - "Popover": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Popover", - "description": "Configure the following properties on the popover component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@16327", - "value": "HTMLElement", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@16326", - "value": "boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@16328", - "value": "number", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about the [block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "description": "The horizontal size of the element in standard layouts (width in left-to-right or right-to-left writing modes).\n\nInline size adjusts based on the writing direction: in horizontal layouts, it controls the width; in vertical layouts, it controls the height. This ensures consistent behavior across different text directions.\n\nLearn more about the [inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size).\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum vertical size of the element in standard layouts (max-height in left-to-right or right-to-left writing modes).\n\nPrevents the element from becoming larger than this size along the block axis.\n\nLearn more about the [max-block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum horizontal size of the element in standard layouts (max-width in left-to-right or right-to-left writing modes).\n\nPrevents the element from becoming larger than this size along the inline axis.\n\nLearn more about the [max-inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum vertical size of the element in standard layouts (min-height in left-to-right or right-to-left writing modes).\n\nPrevents the element from becoming smaller than this size along the block axis.\n\nLearn more about the [min-block-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum horizontal size of the element in standard layouts (min-width in left-to-right or right-to-left writing modes).\n\nPrevents the element from becoming smaller than this size along the inline axis.\n\nLearn more about the [min-inline-size property](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Popover\n extends PreactPopoverElement\n implements PopoverProps\n{\n constructor();\n}" - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "Learn more about [registering events](/docs/api/app-home/using-polaris-components#event-handling).", - "type": "PopoverEvents", - "typeDefinitions": { - "PopoverEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PopoverEvents", - "description": "The popover component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "afterhide", - "value": "CallbackEventListener | null", - "description": "A callback fired after the popover is hidden.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "aftershow", - "value": "CallbackEventListener | null", - "description": "A callback fired after the popover is shown.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "aftertoggle", - "value": "CallbackEventListener | null", - "description": "A callback fired after the popover is toggled.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "hide", - "value": "CallbackEventListener | null", - "description": "A callback fired when the popover is hidden.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "show", - "value": "CallbackEventListener | null", - "description": "A callback fired when the popover is shown.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "toggle", - "value": "CallbackEventListener | null", - "description": "A callback fired when the popover is toggled.", - "isOptional": true - } - ], - "value": "export interface PopoverEvents {\n /**\n * A callback fired when the popover is shown.\n */\n show: CallbackEventListener | null;\n /**\n * A callback fired when the popover is hidden.\n */\n hide: CallbackEventListener | null;\n /**\n * A callback fired after the popover is shown.\n */\n aftershow: CallbackEventListener | null;\n /**\n * A callback fired after the popover is hidden.\n */\n afterhide: CallbackEventListener | null;\n /**\n * A callback fired when the popover is toggled.\n */\n toggle: CallbackEventListener | null;\n /**\n * A callback fired after the popover is toggled.\n */\n aftertoggle: CallbackEventListener | null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "", - "type": "PopoverSlots", - "typeDefinitions": { - "PopoverSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "PopoverSlots", - "description": "The popover component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the popover component, which appears in an overlay positioned relative to its trigger element.", - "isOptional": true - } - ], - "value": "export interface PopoverSlots {\n /**\n * The content displayed within the popover component, which appears in an overlay positioned relative to its trigger element.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "codeblock": { - "title": "Code", - "tabs": [ - { - "title": "jsx", - "code": "<>\n <s-button commandFor=\"product-options-popover\">Product options</s-button>\n\n <s-popover id=\"product-options-popover\">\n <s-stack direction=\"block\">\n <s-button variant=\"tertiary\">Import</s-button>\n <s-button variant=\"tertiary\">Export</s-button>\n </s-stack>\n </s-popover>\n</>", - "language": "jsx", - "editable": false - }, - { - "code": " \n
\n\n\n", - "language": "preview" - }, - { - "title": "html", - "code": "<s-button commandFor=\"product-options-popover\">Product options</s-button>\n\n<s-popover id=\"product-options-popover\">\n <s-stack direction=\"block\">\n <s-button variant=\"tertiary\">Import</s-button>\n <s-button variant=\"tertiary\">Export</s-button>\n </s-stack>\n</s-popover>\n", - "language": "html", - "editable": false - }, - { - "code": "
Product options\n\n\n \n Import\n Export\n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "Basic usage", - "examples": [ - { - "description": "Popover displaying admin notifications such as new orders, inventory alerts, and payment confirmations, demonstrating how popovers can show informational content without cluttering the main interface.", - "codeblock": { - "title": "Popover with notifications", - "tabs": [ - { - "title": "jsx", - "code": "<>\n <s-button commandFor=\"notifications-popover\" icon=\"notification\">\n Notifications\n </s-button>\n\n <s-popover id=\"notifications-popover\">\n <s-box padding=\"base\">\n <s-stack gap=\"small-200\">\n <s-stack gap=\"small\">\n <s-heading>New order received</s-heading>\n <s-paragraph color=\"subdued\">Order #1234 was placed 5 minutes ago</s-paragraph>\n </s-stack>\n\n <s-divider />\n\n <s-stack gap=\"small\">\n <s-heading>Low inventory alert</s-heading>\n <s-paragraph color=\"subdued\">3 products are running low on stock</s-paragraph>\n </s-stack>\n\n <s-divider />\n\n <s-stack gap=\"small\">\n <s-heading>Payment processed</s-heading>\n <s-paragraph color=\"subdued\">$250.00 payment confirmed for order #1230</s-paragraph>\n </s-stack>\n </s-stack>\n </s-box>\n </s-popover>\n</>", - "language": "jsx" - }, - { - "code": " \n
\n\n\n", - "language": "preview" - }, - { - "title": "html", - "code": "<s-button commandFor=\"notifications-popover\" icon=\"notification\">\n Notifications\n</s-button>\n\n<s-popover id=\"notifications-popover\">\n <s-box padding=\"base\">\n <s-stack gap=\"small-200\">\n <s-stack gap=\"small\">\n <s-heading>New order received</s-heading>\n <s-paragraph color=\"subdued\">\n Order #1234 was placed 5 minutes ago\n </s-paragraph>\n </s-stack>\n\n <s-divider />\n\n <s-stack gap=\"small\">\n <s-heading>Low inventory alert</s-heading>\n <s-paragraph color=\"subdued\">\n 3 products are running low on stock\n </s-paragraph>\n </s-stack>\n\n <s-divider />\n\n <s-stack gap=\"small\">\n <s-heading>Payment processed</s-heading>\n <s-paragraph color=\"subdued\">\n $250.00 payment confirmed for order #1230\n </s-paragraph>\n </s-stack>\n </s-stack>\n </s-box>\n</s-popover>\n", - "language": "html" - }, - { - "code": "
\n Notifications\n\n\n\n \n \n \n New order received\n \n Order #1234 was placed 5 minutes ago\n \n \n\n \n\n \n Low inventory alert\n \n 3 products are running low on stock\n \n \n\n \n\n \n Payment processed\n \n $250.00 payment confirmed for order #1230\n \n \n \n \n\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Popover containing a choice list and action button demonstrating how popovers can be used for settings and configuration interfaces.", - "codeblock": { - "title": "Popover with choice list", - "tabs": [ - { - "title": "jsx", - "code": "<>\n <s-button commandFor=\"table-settings-popover\" icon=\"settings\">\n Columns\n </s-button>\n\n <s-popover id=\"table-settings-popover\">\n <s-box padding=\"base\">\n <s-stack gap=\"small-200\">\n <s-stack gap=\"small\">\n <s-heading>Choose columns to display</s-heading>\n <s-choice-list label=\"Select columns to display\">\n <s-choice value=\"sku\" selected>\n Sku\n </s-choice>\n <s-choice value=\"inventory\" selected>\n Inventory\n </s-choice>\n <s-choice value=\"price\" selected>\n Price\n </s-choice>\n <s-choice value=\"vendor\">Vendor</s-choice>\n <s-choice value=\"type\">Product type</s-choice>\n </s-choice-list>\n </s-stack>\n <s-button variant=\"primary\">Apply changes</s-button>\n </s-stack>\n </s-box>\n </s-popover>\n</>", - "language": "jsx" - }, - { - "code": " \n
\n\n\n", - "language": "preview" - }, - { - "title": "html", - "code": "<s-button commandFor=\"table-settings-popover\" disclosure=\"true\" icon=\"settings\">\n Columns\n</s-button>\n\n<s-popover id=\"table-settings-popover\">\n <s-box padding=\"base\">\n <s-stack gap=\"small-200\">\n <s-stack gap=\"small\">\n <s-heading>Choose columns to display</s-heading>\n <s-choice-list label=\"Select columns to display\">\n <s-choice value=\"sku\" selected>Sku</s-choice>\n <s-choice value=\"inventory\" selected>Inventory</s-choice>\n <s-choice value=\"price\" selected>Price</s-choice>\n <s-choice value=\"vendor\">Vendor</s-choice>\n <s-choice value=\"type\">Product type</s-choice>\n </s-choice-list>\n </s-stack>\n <s-button variant=\"primary\">Apply changes</s-button>\n </s-stack>\n </s-box>\n</s-popover>\n", - "language": "html" - }, - { - "code": "
\n Columns\n\n\n\n \n \n \n Choose columns to display\n \n Sku\n Inventory\n Price\n Vendor\n Product type\n \n \n Apply changes\n \n \n\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Popover displaying detailed inventory information using Box padding instead of Section, demonstrating an alternative layout approach for data-focused content.", - "codeblock": { - "title": "Popover with inventory details", - "tabs": [ - { - "title": "jsx", - "code": "<>\n <s-button commandFor=\"stock-popover\" icon=\"info\">\n Stock details\n </s-button>\n\n <s-popover id=\"stock-popover\">\n <s-box padding=\"base\">\n <s-stack gap=\"small\">\n <s-stack gap=\"small-200\">\n <s-stack direction=\"inline\" justifyContent=\"space-between\">\n <s-text color=\"subdued\">Available</s-text>\n <s-text>127 units</s-text>\n </s-stack>\n\n <s-stack direction=\"inline\" justifyContent=\"space-between\">\n <s-text color=\"subdued\">Reserved</s-text>\n <s-text>15 units</s-text>\n </s-stack>\n\n <s-stack direction=\"inline\" justifyContent=\"space-between\">\n <s-text color=\"subdued\">In transit</s-text>\n <s-text>50 units</s-text>\n </s-stack>\n </s-stack>\n\n <s-divider />\n\n <s-stack direction=\"inline\" justifyContent=\"space-between\">\n <s-text>Total stock</s-text>\n <s-text>192 units</s-text>\n </s-stack>\n\n <s-button variant=\"secondary\">View full inventory report</s-button>\n </s-stack>\n </s-box>\n </s-popover>\n</>\n", - "language": "jsx" - }, - { - "code": " \n
\n\n\n", - "language": "preview" - }, - { - "title": "html", - "code": "<s-button commandFor=\"stock-popover\" icon=\"info\">\n Stock details\n</s-button>\n\n<s-popover id=\"stock-popover\">\n <s-box padding=\"base\">\n <s-stack gap=\"small\">\n <s-stack gap=\"small-200\">\n <s-stack direction=\"inline\" justifyContent=\"space-between\">\n <s-text color=\"subdued\">Available</s-text>\n <s-text>127 units</s-text>\n </s-stack>\n\n <s-stack direction=\"inline\" justifyContent=\"space-between\">\n <s-text color=\"subdued\">Reserved</s-text>\n <s-text>15 units</s-text>\n </s-stack>\n\n <s-stack direction=\"inline\" justifyContent=\"space-between\">\n <s-text color=\"subdued\">In transit</s-text>\n <s-text>50 units</s-text>\n </s-stack>\n </s-stack>\n\n <s-divider />\n\n <s-stack direction=\"inline\" justifyContent=\"space-between\">\n <s-text>Total stock</s-text>\n <s-text>192 units</s-text>\n </s-stack>\n\n <s-button variant=\"secondary\">View full inventory report</s-button>\n </s-stack>\n </s-box>\n</s-popover>\n", - "language": "html" - }, - { - "code": "
\n Stock details\n\n\n\n \n \n \n \n Available\n 127 units\n \n\n \n Reserved\n 15 units\n \n\n \n In transit\n 50 units\n \n \n\n \n\n \n Total stock\n 192 units\n \n\n View full inventory report\n \n \n\n
", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Query container", - "description": "The query container component establishes a container query context for responsive design. Use query container to define an element as a containment context, enabling child components or styles to adapt based on the container's size rather than viewport width.\n\nQuery containers support modern responsive patterns where components respond to their container dimensions, creating more flexible and reusable layouts.", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "requires": "", - "thumbnail": "/assets/templated-apis-screenshots/admin/components/querycontainer.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for component-level responsiveness:** Query containers allow components to adapt based on their container size rather than viewport size. This is valuable for components that appear in different contexts with varying widths, like a product card that might appear in a sidebar or main content area.\n- **Name containers when you have multiple:** When you have multiple query container components and need to target specific ones with different queries, provide descriptive container names. Without names, all containers respond to the same queries.\n- **Understand the relationship with CSS:** query container establishes the containment context, but you must write the actual container query CSS rules. The component doesn't automatically make content responsive - it enables you to write responsive CSS.\n- **Consider performance impact:** Each query container adds browser work to track container dimensions and apply conditional styles. Use them where you need container-based responsiveness, not as a wrapper for every element." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The query container component doesn't expose the container's current dimensions to JavaScript. It's purely for enabling CSS container queries. If you need to access container dimensions programmatically, you'll need to use the [Resize Observer API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver) directly." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the query container component.", - "type": "QueryContainer", - "typeDefinitions": { - "QueryContainer": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainer", - "description": "Configure the following properties on the query container component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "containerName", - "value": "string", - "description": "An identifier for this container that you can reference in CSS container queries to apply styles based on this specific container's size.\n\nAll 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)`.\n\nWhen 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)`.\n\nLearn more about the [container-name property](https://developer.mozilla.org/en-US/docs/Web/CSS/container-name).", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class QueryContainer\n extends PreactCustomElement\n implements QueryContainerProps\n{\n accessor containerName: QueryContainerProps['containerName'];\n /** @private */\n static globalStylesApplied: boolean;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The query container component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "QueryContainerSlots", - "typeDefinitions": { - "QueryContainerSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "QueryContainerSlots", - "description": "The query container component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface QueryContainerSlots {\n /**\n * 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.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "ordered-list-default.png", - "description": "Wrap content in a query container to enable responsive styling based on the container's width. This example shows a box whose padding changes when the container exceeds 500px.", - "codeblock": { - "title": "Add a responsive container", - "tabs": [ - { - "title": "html", - "code": "<s-query-container>\n <s-box\n padding=\"@container (inline-size > 500px) large-500, none\"\n background=\"strong\"\n >\n Padding is applied when the inline-size '>' 500px\n </s-box>\n</s-query-container>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n 500px) large-500, none\"\n background=\"strong\"\n >\n Padding is applied when the inline-size '>' 500px\n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `containerName` property to target a specific query container when multiple containers are present. This example shows the same named container at two different widths (375px and 450px) to demonstrate how the responsive padding changes at the 400px breakpoint.", - "codeblock": { - "title": "Target a named container for responsive queries", - "tabs": [ - { - "title": "html", - "code": "<s-box inlineSize=\"375px\">\n <s-query-container id=\"product-section\" containerName=\"product\">\n <s-box padding=\"@container product (inline-size > 400px) large-500, none\">\n <s-text>Padding is different depending on the container size</s-text>\n </s-box>\n </s-query-container>\n</s-box>\n\n<s-box inlineSize=\"450px\">\n <s-query-container id=\"product-section\" containerName=\"product\">\n <s-box padding=\"@container product (inline-size > 400px) large-500, none\">\n <s-text>Padding is different depending on the container size</s-text>\n </s-box>\n </s-query-container>\n</s-box>\n", - "language": "html" - }, - { - "code": "\n \n 400px) large-500, none\">\n Padding is different depending on the container size\n \n \n\n\n\n \n 400px) large-500, none\">\n Padding is different depending on the container size\n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Search field", - "description": "The search field component captures search terms for filtering and search functionality. Use it to enable inline search within specific sections or lists, like filtering products or searching customers. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/searchfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for inline search:** Choose the component for filtering content within specific sections or lists. For global navigation or complex multi-step searches, use a more robust search pattern.\n- **Make the search scope clear:** Users need to understand what they're searching through. Use specific labels and placeholders that explain what content will be searched and what attributes they can search by.\n- **Provide immediate feedback:** Show search results or filtered content as merchants type when possible. Immediate feedback helps merchants refine their search query and builds confidence in the search functionality.\n- **Handle empty states gracefully:** When the search field is cleared or returns no results, show appropriate messaging. For cleared searches, restore the full content list. For no results, suggest alternative actions or broaden the search criteria.\n- **Set appropriate search thresholds:** Prevent searches that would return overwhelming or meaningless results. Starting searches after 2-3 characters gives the system enough information to provide useful results." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the search field component.", - "type": "SearchField", - "typeDefinitions": { - "SearchField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchField", - "description": "Configure the following properties on the search field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.", - "isOptional": true - } - ], - "value": "declare class SearchField\n extends PreactFieldElement\n implements SearchFieldProps\n{\n accessor maxLength: SearchFieldProps['maxLength'];\n accessor minLength: SearchFieldProps['minLength'];\n /**\n * The current search query value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The search field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "SearchFieldEvents", - "typeDefinitions": { - "SearchFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SearchFieldEvents", - "description": "The search field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the search field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the search field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the search field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the search field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface SearchFieldEvents {\n /**\n * A callback fired when the search field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the search field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the search field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the search field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "searchfield-default.png", - "description": "Add a search input so merchants can find items quickly. This example shows a search field with a visually hidden label and placeholder text.", - "codeblock": { - "title": "Add a basic search field", - "tabs": [ - { - "title": "html", - "code": "<s-search-field\n label=\"Search\"\n labelAccessibilityVisibility=\"exclusive\"\n placeholder=\"Search items\"\n></s-search-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Display an error message when a search query is invalid or encounters a problem. This example shows a search field with a pre-filled query and a static error message.", - "codeblock": { - "title": "Show a search error", - "tabs": [ - { - "title": "html", - "code": "<s-search-field\n label=\"Search orders\"\n name=\"orderSearch\"\n error=\"No results found\"\n value=\"xyz123\"\n></s-search-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Disable a search field to prevent interaction when search is temporarily unavailable. This example shows a disabled search field with placeholder text explaining the state.", - "codeblock": { - "title": "Disable a search field", - "tabs": [ - { - "title": "html", - "code": "<s-search-field\n label=\"Search customers\"\n name=\"customerSearch\"\n disabled\n placeholder=\"Search is currently unavailable\"\n></s-search-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set minimum and maximum character lengths to control the search query length. This example shows a search field that requires at least 3 characters and allows up to 50.", - "codeblock": { - "title": "Set character length limits", - "tabs": [ - { - "title": "html", - "code": "<s-search-field\n label=\"Search collections\"\n name=\"collectionSearch\"\n minLength=\"3\"\n maxLength=\"50\"\n placeholder=\"Enter at least 3 characters\"\n></s-search-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Section", - "description": "The section component groups related content into clearly-defined thematic areas with consistent styling and structure. Use section to organize page content into logical blocks, each with its own heading and visual container.\n\nSections automatically adapt their styling based on nesting depth and adjust heading levels to maintain meaningful, accessible page hierarchies. For simple visual separation without headings, use [divider](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/divider).", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "isVisualComponent": true, - "thumbnail": "/assets/templated-apis-screenshots/admin/components/section.png", - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use to group related content:** The component provides semantic structure and visual hierarchy for grouping related content. Each section should contain a cohesive set of information or controls that belong together.\n- **Provide meaningful headings:** Section headings help merchants scan and navigate content. Write headings that clearly describe what's in the section rather than using vague labels.\n- **Nest thoughtfully:** Nested sections create visual and semantic hierarchy, but excessive nesting creates overly complex structures. Limit nesting to 2-3 levels where the hierarchy is meaningful and helps merchants understand the content organization.\n- **Consider when to remove padding:** Full-width content like tables or images might need to extend to section edges. Remove padding when the content design requires it, but ensure nested content within has appropriate spacing.\n- **Use accessibility labels when needed:** When the visible heading doesn't fully convey the section's purpose to screen reader users, provide an accessibility label with additional context." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't include expand/collapse functionality. If you need collapsible sections, you'll need to implement this using additional state management and accessibility attributes.\n- Section headings automatically increment their semantic level based on nesting depth, but they stop at h4 for deeply nested sections. Content nested beyond three levels might have less clear document structure." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the section component.", - "type": "Section", - "typeDefinitions": { - "Section": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Section", - "description": "Configure the following properties on the section component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "heading", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "\"base\" | \"none\"", - "description": "The padding applied to all edges of the element.\n\n- `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.\n- `none`: removes all padding from the element. 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.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Section extends PreactCustomElement implements SectionProps {\n constructor();\n /** @private */\n connectedCallback(): void;\n accessor accessibilityLabel: SectionProps['accessibilityLabel'];\n accessor heading: SectionProps['heading'];\n accessor padding: SectionProps['padding'];\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The section component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "SectionSlots", - "typeDefinitions": { - "SectionSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SectionSlots", - "description": "The section component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the section component, which groups related elements together in a logical unit with an optional heading.", - "isOptional": true - } - ], - "value": "export interface SectionSlots {\n /**\n * The content displayed within the section component, which groups related elements together in a logical unit with an optional heading.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "section-default.png", - "description": "Create a section with a heading to group related content. This example shows a basic section with a title and description text.", - "codeblock": { - "title": "Add a content section with a heading", - "tabs": [ - { - "title": "html", - "code": "<s-section heading=\"Online store dashboard\">\n <s-paragraph>View a summary of your online store’s performance.</s-paragraph>\n</s-section>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n View a summary of your online store’s performance.\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use a section with a heading and form fields to group related inputs. This example shows a customer information form with text and email fields inside a top-level section.", - "codeblock": { - "title": "Group form fields in a section", - "tabs": [ - { - "title": "html", - "code": "<!-- Level 1 section - elevated with shadow on desktop -->\n<s-section heading=\"Customer information\">\n <s-text-field label=\"First name\" value=\"John\"></s-text-field>\n <s-text-field label=\"Last name\" value=\"Doe\"></s-text-field>\n <s-email-field label=\"Email\" value=\"john@example.com\"></s-email-field>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Nest sections to create visual and semantic hierarchy that automatically adjusts heading levels and styling. This example shows three levels of nesting for order details, customer information, and a billing address.", - "codeblock": { - "title": "Create nested sections with automatic visual hierarchy", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <!-- Level 1 section -->\n <s-section heading=\"Order details\">\n <s-paragraph>Order #1234 placed on January 15, 2024</s-paragraph>\n\n <!-- Level 2 section - nested with different visual treatment -->\n <s-section heading=\"Customer\">\n <s-text-field label=\"Name\" value=\"Jane Smith\"></s-text-field>\n <s-text-field label=\"Email\" value=\"jane@example.com\"></s-text-field>\n\n <!-- Level 3 section - further nested -->\n <s-section heading=\"Billing address\">\n <s-text-field label=\"Street\" value=\"123 Main St\"></s-text-field>\n <s-text-field label=\"City\" value=\"Toronto\"></s-text-field>\n </s-section>\n </s-section>\n\n <!-- Another Level 2 section -->\n <s-section heading=\"Items\">\n <s-paragraph>2 items totaling $49.99</s-paragraph>\n </s-section>\n </s-section>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n Order #1234 placed on January 15, 2024\n\n \n \n \n \n\n \n \n \n \n \n \n\n \n \n 2 items totaling $49.99\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `accessibilityLabel` property to provide screen readers with additional context beyond the visible heading. This example shows a payment summary section and a label describing the contents of the section.", - "codeblock": { - "title": "Add an accessibility label for screen readers", - "tabs": [ - { - "title": "html", - "code": "<s-section\n heading=\"Payment summary\"\n accessibilityLabel=\"Order payment breakdown and totals\"\n>\n <s-stack gap=\"base\">\n <s-paragraph>Subtotal: $42.99</s-paragraph>\n <s-paragraph>Tax: $5.59</s-paragraph>\n <s-paragraph>Shipping: $1.41</s-paragraph>\n <s-paragraph>\n <s-text type=\"strong\">Total: $49.99</s-text>\n </s-paragraph>\n </s-stack>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n Subtotal: $42.99\n Tax: $5.59\n Shipping: $1.41\n \n Total: $49.99\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `padding` property to `none` so that content like tables can extend to the section edges. This example shows a product table rendered full-width within a section.", - "codeblock": { - "title": "Remove padding for full-width content", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Product</s-table-header>\n <s-table-header listSlot=\"labeled\">Price</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>Cotton t-shirt</s-table-cell>\n <s-table-cell>$29.99</s-table-cell>\n <s-table-cell><s-badge tone=\"success\">Active</s-badge></s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n Product\n Price\n Status\n \n \n \n Cotton t-shirt\n $29.99\n Active\n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Select", - "description": "The select component allows users to choose one option from a dropdown menu. Use select when presenting four or more choices to keep interfaces uncluttered and scannable, or when space is limited.\n\nSelect components support option grouping, placeholder text, help text, and validation states to create clear selection interfaces. For more visual selection layouts with radio buttons or checkboxes, use [choice list](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/choice-list).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/select.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for choosing from predefined options:** Select works best when merchants pick from a known list of options. When merchants need to enter custom values or search through many options, consider [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field) with autocomplete or a searchable dropdown pattern instead.\n- **Organize options thoughtfully:** The order of options affects how quickly merchants find what they need. Group related options together, put common choices first, or use alphabetical order when no natural hierarchy exists.\n- **Make options scannable:** Merchants should be able to quickly distinguish between options. Include enough context in each option label so merchants don't need to open and read multiple options to find the right one.\n- **Handle default selections appropriately:** Pre-select an option when there's a clear default choice, but use a placeholder when merchants should make an intentional selection. Avoid confusing merchants with unclear initial states.\n- **Provide clear validation feedback:** When selection is required or invalid, explain what the merchant needs to do. Context-specific error messages help merchants complete forms faster than generic validation messages." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't include search or filtering functionality. For option lists where merchants need to search (like country selection with 200+ countries), implement a custom autocomplete or searchable dropdown pattern.\n- The component only supports selecting one option at a time. For multi-select scenarios, use a [choice list](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/choice-list) with checkboxes or build a custom multi-select component.\n- Rendering 500+ options can cause performance issues, especially on mobile devices. The browser must render all options in the DOM even though only one's visible.\n- Browser native select dropdowns have limited styling capabilities. Dropdown appearance varies by browser and OS, and can't be fully customized with CSS. For custom-styled dropdowns, you must build a custom component using [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) and [menu](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/menu).\n- Options only support plain text. You can't include icons, images, badges, or formatted text within option labels. For rich option content, build a custom dropdown using [menu](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/menu) components." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the select component.", - "type": "Select", - "typeDefinitions": { - "Select": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Select", - "description": "Configure the following properties on the select component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@16606", - "value": "boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@16605", - "value": "boolean", - "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.", - "isOptional": true - } - ], - "value": "declare class Select extends PreactInputElement implements SelectProps {\n accessor icon: SelectProps['icon'];\n accessor details: SelectProps['details'];\n accessor error: SelectProps['error'];\n accessor label: SelectProps['label'];\n accessor placeholder: SelectProps['placeholder'];\n accessor required: SelectProps['required'];\n accessor labelAccessibilityVisibility: SelectProps['labelAccessibilityVisibility'];\n /** @private */\n connectedCallback(): void;\n /**\n * A lifecycle callback that fires when the component is removed from the DOM. Performs cleanup operations.\n * @private\n */\n disconnectedCallback(): void;\n constructor();\n /**\n * A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n *\n * This is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.\n * @private\n */\n [usedFirstOptionSymbol]: boolean;\n /**\n * @private\n */\n [hasInitialValueSymbol]: boolean;\n /**\n * The value of the currently selected option. When setting this property programmatically, it updates which option appears selected in the dropdown. When reading it, you get the `value` attribute of the currently selected option component.\n */\n get value(): string;\n set value(value: string);\n /** @private */\n formResetCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The select component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "SelectEvents", - "typeDefinitions": { - "SelectEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SelectEvents", - "description": "The select component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the select value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the select.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface SelectEvents {\n /**\n * A callback fired when the select value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the select.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Slots", - "description": "The select component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "SelectSlots", - "typeDefinitions": { - "SelectSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SelectSlots", - "description": "The select component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface SelectSlots {\n /**\n * 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.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Option", - "description": "Represents a single option within a select component. Use only as a child of `s-select` components.", - "type": "Option", - "typeDefinitions": { - "Option": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Option", - "description": "Represents a single option within a select component. Use only as a child of s-select components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultSelected", - "value": "boolean", - "description": "The initial selected state for uncontrolled components. Use this when you want the option to start selected but don't need to control its state afterward.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the checkbox is disabled, preventing user interaction. Disabled checkboxes appear dimmed and their values aren't submitted with forms.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "selected", - "value": "boolean", - "description": "Whether the option is currently selected. Use this for controlled components where you manage the selection state.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "value", - "value": "string", - "description": "The value submitted with the form when this checkbox is checked. If not specified, the default value is \"on\".", - "isOptional": true - } - ], - "value": "declare class Option extends PreactCustomElement implements OptionProps {\n accessor selected: OptionProps['selected'];\n accessor defaultSelected: OptionProps['defaultSelected'];\n accessor value: OptionProps['value'];\n accessor disabled: OptionProps['disabled'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The option component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "OptionSlots", - "typeDefinitions": { - "OptionSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionSlots", - "description": "The option component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text or elements displayed as the option label, which identifies the selectable choice to users in a dropdown or selection list.", - "isOptional": true - } - ], - "value": "export interface OptionSlots {\n /**\n * The text or elements displayed as the option label, which identifies the selectable choice to users in a dropdown or selection list.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Option group", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "type": "OptionGroup", - "typeDefinitions": { - "OptionGroup": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroup", - "description": "Represents a group of options within a select component. Use only as a child of `s-select` components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the options within this group can be selected or not.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The user-facing label for this group of options.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class OptionGroup\n extends PreactCustomElement\n implements OptionGroupProps\n{\n accessor disabled: OptionGroupProps['disabled'];\n accessor label: OptionGroupProps['label'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The option group component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "OptionGroupSlots", - "typeDefinitions": { - "OptionGroupSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "OptionGroupSlots", - "description": "The option group component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The selectable options displayed in the dropdown list. Accepts option components for individual selectable items within this group.", - "isOptional": true - } - ], - "value": "export interface OptionGroupSlots {\n /**\n * The selectable options displayed in the dropdown list. Accepts option components for individual selectable items within this group.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "description": "Let users pick one option from a predefined list. This example pairs a label with selectable options.", - "codeblock": { - "title": "Create a dropdown menu", - "tabs": [ - { - "title": "html", - "code": "<s-select label=\"Date range\">\n <s-option value=\"1\">Today</s-option>\n <s-option value=\"2\">Yesterday</s-option>\n <s-option value=\"3\">Last 7 days</s-option>\n <s-option-group label=\"Custom ranges\">\n <s-option value=\"4\">Last 30 days</s-option>\n <s-option value=\"5\">Last 90 days</s-option>\n </s-option-group>\n</s-select>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Today\n Yesterday\n Last 7 days\n \n Last 30 days\n Last 90 days\n \n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Provide sorting controls for lists or tables. This example configures sort options with a pre-selected default value.", - "codeblock": { - "title": "Add sorting options", - "tabs": [ - { - "title": "html", - "code": "<s-select label=\"Sort products by\" value=\"newest\">\n <s-option value=\"newest\">Newest first</s-option>\n <s-option value=\"oldest\">Oldest first</s-option>\n <s-option value=\"title\">Title A–Z</s-option>\n <s-option value=\"price-low\">Price: low to high</s-option>\n <s-option value=\"price-high\">Price: high to low</s-option>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n Newest first\n Oldest first\n Title A–Z\n Price: low to high\n Price: high to low\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Show instructional text before a selection is made. This example uses placeholder text to describe what the user should choose.", - "codeblock": { - "title": "Add placeholder text", - "tabs": [ - { - "title": "html", - "code": "<s-select\n label=\"Product category\"\n placeholder=\"Choose category for better organization\"\n>\n <s-option value=\"clothing\">Clothing & apparel</s-option>\n <s-option value=\"accessories\">Accessories & jewelry</s-option>\n <s-option value=\"home-garden\">Home & garden</s-option>\n <s-option value=\"electronics\">Electronics & tech</s-option>\n <s-option value=\"books\">Books & media</s-option>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n Clothing & apparel\n Accessories & jewelry\n Home & garden\n Electronics & tech\n Books & media\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate selection problems clearly to users. This example displays an error message when a required selection is missing.", - "codeblock": { - "title": "Show validation errors", - "tabs": [ - { - "title": "html", - "code": "<s-select\n label=\"Shipping origin\"\n error=\"Select your primary shipping location to calculate accurate rates for customers\"\n required\n>\n <s-option value=\"ca\">Canada</s-option>\n <s-option value=\"us\">United States</s-option>\n <s-option value=\"mx\">Mexico</s-option>\n <s-option value=\"uk\">United Kingdom</s-option>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n Canada\n United States\n Mexico\n United Kingdom\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Make long option lists easier to scan. This example organizes options into logical groups like geographical regions.", - "codeblock": { - "title": "Group options by category", - "tabs": [ - { - "title": "html", - "code": "<s-select label=\"Shipping destination\">\n <s-option-group label=\"North America\">\n <s-option value=\"ca\">Canada</s-option>\n <s-option value=\"us\">United States</s-option>\n <s-option value=\"mx\">Mexico</s-option>\n </s-option-group>\n <s-option-group label=\"Europe\">\n <s-option value=\"uk\">United Kingdom</s-option>\n <s-option value=\"fr\">France</s-option>\n <s-option value=\"de\">Germany</s-option>\n <s-option value=\"it\">Italy</s-option>\n </s-option-group>\n <s-option-group label=\"Asia Pacific\">\n <s-option value=\"au\">Australia</s-option>\n <s-option value=\"jp\">Japan</s-option>\n <s-option value=\"sg\">Singapore</s-option>\n </s-option-group>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n \n Canada\n United States\n Mexico\n \n \n United Kingdom\n France\n Germany\n Italy\n \n \n Australia\n Japan\n Singapore\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Visually indicate the purpose of a select field. This example adds a sort icon that signals filtering functionality.", - "codeblock": { - "title": "Add an icon", - "tabs": [ - { - "title": "html", - "code": "<s-select label=\"Filter orders by\" icon=\"sort\">\n <s-option value=\"date\">Order date</s-option>\n <s-option value=\"status\">Fulfillment status</s-option>\n <s-option value=\"total\">Order total</s-option>\n <s-option value=\"customer\">Customer name</s-option>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n Order date\n Fulfillment status\n Order total\n Customer name\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Lock a selection when changes aren't allowed. This example disables a dropdown while preserving its selected value.", - "codeblock": { - "title": "Disable the select", - "tabs": [ - { - "title": "html", - "code": "<s-select label=\"Product type\" disabled value=\"physical\">\n <s-option value=\"physical\">Physical product</s-option>\n <s-option value=\"digital\">Digital product</s-option>\n <s-option value=\"service\">Service</s-option>\n <s-option value=\"gift-card\">Gift card</s-option>\n</s-select>\n", - "language": "html" - }, - { - "code": "\n Physical product\n Digital product\n Service\n Gift card\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Spinner", - "description": "The spinner component displays an animated indicator showing users that content or actions are loading. Use spinner to communicate ongoing processes like fetching data, processing requests, or waiting for operations to complete.\n\nSpinners support multiple sizes and should be used for page or section loading states. For button loading states, use the `loading` property on the [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) component instead.", - "category": "Web components", - "subCategory": "Feedback and status indicators", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/spinner.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Show for asynchronous operations:** Display spinners when loading takes longer than 500ms for operations like saving forms, fetching data, or processing actions. For instant actions, spinners might flash distractingly.\n- **Scope to specific areas:** Place spinners within the component being loaded (like inside a button during save, or in a section during data fetch) rather than blocking the entire interface.\n- **Provide context with labels:** Always include `accessibilityLabel` describing what's loading, like **Loading products**, **Saving changes**, or **Processing payment**. This helps screen reader users understand what's happening.\n- **Pair with action feedback:** After a spinner completes, show clear success or error messages so merchants know the operation finished and its outcome." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component shows indeterminate loading only. It can't display progress percentage or time remaining. For operations with known duration or measurable progress, consider using a progress bar component or custom solution.\n- The component continues spinning indefinitely until you remove it. It doesn't automatically stop after a timeout or show error states. You must implement timeout logic and error handling yourself.\n- Rendering many spinners simultaneously (like in a table with 50+ rows each showing a spinner) can cause performance issues, especially on older mobile devices.\n- The component itself doesn't provide a way to cancel the loading operation. If merchants need to cancel, you must implement separate UI controls like a **Cancel** [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) alongside the spinner." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the spinner component.", - "type": "Spinner", - "typeDefinitions": { - "Spinner": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Spinner", - "description": "Configure the following properties on the spinner component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"base\" | \"large\" | \"large-100\"", - "description": "The size of the loading spinner.\n\n- `base`: Default size suitable for inline loading indicators or standard UI contexts.\n- `large`: Larger spinner for more prominent loading states.\n- `large-100`: Extra large spinner for full-page or emphasized loading states.", - "defaultValue": "'base'", - "isOptional": true - } - ], - "value": "declare class Spinner extends PreactCustomElement implements SpinnerProps {\n accessor accessibilityLabel: string;\n accessor size: SpinnerProps['size'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - } - ], - "defaultExample": { - "image": "spinner-default.png", - "description": "Create a spinner with an accessibility label to indicate a loading state. This example shows an extra large spinner with a descriptive label for screen readers.", - "codeblock": { - "title": "Add a loading spinner", - "tabs": [ - { - "title": "html", - "code": "<s-spinner accessibilityLabel=\"Loading\" size=\"large-100\"></s-spinner>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `size` property to match the spinner to its context. This example shows all three sizes—base for inline use, large for section loading, and large-100 for full-page states.", - "codeblock": { - "title": "Use spinners of different sizes", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" alignItems=\"center\" gap=\"large\">\n <s-spinner accessibilityLabel=\"Loading\" size=\"base\"></s-spinner>\n <s-spinner accessibilityLabel=\"Loading\" size=\"large\"></s-spinner>\n <s-spinner accessibilityLabel=\"Loading\" size=\"large-100\"></s-spinner>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Center a spinner with a text label in a section to communicate when content is loading. This example shows a vertically stacked spinner and status message for a product list.", - "codeblock": { - "title": "Show a loading state in a content section", - "tabs": [ - { - "title": "html", - "code": "<s-stack alignItems=\"center\" gap=\"base\" padding=\"large\">\n <s-spinner accessibilityLabel=\"Loading products\" size=\"large\"></s-spinner>\n <s-text>Loading products...</s-text>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Loading products...\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place a compact spinner inline with a text label for form submissions and quick actions. This example shows a horizontal layout with a spinner and saving status message.", - "codeblock": { - "title": "Display an inline loading indicator", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" alignItems=\"center\" gap=\"small\">\n <s-spinner accessibilityLabel=\"Saving\"></s-spinner>\n <s-text>Saving...</s-text>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Saving...\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Stack", - "description": "The stack component organizes elements horizontally or vertically along the block or inline axis. Use stack to structure layouts, group related components, control spacing between elements, or create flexible arrangements that adapt to content.\n\nStacks support gap spacing, alignment, wrapping, and distribution properties to create consistent, responsive layouts without custom CSS. For complex multi-column layouts with precise grid positioning, use [grid](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/grid).", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/stack.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Match spacing to content relationships:** Spacing communicates how closely related items are. Tight spacing suggests items belong together, while generous spacing separates distinct groups. Choose spacing that reflects your content hierarchy.\n- **Understand wrapping behavior:** Inline stacks wrap automatically when content doesn't fit. This is often desired, but if you need precise control over line breaks or multi-row layouts, consider alternative layout approaches.\n- **Use alignment intentionally:** Alignment properties determine how items distribute within the stack. Default alignment works for most cases, but consider alignment when items have different sizes or when you need specific positioning." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't support variable spacing between individual items. All items in a stack have uniform gap spacing. If you need different spacing between specific items, you'll need to nest multiple stacks or use a different layout approach." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the stack component.", - "type": "Stack", - "typeDefinitions": { - "Stack": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Stack", - "description": "Configure the following properties on the stack component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityRole", - "value": "AccessibilityRole", - "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.", - "defaultValue": "'generic'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignContent", - "value": "AlignContentKeyword", - "description": "Controls the distribution of lines along the block axis when content wraps into multiple lines.\n\nThis property only affects stacks with wrapping content. For single-line stacks, use `alignItems` instead.", - "defaultValue": "'normal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alignItems", - "value": "AlignItemsKeyword", - "description": "Controls the alignment of children along the block axis (vertically in horizontal writing modes).\n\nUse this to align items perpendicular to the stack direction - vertically for inline stacks or horizontally for block stacks.", - "defaultValue": "'normal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "background", - "value": "BackgroundColorKeyword", - "description": "The background color of the component.", - "defaultValue": "'transparent'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "blockSize", - "value": "SizeUnitsOrAuto", - "description": "The vertical size of the element in standard layouts (height in left-to-right or right-to-left writing modes).\n\nBlock 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.\n\nLearn more about [block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/block-size).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "border", - "value": "BorderShorthand", - "description": "A border applied using shorthand syntax to specify width, color, and style in a single property.", - "defaultValue": "'none' - equivalent to `none base auto`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "// The following are equivalent:\n\n", - "title": "Example" - } - ] - } - ], - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderColor", - "value": "\"\" | ColorKeyword", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderRadius", - "value": "MaybeAllValuesShorthandProperty", - "description": "The roundedness of the element's corners using the design system's radius scale.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderStyle", - "value": "\"\" | MaybeAllValuesShorthandProperty", - "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.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "borderWidth", - "value": "\"\" | MaybeAllValuesShorthandProperty<\"small\" | \"small-100\" | \"base\" | \"large\" | \"large-100\" | \"none\">", - "description": "The thickness of the border on all sides. When set, this overrides the width value specified in the `border` property.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "columnGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the inline axis. This overrides the column value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "direction", - "value": "MaybeResponsive<\"inline\" | \"block\">", - "description": "The direction in which the stack's children are placed within the stack.\n\nAccepts:\n- A single value, either `inline` or `block`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported direction values as a query value", - "defaultValue": "'block'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "display", - "value": "MaybeResponsive<\"auto\" | \"none\">", - "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).\n\n- `auto` the component's initial value. The actual value depends on the component and context.\n- `none` hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "gap", - "value": "MaybeResponsive>", - "description": "Adjusts spacing between elements.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value applied to both axes, such as `large-100`\n- A pair of values, such as `large-100 large-500`, to set the inline and block axes respectively\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "inlineSize", - "value": "SizeUnitsOrAuto", - "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).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "justifyContent", - "value": "JustifyContentKeyword", - "description": "Controls the distribution of children along the inline axis (horizontally in horizontal writing modes).\n\nUse 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.", - "defaultValue": "'normal'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxBlockSize", - "value": "SizeUnitsOrNone", - "description": "The maximum height in horizontal writing modes, or maximum width in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxInlineSize", - "value": "SizeUnitsOrNone", - "description": "The maximum width in horizontal writing modes, or maximum height in vertical writing modes. Prevents the element from growing beyond this size.\n\nLearn more about [max-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size).", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minBlockSize", - "value": "SizeUnits", - "description": "The minimum height in horizontal writing modes, or minimum width in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-block-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minInlineSize", - "value": "SizeUnits", - "description": "The minimum width in horizontal writing modes, or minimum height in vertical writing modes. Prevents the element from shrinking below this size.\n\nLearn more about [min-inline-size](https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size).", - "defaultValue": "'0'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "overflow", - "value": "\"visible\" | \"hidden\"", - "description": "The overflow behavior of the element.\n\n- `visible`: the content that extends beyond the element’s container is visible.\n- `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.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "padding", - "value": "MaybeResponsive>", - "description": "The padding applied to all edges of the component.\n\nSupports [1-to-4-value syntax](https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box) using flow-relative values:\n- 1 value applies to all sides\n- 2 values apply to block (top/bottom) and inline (left/right)\n- 3 values apply to block-start (top), inline (left/right), and block-end (bottom)\n- 4 values apply to block-start (top), inline-end (right), block-end (bottom), and inline-start (left)\n\n**Examples:** `base`, `large none`, `base large-100 base small`\n\nUse `auto` to inherit padding from the nearest container with removed padding. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'none'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlock", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The block-direction padding (top and bottom in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for block-start and block-end.\n\n**Example:** `large none` applies `large` to the top and `none` to the bottom.\n\nOverrides the block value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-end padding (bottom in horizontal writing modes).\n\nOverrides the block-end value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingBlockStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The block-start padding (top in horizontal writing modes).\n\nOverrides the block-start value from `paddingBlock`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInline", - "value": "MaybeResponsive<\"\" | MaybeTwoValuesShorthandProperty>", - "description": "The inline-direction padding (left and right in horizontal writing modes).\n\nAccepts a single value for both sides or two space-separated values for inline-start and inline-end.\n\n**Example:** `large none` applies `large` to the left and `none` to the right.\n\nOverrides the inline value from `padding`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineEnd", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-end padding (right in LTR writing modes, left in RTL).\n\nOverrides the inline-end value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paddingInlineStart", - "value": "MaybeResponsive<\"\" | PaddingKeyword>", - "description": "The inline-start padding (left in LTR writing modes, right in RTL).\n\nOverrides the inline-start value from `paddingInline`. Also accepts a [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported `PaddingKeyword` as a query value.", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rowGap", - "value": "MaybeResponsive<\"\" | SpacingKeyword>", - "description": "Adjusts spacing between elements in the block axis. This overrides the row value of `gap`.\n\nAccepts:\n- A single [`SpacingKeyword`](/docs/api/polaris/using-web-components#scale) value, such as `large-100`\n- A [responsive value](/docs/api/polaris/using-web-components#responsive-values) string with the supported SpacingKeyword as a query value", - "defaultValue": "'' - meaning no override", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class Stack extends BoxElement implements StackProps {\n constructor();\n accessor direction: StackProps['direction'];\n accessor justifyContent: StackProps['justifyContent'];\n accessor alignItems: StackProps['alignItems'];\n accessor alignContent: StackProps['alignContent'];\n accessor gap: StackProps['gap'];\n accessor rowGap: StackProps['rowGap'];\n accessor columnGap: StackProps['columnGap'];\n}" - }, - "MaybeResponsive": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeResponsive", - "value": "T | `@container${string}`", - "description": "Makes a property responsive by allowing it to be set conditionally based on container query conditions. The value can be either a base value or a container query string.\n\n- `T`: Base value that applies in all conditions.\n- `@container${string}`: Container query string for conditional responsive styling based on container size.", - "isPublicDocs": true - }, - "JustifyContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "JustifyContentKeyword", - "value": "'normal' | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Justify content defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.\n\nLearn more about the [justify-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).", - "isPublicDocs": true - }, - "ContentDistribution": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentDistribution", - "value": "'space-between' | 'space-around' | 'space-evenly' | 'stretch'", - "description": "Defines how space is distributed between and around content items in flex and grid layouts.\n- `space-between`: Distributes items evenly with the first item at the start and last at the end.\n- `space-around`: Distributes items evenly with equal space around each item.\n- `space-evenly`: Distributes items evenly with equal space between them.\n- `stretch`: Stretches items to fill the container.", - "isPublicDocs": true - }, - "OverflowPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "OverflowPosition", - "value": "`unsafe ${ContentPosition}` | `safe ${ContentPosition}`", - "description": "Represents content positioning with overflow behavior control. Use `safe` to prevent content from becoming inaccessible when it overflows, or `unsafe` to allow overflow regardless of accessibility.", - "isPublicDocs": true - }, - "ContentPosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ContentPosition", - "value": "'center' | 'start' | 'end'", - "description": "Defines the position of content along an axis.\n- `center`: Centers the content.\n- `start`: Aligns content to the start.\n- `end`: Aligns content to the end.", - "isPublicDocs": true - }, - "AlignItemsKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignItemsKeyword", - "value": "'normal' | 'stretch' | BaselinePosition | OverflowPosition | ContentPosition", - "description": "Align items sets the align-self value on all direct children as a group.\n\nLearn more about the [align-items property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).", - "isPublicDocs": true - }, - "BaselinePosition": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BaselinePosition", - "value": "'baseline' | 'first baseline' | 'last baseline'", - "description": "Represents baseline alignment positions used to align items relative to their baselines.\n- `baseline`: Aligns to the baseline of the parent.\n- `first baseline`: Aligns to the first baseline of the parent.\n- `last baseline`: Aligns to the last baseline of the parent.", - "isPublicDocs": true - }, - "AlignContentKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AlignContentKeyword", - "value": "'normal' | BaselinePosition | ContentDistribution | OverflowPosition | ContentPosition", - "description": "Align content sets the distribution of space between and around content items along a flexbox's cross axis, or a grid or block-level element's block axis.\n\nLearn more about the [align-content property](https://developer.mozilla.org/en-US/docs/Web/CSS/align-content).", - "isPublicDocs": true - }, - "MaybeTwoValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeTwoValuesShorthandProperty", - "value": "T | `${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one or two values. Supports specifying the same value for both dimensions or different values.\n\n- `T`: Single value that applies to both dimensions.\n- `${T} ${T}`: Two values for block axis (vertical) and inline axis (horizontal).", - "isPublicDocs": true - }, - "SpacingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SpacingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the spacing size between elements, using the standard size scale or `none` for no spacing.", - "isPublicDocs": true - }, - "SizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeKeyword", - "value": "'small-500' | 'small-400' | 'small-300' | 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'large-200' | 'large-300' | 'large-400' | 'large-500'", - "description": "Defines component sizes using a consistent scale from extra small to extra large.\n\n- `small-500` through `small-100`: Extra small to small sizes, progressively increasing.\n- `small`: Standard small size.\n- `base`: Default medium size that works well in most contexts.\n- `large`: Standard large size.\n- `large-100` through `large-500`: Large to extra large sizes, progressively increasing.", - "isPublicDocs": true - }, - "AccessibilityRole": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AccessibilityRole", - "value": "'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'presentation' | 'none'", - "description": "Defines the semantic role of a component for assistive technologies like screen readers.\n\nAccessibility roles help users with disabilities understand the purpose and structure of content. These roles map to HTML elements and ARIA roles, providing semantic meaning beyond visual presentation.\n\nUse these roles to:\n- Improve navigation for screen reader users\n- Provide semantic structure to your UI\n- Ensure proper interpretation by assistive technologies\n\nLearn more about [ARIA roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles) in the MDN web docs.\n\n- `main`: Indicates the primary content area of the page.\n- `header`: Marks a component as a header containing introductory content or navigation.\n- `footer`: Designates content containing information like copyright, navigation links, or privacy statements.\n- `section`: Defines a generic thematic grouping of content that should have a heading or accessible label.\n- `aside`: Marks supporting content that relates to but is separate from the main content.\n- `navigation`: Identifies major groups of navigation links for moving around the site or page.\n- `ordered-list`: Represents a list where the order of items is meaningful.\n- `list-item`: Identifies an individual item within a list.\n- `list-item-separator`: Acts as a visual and semantic divider between items in a list.\n- `unordered-list`: Represents a list where the order of items is not meaningful.\n- `separator`: Creates a divider that separates and distinguishes sections of content.\n- `status`: Defines a live region for advisory information that is not urgent enough to be an alert.\n- `alert`: Marks important, time-sensitive information that requires the user's immediate attention.\n- `generic`: Creates a semantically neutral container element with no inherent meaning.\n- `presentation`: Removes semantic meaning from an element while preserving its visual appearance.\n- `none`: Synonym for `presentation`, removes semantic meaning while keeping visual styling.", - "isPublicDocs": true - }, - "BackgroundColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BackgroundColorKeyword", - "value": "'transparent' | ColorKeyword", - "description": "Defines the background color intensity or emphasis level for UI elements.\n\n- `transparent`: No background, allowing the underlying surface to show through.\n- `ColorKeyword`: Applies color intensity levels (subdued, base, strong) to create spatial emphasis and containment.", - "isPublicDocs": true - }, - "ColorKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ColorKeyword", - "value": "'subdued' | 'base' | 'strong'", - "description": "Defines the color intensity or emphasis level for text and UI elements.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", - "isPublicDocs": true - }, - "SizeUnitsOrAuto": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrAuto", - "value": "SizeUnits | 'auto'", - "description": "Represents size values that can also be set to `auto` for automatic sizing.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `auto`: Automatically sizes based on content and layout constraints.", - "isPublicDocs": true - }, - "SizeUnits": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnits", - "value": "`${number}px` | `${number}%` | `0`", - "description": "Represents size values in pixels, percentages, or zero.\n\n- `${number}px`: Absolute size in pixels for fixed dimensions (such as `100px`, `24px`).\n- `${number}%`: Relative size as a percentage of the parent container (such as `50%`, `100%`).\n- `0`: Zero size, equivalent to no dimension.", - "isPublicDocs": true - }, - "SizeUnitsOrNone": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "SizeUnitsOrNone", - "value": "SizeUnits | 'none'", - "description": "Represents size values that can also be set to `none` to remove the size constraint.\n\n- `SizeUnits`: Specific size values in pixels, percentages, or zero for precise control.\n- `none`: No size constraint, allowing unlimited growth.", - "isPublicDocs": true - }, - "MaybeAllValuesShorthandProperty": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MaybeAllValuesShorthandProperty", - "value": "T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`", - "description": "Represents CSS shorthand properties that accept one to four values. Supports specifying values for all four sides: top, right, bottom, and left.\n\n- `T`: Single value that applies to all four sides.\n- `${T} ${T}`: Two values for block axis (top/bottom) and inline axis (left/right).\n- `${T} ${T} ${T}`: Three values for block-start (top), inline axis (left/right), and block-end (bottom).\n- `${T} ${T} ${T} ${T}`: Four values for block-start (top), inline-end (right), block-end (bottom), and inline-start (left).", - "isPublicDocs": true - }, - "PaddingKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "PaddingKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the padding size for elements, using the standard size scale or `none` for no padding.\n\n- `SizeKeyword`: Standard padding sizes from the size scale for consistent spacing.\n- `none`: No padding.", - "isPublicDocs": true - }, - "BorderShorthand": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderShorthand", - "value": "BorderSizeKeyword | `${BorderSizeKeyword} ${ColorKeyword}` | `${BorderSizeKeyword} ${ColorKeyword} ${BorderStyleKeyword}`", - "description": "Represents a shorthand for defining a border. It can be a combination of size, optionally followed by color, optionally followed by style.", - "isPublicDocs": true - }, - "BorderSizeKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderSizeKeyword", - "value": "SizeKeyword | 'none'", - "description": "Defines the width of borders, using the standard size scale or `none` for no border.\n\n- `SizeKeyword`: Standard border widths from the size scale for consistent thickness.\n- `none`: No border width (removes the border).", - "isPublicDocs": true - }, - "BorderStyleKeyword": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BorderStyleKeyword", - "value": "'none' | 'solid' | 'dashed' | 'dotted' | 'auto'", - "description": "Defines the visual style of borders.\n\n- `none`: No border is displayed.\n- `solid`: A single solid line.\n- `dashed`: A series of short dashes.\n- `dotted`: A series of dots.\n- `auto`: Automatically determined based on context.", - "isPublicDocs": true - }, - "BoxBorderStyles": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderStyles", - "value": "'auto' | 'none' | 'solid' | 'dashed'", - "description": "Represents the subset of border style values supported by the box component.\n\n- `auto`: Default border style determined by the system.\n- `none`: No border style (removes the border).\n- `solid`: Continuous line border.\n- `dashed`: Border made up of dashes.", - "isPublicDocs": true - }, - "BoxBorderRadii": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "BoxBorderRadii", - "value": "'small' | 'small-200' | 'small-100' | 'base' | 'large' | 'large-100' | 'large-200' | 'none'", - "description": "Represents the subset of border radius values supported by the component.\n\n- `small-200`: Extra small radius for subtle rounding.\n- `small-100`: Small radius for minimal corner rounding.\n- `small`: Standard small radius.\n- `base`: Medium radius for moderate corner rounding.\n- `large`: Standard large radius for pronounced rounding.\n- `large-100`: Large radius for more prominent corner rounding.\n- `large-200`: Extra large radius for maximum rounding.\n- `none`: No border radius (sharp corners).", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The stack component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "StackSlots", - "typeDefinitions": { - "StackSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "StackSlots", - "description": "The stack component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The child elements displayed within the stack component, which are arranged vertically or horizontally with consistent spacing.", - "isOptional": true - } - ], - "value": "export interface StackSlots {\n /**\n * The child elements displayed within the stack component, which are arranged vertically or horizontally with consistent spacing.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "stack-default.png", - "description": "Create a vertical stack to arrange items with consistent spacing. This example shows badges stacked vertically with base gap spacing.", - "codeblock": { - "title": "Add a vertical stack", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-badge>Paid</s-badge>\n <s-badge>Processing</s-badge>\n <s-badge>Filled</s-badge>\n <s-badge>Completed</s-badge>\n</s-stack>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Paid\n Processing\n Filled\n Completed\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `direction` property to arrange items horizontally. This example shows badges laid out side by side with spacing between them.", - "codeblock": { - "title": "Arrange items horizontally with an inline stack", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"large-100\">\n <s-badge>Item 1</s-badge>\n <s-badge>Item 2</s-badge>\n <s-badge>Item 3</s-badge>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Item 1\n Item 2\n Item 3\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `justifyContent` and `alignItems` properties to control how items are positioned within the stack. This example shows items vertically centered and aligned at the right, center, and left positions in the stack.", - "codeblock": { - "title": "Control item alignment and distribution", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" justifyContent=\"space-between\" alignItems=\"center\">\n <s-text>Left aligned</s-text>\n <s-text>Centered text</s-text>\n <s-text>Right aligned</s-text>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n Left aligned\n Centered text\n Right aligned\n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the ``gap`, `rowGap`, and `columnGap properties` to fine-tune spacing between items in different directions. This example shows a stack with separate row and column gap values.", - "codeblock": { - "title": "Fine-tune spacing with row and column gaps", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"large-100 large-500\" rowGap=\"large-300\" columnGap=\"large-200\">\n <s-box\n padding=\"large-100\"\n borderColor=\"base\"\n borderWidth=\"small\"\n borderRadius=\"large-100\"\n >\n Box with custom spacing\n </s-box>\n <s-box\n padding=\"large-100\"\n borderColor=\"base\"\n borderWidth=\"small\"\n borderRadius=\"large-100\"\n >\n Another box\n </s-box>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n Box with custom spacing\n \n \n Another box\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use container queries to change the stack direction and gap based on available width. This example shows a stack that switches from vertical to horizontal when the container exceeds 500px.", - "codeblock": { - "title": "Create a responsive stack with container queries", - "tabs": [ - { - "title": "html", - "code": "<s-query-container>\n <s-stack\n direction=\"@container (inline-size > 500px) inline, block\"\n gap=\"@container (inline-size > 500px) base, small-300\"\n >\n <s-box\n padding=\"large-100\"\n borderColor=\"base\"\n borderWidth=\"small\"\n borderRadius=\"large-100\"\n >\n Content 1\n </s-box>\n <s-box\n padding=\"large-100\"\n borderColor=\"base\"\n borderWidth=\"small\"\n borderRadius=\"large-100\"\n >\n Content 2\n </s-box>\n </s-stack>\n</s-query-container>", - "language": "html" - }, - { - "code": "\n 500px) inline, block\"\n gap=\"@container (inline-size > 500px) base, small-300\"\n >\n \n Content 1\n \n \n Content 2\n \n \n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Switch", - "description": "The switch component provides a clear way for users to toggle options or settings on and off. Use switch for binary controls that take effect immediately, like enabling features, activating settings, or controlling visibility.\n\nSwitches provide instant visual feedback and are ideal for settings that don't require a save action to apply changes. For selections that require explicit submission, use [checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox) instead.", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/switch.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Don't combine with save buttons:** Switches apply changes instantly when toggled, so combining them with save buttons creates confusion about when changes take effect.\n- **Make the controlled setting clear:** Merchants should immediately understand what setting the switch controls and what each state means. Ambiguous labels force merchants to toggle the switch just to figure out what it does.\n- **Explain the impact:** Merchants need to understand the consequences of toggling a switch, especially for settings that affect important functionality or data. Without context, merchants might hesitate to change settings or make uninformed decisions.\n- **Organize related settings thoughtfully:** When presenting multiple switches, group related settings together and order them logically. A well-organized settings interface helps merchants find and configure options efficiently.\n- **Make unavailable options understandable:** When a switch is disabled due to permissions, dependencies, or plan limitations, explain why. Users should know whether the limitation is temporary or permanent and what they need to do to access the setting." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the switch component.", - "type": "Switch", - "typeDefinitions": { - "Switch": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Switch", - "description": "Configure the following properties on the switch component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityLabel", - "value": "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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "checked", - "value": "boolean", - "description": "Whether the control is currently checked. Use this for controlled components where you manage the checked state.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultChecked", - "value": "boolean", - "description": "The initial checked state for uncontrolled components. Use this when you want the control to start checked but don't need to control its state afterward.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text label displayed next to the checkbox that describes what the checkbox controls. Clicking the label will also toggle the checkbox state.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "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.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The value used in form data when the checkbox is checked.", - "isOptional": true - } - ], - "value": "declare class Switch extends PreactCheckboxElement implements SwitchProps {\n accessor labelAccessibilityVisibility: SwitchProps['labelAccessibilityVisibility'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The switch component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "SwitchEvents", - "typeDefinitions": { - "SwitchEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "SwitchEvents", - "description": "The switch component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the switch value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the switch.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface SwitchEvents {\n /**\n * A callback fired when the switch value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the switch.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "description": "Give users a clear way to turn a feature on or off. This example pairs a label with a toggle switch.", - "codeblock": { - "title": "Toggle a setting", - "tabs": [ - { - "title": "html", - "code": "<s-switch\n label=\"Enable feature\"\n details=\"Ensure all criteria are met before enabling\"\n></s-switch>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Indicate when a feature isn't available. This example locks a switch to prevent interaction while displaying its current state.", - "codeblock": { - "title": "Show a disabled switch", - "tabs": [ - { - "title": "html", - "code": "<s-switch\n id=\"disabled-switch\"\n label=\"Feature locked (Premium plan required)\"\n checked\n disabled\n></s-switch>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Collect multiple settings that save together. This example groups switches in a form for batch submission.", - "codeblock": { - "title": "Submit multiple settings in a form", - "tabs": [ - { - "title": "html", - "code": "<form>\n <s-stack gap=\"base\">\n <s-switch\n id=\"email-notifications\"\n label=\"Email notifications\"\n name=\"emailNotifications\"\n value=\"enabled\"\n ></s-switch>\n <s-switch\n id=\"sms-notifications\"\n label=\"SMS notifications\"\n name=\"smsNotifications\"\n value=\"enabled\"\n ></s-switch>\n <s-button type=\"submit\">Save preferences</s-button>\n </s-stack>\n</form>\n", - "language": "html" - }, - { - "code": "
\n \n \n \n Save preferences\n \n
\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Organize settings in a panel layout. This example arranges switches in a stack to display related preferences together.", - "codeblock": { - "title": "Apply multiple settings immediately", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-switch id=\"notifications-setting\" label=\"Push notifications\"></s-switch>\n <s-switch id=\"autosave-setting\" label=\"Auto-save drafts\"></s-switch>\n <s-switch\n id=\"analytics-setting\"\n label=\"Usage analytics\"\n checked\n ></s-switch>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Keep switches accessible when labels aren't visually needed. This example uses a visually hidden label that screen readers can still announce.", - "codeblock": { - "title": "Hide the label visually", - "tabs": [ - { - "title": "html", - "code": "<s-switch\n id=\"hidden-label-switch\"\n labelAccessibilityVisibility=\"exclusive\"\n label=\"Toggle feature\"\n checked\n></s-switch>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Communicate switch-related problems clearly. This example displays helper text with an error message when a required switch isn't enabled.", - "codeblock": { - "title": "Show validation errors", - "tabs": [ - { - "title": "html", - "code": "<s-switch\n id=\"terms-switch\"\n label=\"Agree to terms and conditions\"\n details=\"You must agree to continue with the purchase\"\n error=\"Agreement is required\"\n name=\"termsAgreement\"\n required\n value=\"agreed\"\n></s-switch>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Provide extra context for screen reader users. This example adds an accessibility label that gives more detail than the visible label alone.", - "codeblock": { - "title": "Add an accessibility label", - "tabs": [ - { - "title": "html", - "code": "<s-switch\n id=\"event-switch\"\n label=\"Feature toggle\"\n accessibilityLabel=\"Toggle feature on or off\"\n></s-switch>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Table", - "description": "The table component displays data clearly in rows and columns, helping users view, analyze, and compare structured information. Use table to present datasets, product lists, order details, or any tabular content that benefits from organized rows and columns.\n\nTables automatically adapt to screen size, rendering as lists on small screens and tables on larger ones for optimal readability across devices.", - "category": "Web components", - "subCategory": "Layout and structure", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/table.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use for structured, comparable data:** The component works best when displaying multiple records with consistent attributes that merchants need to scan and compare. For simple lists without comparison needs, consider using a simpler component.\n- **Design for mobile transformation:** The component automatically converts to a list layout on mobile devices. Ensure your column headers and data make sense when displayed as stacked key-value pairs rather than a grid.\n- **Keep column counts reasonable:** Tables with many columns become difficult to scan and require horizontal scrolling. Aim for the minimum columns needed to support user tasks, and consider whether some data could be revealed on demand.\n- **Provide clear column headers:** Column headers help merchants understand what each column represents. Write concise, descriptive headers that clearly identify the data type or attribute.\n- **Consider data volume:** Large tables impact performance and user experience. Use pagination for datasets with more than 50-100 rows, or consider whether filtering or search would help merchants find specific records more efficiently." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't include built-in sorting or search functionality. You'll need to implement these features yourself if merchants need to organize data within the table. For filtering, use the `filters` slot to add filter UI such as a search field.\n- The component doesn't support sticky headers that remain visible during scrolling. If merchants need to reference column headers while viewing data further down the table, consider using pagination to keep datasets smaller." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the table component.", - "type": "Table", - "typeDefinitions": { - "Table": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Table", - "description": "Configure the following properties on the table component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@16681", - "value": "AddedContext", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@16682", - "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasNextPage", - "value": "boolean", - "description": "Whether there's an additional page of data.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "hasPreviousPage", - "value": "boolean", - "description": "Whether there's a previous page of data.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "loading", - "value": "boolean", - "description": "Whether the table is in a loading state, such as during initial page load or when loading the next page in a paginated table. When `true`, the table might be in an inert state that prevents user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "paginate", - "value": "boolean", - "description": "Whether to use pagination controls.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "variant", - "value": "\"auto\" | \"list\"", - "description": "The layout variant of the table component.\n\n- `list`: Always displays as a list layout.\n- `table`: Always displays as a traditional table layout.\n- `auto`: Automatically displays as a table on wide screens and as a list on narrow screens.", - "defaultValue": "'auto'", - "isOptional": true - } - ], - "value": "declare class Table extends PreactCustomElement implements TableProps {\n accessor variant: TableProps['variant'];\n accessor loading: TableProps['loading'];\n accessor paginate: TableProps['paginate'];\n accessor hasPreviousPage: TableProps['hasPreviousPage'];\n accessor hasNextPage: TableProps['hasNextPage'];\n /**\n * @private\n * The actual table variant, which is either 'table' or 'list'.\n */\n [actualTableVariantSymbol]: AddedContext;\n /** @private */\n [tableHeadersSharedDataSymbol]: AddedContext<\n {\n listSlot: TableHeaderProps['listSlot'];\n textContent: string;\n format: HeaderFormat;\n }[]\n >;\n\n constructor();\n}" - }, - "AddedContext": { - "filePath": "src/surfaces/admin/components.ts", - "name": "AddedContext", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions) => void", - "description": "The **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "dispatchEvent", - "value": "(event: Event) => boolean", - "description": "The **`dispatchEvent()`** method of the EventTarget sends an Event to the object, (synchronously) invoking the affected event listeners in the appropriate order.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/dispatchEvent)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodSignature", - "name": "removeEventListener", - "value": "(type: string, callback: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions) => void", - "description": "The **`removeEventListener()`** method of the EventTarget interface removes an event listener previously registered with EventTarget.addEventListener() from the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/removeEventListener)", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "T", - "description": "The current context value.\n\nThe new context value to set, which will notify all consumers.", - "isOptional": true - } - ], - "value": "declare class AddedContext extends EventTarget {\n constructor(defaultValue: T);\n /**\n * The current context value.\n */\n get value(): T;\n /**\n * The new context value to set, which will notify all consumers.\n */\n set value(value: T);\n}" - }, - "ActualTableVariant": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ActualTableVariant", - "value": "'table' | 'list'", - "description": "Represents the actual rendered variant of a table component.\n- `table`: Displays as a traditional table layout.\n- `list`: Displays as a list layout.", - "isPublicDocs": true - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableSlots", - "typeDefinitions": { - "TableSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableSlots", - "description": "The table component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The table structure defining headers and data rows.\n\nAccepts table header row (for column headers) and table body (for data rows) components. Structure your table with a table header row first, followed by table body.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "filters", - "value": "HTMLElement", - "description": "Filter controls displayed above the table.\n\nAccepts input components like search field or select for filtering table data. These controls appear in a dedicated area above the table content.", - "isOptional": true - } - ], - "value": "export interface TableSlots {\n /**\n * The table structure defining headers and data rows.\n *\n * Accepts table header row (for column headers) and table body (for data rows) components. Structure your table with a table header row first, followed by table body.\n */\n children?: HTMLElement;\n /**\n * Filter controls displayed above the table.\n *\n * Accepts input components like search field or select for filtering table data. These controls appear in a dedicated area above the table content.\n */\n filters?: HTMLElement;\n}" - } - } - }, - { - "title": "Events", - "description": "The table component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "TableEvents", - "typeDefinitions": { - "TableEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableEvents", - "description": "The table component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "nextpage", - "value": "CallbackEventListener | null", - "description": "A callback fired when the user navigates to the next page.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "previouspage", - "value": "CallbackEventListener | null", - "description": "A callback fired when the user navigates to the previous page.", - "isOptional": true - } - ], - "value": "export interface TableEvents {\n /**\n * A callback fired when the user navigates to the previous page.\n */\n previouspage: CallbackEventListener | null = null;\n /**\n * A callback fired when the user navigates to the next page.\n */\n nextpage: CallbackEventListener | null = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - }, - { - "title": "Table body", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "type": "TableBody", - "typeDefinitions": { - "TableBody": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBody", - "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.\n\nTable body must contain table row components, which in turn contain table cell components for the actual data values.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class TableBody extends PreactCustomElement implements TableBodyProps {\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table body component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableBodySlots", - "typeDefinitions": { - "TableBodySlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableBodySlots", - "description": "The table body component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The data rows displayed in the table body.\n\nAccepts table row components, with each row representing a single record or entry in the table.", - "isOptional": true - } - ], - "value": "export interface TableBodySlots {\n /**\n * The data rows displayed in the table body.\n *\n * Accepts table row components, with each row representing a single record or entry in the table.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Table cell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "type": "TableCell", - "typeDefinitions": { - "TableCell": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCell", - "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.\n\nTable cell automatically inherits styling and alignment from its parent table structure and supports text content or other inline components.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@16704", - "value": "HeaderFormat", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class TableCell extends PreactCustomElement implements TableCellProps {\n constructor();\n /** @private */\n get [headerFormatSymbol](): HeaderFormat;\n /** @private */\n set [headerFormatSymbol](format: HeaderFormat);\n}" - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table cell component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableCellSlots", - "typeDefinitions": { - "TableCellSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableCellSlots", - "description": "The table cell component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The data value displayed in this cell.\n\nAccepts text content or inline components representing the cell's data value.", - "isOptional": true - } - ], - "value": "export interface TableCellSlots {\n /**\n * The data value displayed in this cell.\n *\n * Accepts text content or inline components representing the cell's data value.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Table header", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "type": "TableHeader", - "typeDefinitions": { - "TableHeader": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeader", - "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.\n\nTable header provides semantic meaning for screen readers and can include sorting controls when configured. Each header corresponds to a column in the table body.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "format", - "value": "HeaderFormat", - "description": "The format of the column that controls styling and alignment of cell content.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "listSlot", - "value": "ListSlotType", - "description": "The content designation for this column when the table displays in list variant on mobile devices.", - "defaultValue": "'labeled'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class TableHeader\n extends PreactCustomElement\n implements TableHeaderProps\n{\n accessor listSlot: TableHeaderProps['listSlot'];\n accessor format: TableHeaderProps['format'];\n constructor();\n}" - }, - "ListSlotType": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ListSlotType", - "value": "'primary' | 'secondary' | 'kicker' | 'inline' | 'labeled'", - "description": "Represents the semantic type of content slots within list items.\n\n- `primary`: The main content or title of the list item.\n- `secondary`: Supporting or descriptive content below the primary content.\n- `kicker`: A small label or tag displayed above the primary content.\n- `inline`: Content displayed inline with the primary content.\n- `labeled`: Content with an associated label.", - "isPublicDocs": true - }, - "HeaderFormat": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "HeaderFormat", - "value": "'base' | 'numeric' | 'currency'", - "description": "Represents the format options for table headers that control styling and alignment of column content.\n\nAvailable values:\n- `base`: Standard format for text columns\n- `currency`: Right-aligned format for monetary values\n- `numeric`: Right-aligned format for numeric values", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table header component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableHeaderSlots", - "typeDefinitions": { - "TableHeaderSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderSlots", - "description": "The table header component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The column heading text.\n\nThis text labels the column in table variant and appears as a label for data in list variant.", - "isOptional": true - } - ], - "value": "export interface TableHeaderSlots {\n /**\n * The column heading text.\n *\n * This text labels the column in table variant and appears as a label for data in list variant.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Table header row", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "type": "TableHeaderRow", - "typeDefinitions": { - "TableHeaderRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRow", - "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.\n\nTable header row must contain table header components for each column. These headers provide context for the data columns and can support sorting functionality.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class TableHeaderRow\n extends PreactCustomElement\n implements TableHeaderRowProps\n{\n constructor();\n /** @private */\n connectedCallback(): void;\n /** @private */\n disconnectedCallback(): void;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table header row component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableHeaderRowSlots", - "typeDefinitions": { - "TableHeaderRowSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableHeaderRowSlots", - "description": "The table header row component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The column headers displayed in the table header row.\n\nAccepts table header components, with each header defining a column and providing its label.", - "isOptional": true - } - ], - "value": "export interface TableHeaderRowSlots {\n /**\n * The column headers displayed in the table header row.\n *\n * Accepts table header components, with each header defining a column and providing its label.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "Table row", - "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.\n\nTable 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.", - "type": "TableRow", - "typeDefinitions": { - "TableRow": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRow", - "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.\n\nTable 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "clickDelegate", - "value": "string", - "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.\n\nThis 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class TableRow extends PreactCustomElement implements TableRowProps {\n constructor();\n accessor clickDelegate: string;\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The table row component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TableRowSlots", - "typeDefinitions": { - "TableRowSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TableRowSlots", - "description": "The table row component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The data cells displayed in this table row.\n\nAccepts table cell components, with each cell containing a data value for the corresponding column.", - "isOptional": true - } - ], - "value": "export interface TableRowSlots {\n /**\n * The data cells displayed in this table row.\n *\n * Accepts table cell components, with each cell containing a data value for the corresponding column.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "table-default.png", - "description": "Create a data table with header columns and rows of structured content. This example shows a customer table with name, email, order count, and phone columns.", - "codeblock": { - "title": "Add a data table", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table>\n <s-table-header-row>\n <s-table-header>Name</s-table-header>\n <s-table-header>Email</s-table-header>\n <s-table-header format=\"numeric\">Orders placed</s-table-header>\n <s-table-header>Phone</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>John Smith</s-table-cell>\n <s-table-cell>john@example.com</s-table-cell>\n <s-table-cell>23</s-table-cell>\n <s-table-cell>123-456-7890</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Jane Johnson</s-table-cell>\n <s-table-cell>jane@example.com</s-table-cell>\n <s-table-cell>15</s-table-cell>\n <s-table-cell>234-567-8901</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Brandon Williams</s-table-cell>\n <s-table-cell>brandon@example.com</s-table-cell>\n <s-table-cell>42</s-table-cell>\n <s-table-cell>345-678-9012</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html", - "editable": false - }, - { - "code": "\n \n \n Name\n Email\n Orders placed\n Phone\n \n \n \n John Smith\n john@example.com\n 23\n 123-456-7890\n \n \n Jane Johnson\n jane@example.com\n 15\n 234-567-8901\n \n \n Brandon Williams\n brandon@example.com\n 42\n 345-678-9012\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Use the `listSlot` property on table headers to control how columns are displayed when the table is converted to a list layout on mobile. This example shows a product table with badges and appropriate slot assignments for mobile readability.", - "codeblock": { - "title": "Configure columns for mobile list layout", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Product</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n <s-table-header listSlot=\"labeled\">Inventory</s-table-header>\n <s-table-header listSlot=\"labeled\">Price</s-table-header>\n </s-table-header-row>\n\n <s-table-body>\n <s-table-row>\n <s-table-cell>Water bottle</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>128</s-table-cell>\n <s-table-cell>$24.99</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>T-shirt</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"warning\">Low stock</s-badge>\n </s-table-cell>\n <s-table-cell>15</s-table-cell>\n <s-table-cell>$19.99</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Cutting board</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"critical\">Out of stock</s-badge>\n </s-table-cell>\n <s-table-cell>0</s-table-cell>\n <s-table-cell>$34.99</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n Product\n Status\n Inventory\n Price\n \n\n \n \n Water bottle\n \n Active\n \n 128\n $24.99\n \n \n T-shirt\n \n Low stock\n \n 15\n $19.99\n \n \n Cutting board\n \n Out of stock\n \n 0\n $34.99\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `paginate`, `hasPreviousPage`, and `hasNextPage` properties to display pagination controls for navigating large datasets. This example shows a paginated product table with next and previous page buttons.", - "codeblock": { - "title": "Add pagination for large datasets", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table paginate hasPreviousPage hasNextPage>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Product</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n <s-table-header listSlot=\"secondary\" format=\"numeric\">Sales</s-table-header>\n </s-table-header-row>\n\n <s-table-body>\n <s-table-row>\n <s-table-cell>Product 1</s-table-cell>\n <s-table-cell>Active</s-table-cell>\n <s-table-cell>250</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Product 2</s-table-cell>\n <s-table-cell>Active</s-table-cell>\n <s-table-cell>180</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Product 3</s-table-cell>\n <s-table-cell>Paused</s-table-cell>\n <s-table-cell>95</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n Product\n Status\n Sales\n \n\n \n \n Product 1\n Active\n 250\n \n \n Product 2\n Active\n 180\n \n \n Product 3\n Paused\n 95\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `loading` property to display a loading overlay while fetching or refreshing table data. This example shows a product table with the loading state active.", - "codeblock": { - "title": "Show a loading state while fetching data", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table loading>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Product</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n <s-table-header listSlot=\"labeled\">Inventory</s-table-header>\n </s-table-header-row>\n\n <s-table-body>\n <s-table-row>\n <s-table-cell>Water bottle</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>128</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>T-shirt</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"warning\">Low stock</s-badge>\n </s-table-cell>\n <s-table-cell>15</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Cutting board</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"critical\">Out of stock</s-badge>\n </s-table-cell>\n <s-table-cell>0</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>Notebook set</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>245</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n Product\n Status\n Inventory\n \n\n \n \n Water bottle\n \n Active\n \n 128\n \n \n T-shirt\n \n Low stock\n \n 15\n \n \n Cutting board\n \n Out of stock\n \n 0\n \n \n Notebook set\n \n Active\n \n 245\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `filters` slot to add search or filter controls above the table. This example shows a search field that lets merchants filter products by name.", - "codeblock": { - "title": "Add a search filter to a table", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table>\n <s-search-field slot=\"filters\" label=\"Search products\" labelAccessibilityVisibility=\"exclusive\" placeholder=\"Search products\"></s-search-field>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Product</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n <s-table-header listSlot=\"labeled\">Inventory</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>Water bottle</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>128</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>T-shirt</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"warning\">Low stock</s-badge>\n </s-table-cell>\n <s-table-cell>15</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n \n Product\n Status\n Inventory\n \n \n \n Water bottle\n \n Active\n \n 128\n \n \n T-shirt\n \n Low stock\n \n 15\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `variant` property to display data as stacked key-value pairs instead of as a grid. This is the default layout on mobile devices. This example shows a customer table rendered in list format.", - "codeblock": { - "title": "Display data in list format", - "tabs": [ - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-table variant=\"list\">\n <s-table-header-row>\n <s-table-header listSlot=\"kicker\">ID</s-table-header>\n <s-table-header listSlot=\"primary\">Customer</s-table-header>\n <s-table-header listSlot=\"secondary\">Email</s-table-header>\n <s-table-header listSlot=\"inline\">Status</s-table-header>\n <s-table-header listSlot=\"labeled\" format=\"numeric\">\n Orders\n </s-table-header>\n <s-table-header listSlot=\"labeled\" format=\"currency\">\n Total spent\n </s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>#1001</s-table-cell>\n <s-table-cell>Sarah Johnson</s-table-cell>\n <s-table-cell>sarah@example.com</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>23</s-table-cell>\n <s-table-cell>$1,245.50</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>#1002</s-table-cell>\n <s-table-cell>Mike Chen</s-table-cell>\n <s-table-cell>mike@example.com</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"neutral\">Inactive</s-badge>\n </s-table-cell>\n <s-table-cell>7</s-table-cell>\n <s-table-cell>$432.75</s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>#1003</s-table-cell>\n <s-table-cell>Emma Davis</s-table-cell>\n <s-table-cell>emma@example.com</s-table-cell>\n <s-table-cell>\n <s-badge tone=\"success\">Active</s-badge>\n </s-table-cell>\n <s-table-cell>15</s-table-cell>\n <s-table-cell>$892.25</s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": "\n \n \n ID\n Customer\n Email\n Status\n \n Orders\n \n \n Total spent\n \n \n \n \n #1001\n Sarah Johnson\n sarah@example.com\n \n Active\n \n 23\n $1,245.50\n \n \n #1002\n Mike Chen\n mike@example.com\n \n Inactive\n \n 7\n $432.75\n \n \n #1003\n Emma Davis\n emma@example.com\n \n Active\n \n 15\n $892.25\n \n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Text", - "description": "The text component displays inline text with specific visual styles or tones. Use text to emphasize or differentiate words or phrases within paragraphs or other block-level components, applying weight, color, or semantic styling.\n\nText supports multiple visual variants, alignment options, and line clamping for flexible inline typography control. For block-level text content, use [paragraph](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/paragraph).", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/text.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Apply semantic types to improve meaning:** Use `strong` for key words or phrases that need emphasis, `address` for contact information like physical or email addresses, and `redundant` for screen reader context when content is visually duplicated. Semantic types help screen readers convey the correct meaning to merchants.\n- **Emphasize sparingly and strategically:** Use strong to emphasize key words or numbers within sentences, not entire sentences. Too much emphasis dilutes its effectiveness and makes content harder to scan.\n- **Choose appropriate tones for status:** Apply tones like critical, success, or caution to communicate status inline. Tones draw attention to important information but work best when paired with clear language, not used alone.\n- **Consider contrast for subdued text:** Subdued text works well for timestamps and metadata, but avoid using it for critical information that merchants must read." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Text renders inline by default and flows with surrounding content. For block-level text with spacing, use the [paragraph](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/paragraph) component or wrap in layout components.\n- The component doesn't include text truncation or ellipsis. Long text will wrap or overflow depending on the container. Use other components like [heading](/docs/api/{API_NAME}/{API_VERSION}/web-components/typography-and-content/heading) with line clamping if truncation is needed.\n- Tone colors are optimized for light backgrounds. Using tones on dark or colored backgrounds might not meet accessibility contrast requirements." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the text component.", - "type": "Text", - "typeDefinitions": { - "Text": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Text", - "description": "Configure the following properties on the text component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "accessibilityVisibility", - "value": "\"visible\" | \"hidden\" | \"exclusive\"", - "description": "The visibility mode of the element for both visual and assistive technology users.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "color", - "value": "\"base\" | \"subdued\"", - "description": "The color emphasis level that controls visual intensity.\n\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "dir", - "value": "\"\" | \"auto\" | \"ltr\" | \"rtl\"", - "description": "Indicates the directionality of the element’s text.\n\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n- `auto`: The user agent determines the direction based on the content.\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "fontVariantNumeric", - "value": "\"auto\" | \"normal\" | \"tabular-nums\"", - "description": "The rendering style for numbers in the font.\n\n- `auto`: Inherits the setting from the parent element.\n- `normal`: Uses the font's default numeric glyphs.\n- `tabular-nums`: Uses fixed-width numeric glyphs, ensuring numbers align vertically in tables or lists.\n\nLearn more about the [font-variant-numeric property](https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant-numeric).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "interestFor", - "value": "string", - "description": "The ID of the component to show when users hover over or focus on this component. Use this to connect interactive components to popovers or tooltips that provide additional context or information.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "tone", - "value": "\"info\" | \"success\" | \"warning\" | \"critical\" | \"auto\" | \"neutral\" | \"caution\"", - "description": "The semantic tone that's applied to the text, which changes its color to convey meaning.\n\n- `info`: Informational content or helpful tips (blue).\n- `success`: Positive outcomes or successful states (green).\n- `warning`: Important warnings about potential issues (orange).\n- `critical`: Urgent problems or destructive actions (red).\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent (gray).\n- `caution`: Advisory notices that need attention (yellow).", - "defaultValue": "'auto'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "type", - "value": "\"strong\" | \"generic\" | \"address\" | \"redundant\"", - "description": "The semantic type and styling treatment for the text content.\n\n- `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n- `generic`: Standard text with no special semantic meaning or styling.\n- `address`: Marks the text as contact information, such as a physical or email address.\n- `redundant`: Indicates the text is redundant or duplicated information for screen reader context.", - "defaultValue": "'generic'", - "isOptional": true - } - ], - "value": "declare class Text extends PreactCustomElement implements TextProps {\n accessor fontVariantNumeric: TextProps['fontVariantNumeric'];\n accessor color: TextProps['color'];\n /**\n * The semantic tone that's applied to the text, which changes its color to convey meaning.\n *\n * - `info`: Informational content or helpful tips (blue).\n * - `success`: Positive outcomes or successful states (green).\n * - `warning`: Important warnings about potential issues (orange).\n * - `critical`: Urgent problems or destructive actions (red).\n * - `auto`: Automatically determined based on context.\n * - `neutral`: General information without specific intent (gray).\n * - `caution`: Advisory notices that need attention (yellow).\n */\n accessor tone: TextProps['tone'];\n /**\n * The semantic type and styling treatment for the text content.\n *\n * - `strong`: Emphasizes the text with strong importance, typically displayed in bold.\n * - `generic`: Standard text with no special semantic meaning or styling.\n * - `address`: Marks the text as contact information, such as a physical or email address.\n * - `redundant`: Indicates the text is redundant or duplicated information for screen reader context.\n */\n accessor type: TextProps['type'];\n accessor dir: TextProps['dir'];\n accessor accessibilityVisibility: TextProps['accessibilityVisibility'];\n accessor interestFor: string;\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The text component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TextSlots", - "typeDefinitions": { - "TextSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextSlots", - "description": "The text component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The text content displayed within the text component, which applies semantic meaning and styling appropriate to the specified text type.", - "isOptional": true - } - ], - "value": "export interface TextSlots {\n /**\n * The text content displayed within the text component, which applies semantic meaning and styling appropriate to the specified text type.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "text-default.png", - "description": "Create inline text elements with semantic types to add structure and meaning. This example shows strong text for a label paired with regular text for the value.", - "codeblock": { - "title": "Add inline text with emphasis", - "tabs": [ - { - "title": "html", - "code": "<s-paragraph>\n <s-text type=\"strong\">Name: </s-text>\n <s-text>Jane Doe</s-text>\n</s-paragraph>", - "language": "html", - "editable": false - }, - { - "code": "
\n Name: \n Jane Doe\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Apply semantic tones to signal different statuses inline. This example shows `success`, `critical`, and `warning` tones for common order and inventory states.", - "codeblock": { - "title": "Communicate status with tones", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"small\">\n <s-text tone=\"success\">Order fulfilled</s-text>\n <s-text tone=\"critical\">Payment failed</s-text>\n <s-text tone=\"warning\">Low inventory</s-text>\n</s-stack>", - "language": "html" - }, - { - "code": "\n Order fulfilled\n Payment failed\n Low inventory\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `type` property to `address` to render contact information with proper semantic meaning. This example shows a formatted address that screen readers identify as address content.", - "codeblock": { - "title": "Display a semantic address", - "tabs": [ - { - "title": "html", - "code": "<s-text type=\"address\">\n 123 Commerce Street, Toronto, ON M5V 2H1\n</s-text>", - "language": "html" - }, - { - "code": "\n 123 Commerce Street, Toronto, ON M5V 2H1\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `color` property to `subdued` for secondary metadata like timestamps and supplementary details. This example shows a subdued text element for a last-updated indicator.", - "codeblock": { - "title": "De-emphasize secondary information", - "tabs": [ - { - "title": "html", - "code": "<s-text color=\"subdued\">\n Last updated 2 hours ago\n</s-text>", - "language": "html" - }, - { - "code": "\n Last updated 2 hours ago\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `fontVariantNumeric` property to `tabular-nums` to render numbers with consistent widths for even alignment in data displays. This example shows tabular number formatting for a price.", - "codeblock": { - "title": "Align numbers with tabular formatting", - "tabs": [ - { - "title": "html", - "code": "<s-text fontVariantNumeric=\"tabular-nums\">\n $1,234.56\n</s-text>", - "language": "html" - }, - { - "code": "\n $1,234.56\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `accessibilityVisibility` property to provide additional context for screen readers without affecting the visual layout. This example shows hidden text that communicates pricing context to assistive technologies.", - "codeblock": { - "title": "Add screen-reader-only text", - "tabs": [ - { - "title": "html", - "code": "<s-text accessibilityVisibility=\"exclusive\">\n Product prices include tax\n</s-text>", - "language": "html" - }, - { - "code": "\n Product prices include tax\n", - "language": "preview" - } - ] - } - }, - { - "description": "Use the `interestFor` property to connect text to a tooltip, displaying additional context on hover or focus. This example shows explanatory text that triggers a tooltip with SKU details.", - "codeblock": { - "title": "Associate text with a tooltip", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"sku-tooltip\">\n SKU must be unique across all products and cannot be changed after creation\n</s-tooltip>\n<s-text color=\"subdued\" interestFor=\"sku-tooltip\">\n What is a product SKU?\n</s-text>", - "language": "html" - }, - { - "code": "\n SKU must be unique across all products and cannot be changed after creation\n\n\n What is a product SKU?\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set the `dir` property to `rtl` for right-to-left languages like Arabic and Hebrew. This example shows text rendered in Arabic with right-to-left direction.", - "codeblock": { - "title": "Render right-to-left text", - "tabs": [ - { - "title": "html", - "code": "<s-text dir=\"rtl\">\n محتوى النص باللغة العربية\n</s-text>", - "language": "html" - }, - { - "code": "\n محتوى النص باللغة العربية\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Text area", - "description": "The text area component captures multi-line text input. Use it to collect descriptions, notes, comments, or other extended text content.\n\nThe component supports configurable height, character limits, and validation. For single-line text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/textarea.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Set appropriate initial height:** The visible row count sets merchants' expectations for how much content to provide. A small textarea suggests brief input, while a larger one indicates more detailed content is expected.\n- **Set realistic length constraints:** Define maximum and minimum character limits that reflect actual requirements. Communicate these limits clearly so merchants understand how much content they need to provide.\n- **Provide helpful placeholder examples:** Show merchants what kind of content and level of detail you expect. Good placeholder text demonstrates format and tone rather than just stating the field's purpose.\n- **Give real-time feedback on length limits:** When enforcing maximum length, show merchants how many characters they have remaining. This helps them craft their content within constraints without exceeding limits." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The `maxLength` attribute prevents typing but doesn't reliably prevent pasting longer content. Browsers handle this differently. Always validate length server-side.\n- The component only accepts plain text. If you need bold, italics, lists, or other formatting, you must implement a rich text editor or use plain text with Markdown syntax." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the text area component.", - "type": "TextArea", - "typeDefinitions": { - "TextArea": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextArea", - "description": "Configure the following properties on the text area component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "rows", - "value": "number", - "description": "A number of visible text lines.", - "defaultValue": "2", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.", - "isOptional": true - } - ], - "value": "declare class TextArea\n extends PreactFieldElement\n implements TextAreaProps\n{\n accessor maxLength: TextAreaProps['maxLength'];\n accessor minLength: TextAreaProps['minLength'];\n accessor rows: TextAreaProps['rows'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The text area component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "TextAreaEvents", - "typeDefinitions": { - "TextAreaEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextAreaEvents", - "description": "The text area component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text area loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text area value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text area receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the text area.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface TextAreaEvents {\n /**\n * A callback fired when the text area value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the text area.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the text area loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the text area receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "textarea-default.png", - "description": "Add a multi-line text input for collecting longer content from merchants. This example shows a text area with a pre-filled shipping address and a set number of visible rows.", - "codeblock": { - "title": "Add a basic text area", - "tabs": [ - { - "title": "html", - "code": "<s-text-area\n label=\"Shipping address\"\n value=\"1776 Barnes Street, Orlando, FL 32801\"\n rows=\"3\"\n></s-text-area>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Collect longer text like product descriptions with a placeholder to guide input. This example shows an empty text area with placeholder text and autocomplete disabled.", - "codeblock": { - "title": "Collect text with a placeholder", - "tabs": [ - { - "title": "html", - "code": "<s-text-area\n label=\"Product description\"\n placeholder=\"Enter a detailed description...\"\n autocomplete=\"off\"\n></s-text-area>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Set a maximum character length to keep input concise, such as for SEO meta descriptions. This example shows a text area with a 160-character limit and help text explaining the constraint.", - "codeblock": { - "title": "Limit input length with a character cap", - "tabs": [ - { - "title": "html", - "code": "<s-text-area\n label=\"Meta description\"\n max-length=\"160\"\n details=\"Appears in search results. Keep under 160 characters for best visibility.\"\n placeholder=\"Write a compelling description that will appear in Google search results...\"\n rows=\"3\"\n autocomplete=\"off\"\n></s-text-area>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display an error message when the entered text does not meet validation requirements. This example shows a text area with a minimum length constraint and an error explaining what is needed.", - "codeblock": { - "title": "Show a validation error", - "tabs": [ - { - "title": "html", - "code": "<s-text-area\n label=\"Reason for return\"\n error=\"Please provide a detailed explanation for the return request. This helps us improve our products and process the refund faster.\"\n minLength=\"20\"\n placeholder=\"Explain why the customer is returning this item...\"\n rows=\"3\"\n autocomplete=\"off\"\n></s-text-area>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Prevent editing by making a text area read-only or fully disabled. This example shows a read-only field for viewing order notes and a disabled field for internal comments.", - "codeblock": { - "title": "Disable or make a text area read-only", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-text-area\n label=\"Order notes\"\n value=\"Customer requested gift wrapping.\"\n readOnly\n rows=\"2\"\n ></s-text-area>\n\n <s-text-area\n label=\"Internal comments\"\n value=\"Pending review by fulfillment team.\"\n disabled\n rows=\"2\"\n ></s-text-area>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Text field", - "description": "The text field component captures single-line text input. Use it to collect short, free-form information like names, titles, or identifiers.\n\nThe component supports various input configurations including placeholders, character limits, and validation. For multi-line text entry, use [text area](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-area). For specialized input types, use [email field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/email-field), [URL field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/url-field), [password field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/password-field), or [search field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/search-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/textfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Make expected input clear:** Merchants should immediately understand what to enter and in what format. Ambiguous labels and placeholders force merchants to guess, leading to validation errors and frustration.\n- **Provide visual context:** Prefixes and suffixes help merchants understand the type of value expected and its format. Without context, merchants might not know whether they're entering a complete URL or just a subdomain, a full price or just the amount.\n- **Set constraints that match requirements:** Define character limits and validation rules based on actual business needs, not arbitrary numbers. Communicate these constraints clearly so merchants know what's expected.\n- **Give helpful feedback:** Show merchants whether their input is valid as they type, not just after they submit. When input is invalid, explain specifically what's wrong and how to fix it rather than showing generic error messages." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The `maxLength` attribute prevents typing beyond the limit, but in some edge cases, pasted or programmatically set content might exceed `maxLength`. Always validate length server-side.\n- The `accessory` slot renders content at the end of the field. For best results, use [button](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/button) or [clickable](/docs/api/{API_NAME}/{API_VERSION}/web-components/actions/clickable) components with text content." - } - ], - "definitions": [ - { - "title": "TextField", - "description": "Configure the following properties on the text field component.", - "type": "TextField", - "typeDefinitions": { - "TextField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextField", - "description": "Configure the following properties on the text field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", - "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "prefix", - "value": "string", - "description": "A non-editable text value 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`.\n\nThis text can't be edited by the user and is not included in the field's value. The prefix might not appear until the user interacts with the field. For example, an inline label might occupy the prefix position until the user focuses the field.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "suffix", - "value": "string", - "description": "A non-editable text value 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 `%`.\n\nThis text can't be edited by the user and is not included in the field's value. The suffix might not appear until the user interacts with the field. For example, an inline label might occupy the suffix position until the user focuses the field.", - "defaultValue": "''", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.", - "isOptional": true - } - ], - "value": "declare class TextField\n extends PreactFieldElement\n implements TextFieldProps\n{\n accessor icon: TextFieldProps['icon'];\n accessor maxLength: TextFieldProps['maxLength'];\n accessor minLength: TextFieldProps['minLength'];\n accessor prefix: TextFieldProps['prefix'];\n accessor suffix: TextFieldProps['suffix'];\n /**\n * The current text value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "AnyString": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyString", - "value": "string & {}", - "description": "A utility type that enables autocomplete for specific string literals while still accepting any string value. By intersecting `string` with an empty object type, this prevents TypeScript from widening literal types, preserving IDE suggestions for known values while maintaining flexibility for custom strings.", - "isPublicDocs": true - }, - "TextAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TextAutocompleteField", - "value": "'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'", - "description": "Represents autocomplete values that are valid for text input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for text-based inputs.\n\nAvailable values:\n- `name` - Full name\n- `given-name` - First name\n- `additional-name` - Middle name\n- `family-name` - Last name\n- `nickname` - Nickname or handle\n- `username` - Username for login\n- `honorific-prefix` - Name prefix (Mr., Mrs., Dr.)\n- `honorific-suffix` - Name suffix (Jr., Sr., III)\n- `organization` - Company or organization name\n- `organization-title` - Job title or position\n- `address-line1` - Street address (first line)\n- `address-line2` - Street address (second line)\n- `address-line3` - Street address (third line)\n- `address-level1` - State or province\n- `address-level2` - City or town\n- `address-level3` - District or locality\n- `address-level4` - Neighborhood or suburb\n- `street-address` - Complete street address (multi-line)\n- `postal-code` - Postal or ZIP code\n- `country` - Country code (US, CA, GB)\n- `country-name` - Country name (United States, Canada)\n- `language` - Preferred language\n- `sex` - Gender or sex\n- `one-time-code` - One-time codes for authentication\n- `transaction-currency` - Currency code (USD, EUR, GBP)\n- `cc-name` - Name on credit card\n- `cc-given-name` - First name on credit card\n- `cc-additional-name` - Middle name on credit card\n- `cc-family-name` - Last name on credit card\n- `cc-type` - Credit card type (Visa, Mastercard)", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The text field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TextFieldSlots", - "typeDefinitions": { - "TextFieldSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextFieldSlots", - "description": "The text field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "accessory", - "value": "HTMLElement", - "description": "Additional interactive content displayed within the text field.\n\nAccepts button and clickable components with text content only. Other component types or complex layouts are not supported.", - "isOptional": true - } - ], - "value": "export interface TextFieldSlots {\n /**\n * Additional interactive content displayed within the text field.\n *\n * Accepts button and clickable components with text content only. Other component types or complex layouts are not supported.\n */\n accessory?: HTMLElement;\n}" - } - } - }, - { - "title": "Events", - "description": "The text field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "TextFieldEvents", - "typeDefinitions": { - "TextFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TextFieldEvents", - "description": "The text field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the text field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the text field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface TextFieldEvents {\n /**\n * A callback fired when the text field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the text field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the text field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the text field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "textfield-default.png", - "description": "Add a single-line text input for collecting short-form information from merchants. This example shows a text field with a label, pre-filled value, and placeholder.", - "codeblock": { - "title": "Add a basic text field", - "tabs": [ - { - "title": "html", - "code": "<s-text-field\n label=\"Store name\"\n value=\"Jaded Pixel\"\n placeholder=\"Become a merchant\"\n></s-text-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Add an icon to a text field to help merchants quickly identify its purpose. This example shows a text field with a search icon and placeholder text.", - "codeblock": { - "title": "Add an icon to a text field", - "tabs": [ - { - "title": "html", - "code": "<s-text-field\n label=\"Search\"\n icon=\"search\"\n placeholder=\"Search products...\"\n></s-text-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Provide specific error messages to tell merchants what went wrong and what correction is needed. This example shows three text fields contrasting a vague error, a specific validation error, and a business rule error.", - "codeblock": { - "title": "Provide specific error messages for merchant context", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <!-- Generic error (avoid) -->\n <s-text-field label=\"Product weight\" error=\"Invalid value\"></s-text-field>\n\n <!-- Specific error (preferred) -->\n <s-text-field\n label=\"Product weight\"\n error=\"Weight must be greater than 0 and less than 500 pounds for shipping calculations\"\n ></s-text-field>\n\n <!-- Business rule error -->\n <s-text-field\n label=\"SKU\"\n error=\"SKU 'TSHIRT-001' already exists. SKUs must be unique across all products.\"\n ></s-text-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n\n \n \n\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Add a prefix or suffix to provide context for the expected value, such as a country code or card type. This example shows a phone number field with a prefix and a credit card field with a suffix.", - "codeblock": { - "title": "Add a prefix and suffix", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"small\">\n <s-text-field label=\"Phone number\" prefix=\"+03\" />\n <s-text-field\n label=\"Credit Card Number\"\n value=\"1234 5678 9012 3456\"\n suffix=\"VISA\"\n />\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Place an interactive element like an icon or button inside a text field using the accessory slot. This example shows a text field with an info icon that triggers a tooltip.", - "codeblock": { - "title": "Add an accessory to a text field", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"info-tooltip\">This is info tooltip</s-tooltip>\n<s-text-field label=\"Discount code\">\n <s-icon slot=\"accessory\" interestFor=\"info-tooltip\" type=\"info\" />\n</s-text-field>\n", - "language": "html" - }, - { - "code": "This is info tooltip\n\n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Prevent editing by making a text field read-only or fully disabled. This example shows a read-only store URL that merchants can copy and a disabled account ID.", - "codeblock": { - "title": "Disable or make a text field read-only", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-text-field\n label=\"Store URL\"\n value=\"my-store.myshopify.com\"\n readOnly\n ></s-text-field>\n\n <s-text-field\n label=\"Account ID\"\n value=\"acct_12345\"\n disabled\n ></s-text-field>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n\n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Thumbnail", - "description": "The thumbnail component displays small preview images representing content, products, or media items. Use thumbnail to provide visual identification in lists, tables, or cards where space is constrained and quick recognition is important.\n\nThumbnails support multiple sizes, alt text for accessibility, and fallback states for missing images. For full-size images, use [image](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/image). For user profile images, use [avatar](/docs/api/{API_NAME}/{API_VERSION}/web-components/media-and-visuals/avatar).", - "category": "Web components", - "subCategory": "Media and visuals", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/thumbnail.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Design for square cropping:** Thumbnails automatically crop images to a 1:1 aspect ratio from the center. If your images aren't square, important content near the edges might be cut off.\n- **Maintain visual consistency in groups:** Use the same thumbnail size throughout a single list, table, or grid. Mixing sizes creates visual chaos and makes interfaces harder to scan.\n- **Always provide descriptive alternative text:** Write alt text that describes the image content, not generic labels like \"thumbnail\" or \"product image.\" Good alt text helps all merchants understand what they're looking at.\n- **Choose appropriate sizes for your context:** Smaller thumbnails work better in dense layouts like tables, while larger sizes suit product-focused interfaces. Consider the merchant's task and the information density when choosing a size." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Thumbnails always render as 1:1 squares and will crop non-square images to fit. The component uses center cropping, which might cut off important image details.\n- Images can be loaded from remote URLs or local file resources. Cross-origin images require proper CORS headers from the image host.\n- The component shows a generic placeholder icon when images fail to load or no source is provided. Custom placeholder graphics or branded fallbacks aren't available.\n- Thumbnails don't include built-in lazy loading. In long lists with many thumbnails, all images load immediately, which might impact performance." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the thumbnail component.", - "type": "Thumbnail", - "typeDefinitions": { - "Thumbnail": { - "filePath": "src/surfaces/admin/components.ts", - "name": "Thumbnail", - "description": "Configure the following properties on the thumbnail component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "alt", - "value": "string", - "description": "Alternative text that describes the image for accessibility.\n\nProvides a text description of the image for users with assistive technology and serves as a fallback when the image fails to load. A well-written description enables people with visual impairments to understand non-text content.\n\nWhen a screen reader encounters an image, it reads this description aloud. When an image fails to load, this text displays on screen, helping all users understand what content was intended.\n\nLearn 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).", - "defaultValue": "``", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "size", - "value": "\"small\" | \"small-200\" | \"small-100\" | \"base\" | \"large\" | \"large-100\"", - "description": "The size of the product thumbnail image.\n\n- `small-200`: Smallest thumbnail size, ideal for compact product lists or tables.\n- `small-100`: Very small thumbnail, suitable for dense layouts.\n- `small`: Small thumbnail for space-constrained contexts.\n- `base`: Default size that balances visibility and space efficiency.\n- `large`: Larger thumbnail for featured products or detailed views.\n- `large-100`: Extra large thumbnail for prominent product display.", - "defaultValue": "'base'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "src", - "value": "string", - "description": "The image source (either a remote URL or a local file resource).\n\nWhen the image is loading or no `src` is provided, a placeholder is rendered.", - "isOptional": true - } - ], - "value": "declare class Thumbnail extends PreactCustomElement implements ThumbnailProps {\n accessor src: ThumbnailProps['src'];\n accessor alt: ThumbnailProps['alt'];\n accessor size: ThumbnailProps['size'];\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The thumbnail component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "ThumbnailEvents", - "typeDefinitions": { - "ThumbnailEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ThumbnailEvents", - "description": "The thumbnail component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "error", - "value": "OnErrorEventHandler", - "description": "A callback fired when the thumbnail image fails to load.\n\nLearn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "load", - "value": "CallbackEventListener | null", - "description": "A callback fired when the thumbnail image successfully loads.\n\nLearn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).", - "isOptional": true - } - ], - "value": "export interface ThumbnailEvents {\n /**\n * A callback fired when the thumbnail image successfully loads.\n *\n * Learn more about the [load event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/load_event).\n */\n load: CallbackEventListener | null = null;\n /**\n * A callback fired when the thumbnail image fails to load.\n *\n * Learn more about the [error event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/error_event).\n */\n error: OnErrorEventHandler = null;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "image": "thumbnail-default.png", - "description": "Display small preview images for products or items. This example presents a basic thumbnail with source URL and alt text for accessibility.", - "codeblock": { - "title": "Display a thumbnail", - "tabs": [ - { - "title": "html", - "code": "<s-thumbnail\n alt=\"Image of white sneakers\"\n src=\"https://cdn.shopify.com/static/images/polaris/thumbnail-wc_src.jpg\"\n></s-thumbnail>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Show a placeholder when no image is available. This example displays a thumbnail without a source that renders a default icon.", - "codeblock": { - "title": "Show an empty state", - "tabs": [ - { - "title": "html", - "code": "<s-thumbnail alt=\"No image available\" size=\"base\"></s-thumbnail>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Adapt thumbnail prominence to different contexts. This example displays `small-200`, `base`, and `large` sizes in a vertical stack.", - "codeblock": { - "title": "Adjust the size", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"large-100\">\n <s-thumbnail\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Image of indoor plant\"\n size=\"small-200\"\n ></s-thumbnail>\n <s-thumbnail\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Image of indoor plant\"\n size=\"base\"\n ></s-thumbnail>\n <s-thumbnail\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Image of indoor plant\"\n size=\"large\"\n ></s-thumbnail>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n \n\n", - "language": "preview" - } - ] - } - }, - { - "description": "Respond to image loading success or failure. This example uses `load` and `error` event listeners to update the UI based on the loading result.", - "codeblock": { - "title": "Handle load events", - "tabs": [ - { - "title": "html", - "code": "<s-stack direction=\"inline\" gap=\"base\" alignItems=\"center\">\n <s-thumbnail\n id=\"product-thumbnail\"\n src=\"https://cdn.shopify.com/static/sample-product/House-Plant1.png\"\n alt=\"Image of indoor plant\"\n size=\"small-200\"\n />\n <s-text id=\"status-text\">Loading...</s-text>\n</s-stack>\n\n<script>\n const thumbnail = document.getElementById('product-thumbnail');\n const statusText = document.getElementById('status-text');\n\n thumbnail.addEventListener('load', () => {\n statusText.textContent = 'Image loaded';\n });\n\n thumbnail.addEventListener('error', () => {\n statusText.textContent = 'Failed to load image';\n });\n</script>\n", - "language": "html" - }, - { - "code": "\n \n Loading...\n\n\n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Tooltip", - "description": "The tooltip component displays helpful information in a small overlay when users hover over or focus on an element. Use tooltip to provide additional context, explain functionality, or clarify terms without cluttering the interface with permanent text.\n\nTooltips support keyboard accessibility, positioning options, and activation on both hover and focus for inclusive interaction patterns.", - "category": "Web components", - "subCategory": "Overlays", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/tooltip.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use tooltips for helpful but non-essential information:** The component works best for supplementary details that enhance understanding without being critical. Never hide essential information, errors, or required instructions in tooltips.\n- **Perfect for icon-only buttons:** Icon buttons need tooltips to clarify what they do. Include the button's action and keyboard shortcut if available to help merchants work efficiently.\n- **Keep tooltip content brief and clear:** Aim for a short sentence or phrase. Long tooltip content is hard to read and suggests the information might need a more prominent placement in the UI.\n- **Recognize when tooltips indicate a design problem:** If you're adding many tooltips to explain your interface, the design itself might be unclear. Consider improving labels, layout, or information architecture instead.\n- **Remember they're desktop-only:** Tooltips don't work on touch devices. If the information is important enough to need a tooltip, consider making it visible by default on mobile." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- Tooltips only appear on devices with a mouse or trackpad. They don't work on touch devices like phones and tablets, which limits their usefulness for mobile merchants.\n- Tooltips can't contain interactive elements like links or buttons. They dismiss when the user moves away, making interaction impossible.\n- The component doesn't provide built-in positioning controls. Tooltip placement is automatic and might not always appear in the ideal location for complex layouts." - } - ], - "definitions": [ - { - "title": "Slots", - "description": "The tooltip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "TooltipSlots", - "typeDefinitions": { - "TooltipSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "TooltipSlots", - "description": "The tooltip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The informational text or elements displayed within the tooltip overlay, providing helpful context or explanations when users interact with the associated element.\n\nOnly accepts text, paragraph components, and raw `textContent`.", - "isOptional": true - } - ], - "value": "export interface TooltipSlots {\n /**\n * The informational text or elements displayed within the tooltip overlay, providing helpful context or explanations when users interact with the associated element.\n *\n * Only accepts text, paragraph components, and raw `textContent`.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "description": "Create a tooltip that provides supplementary information when a user hovers or focuses on a trigger element. This example shows a tooltip describing a toolbar button's action.", - "codeblock": { - "title": "Add a basic tooltip", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"bold-tooltip\">Bold</s-tooltip>\n<s-button interestFor=\"bold-tooltip\" accessibilityLabel=\"Bold\">B</s-button>\n", - "language": "html", - "editable": false - }, - { - "code": "
Bold\nB\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Attach a tooltip to inline text to provide a definition or additional context on hover. This example shows a tooltip triggered by a text label that explains the shipping status.", - "codeblock": { - "title": "Explain a term with a tooltip on text", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"shipping-tooltip\">This order has active shipping labels.</s-tooltip>\n<s-text interestFor=\"shipping-tooltip\">Shipping status</s-text>\n", - "language": "html" - }, - { - "code": "
This order has active shipping labels.\nShipping status\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Add a tooltip to an icon-only button to clarify its action and provide an accessible description. This example shows an info button that displays a tooltip with product details on hover.", - "codeblock": { - "title": "Describe an icon-only button with a tooltip", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"info-tooltip\">View product details and inventory status</s-tooltip>\n<s-button interestFor=\"info-tooltip\" accessibilityLabel=\"More information\">\n <s-icon type=\"info\"></s-icon>\n</s-button>\n", - "language": "html" - }, - { - "code": "
View product details and inventory status\n\n \n\n
", - "language": "preview" - } - ] - } - }, - { - "description": "Include a keyboard shortcut in a tooltip to help merchants discover faster ways to perform actions. This example shows a Save button with a tooltip that displays the keyboard shortcut.", - "codeblock": { - "title": "Show a keyboard shortcut in a tooltip", - "tabs": [ - { - "title": "html", - "code": "<s-tooltip id=\"save-shortcut\">Save (⌘S)</s-tooltip>\n<s-button interestFor=\"save-shortcut\">Save</s-button>\n", - "language": "html" - }, - { - "code": "
Save (⌘S)\nSave\n
", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "URL field", - "description": "The URL field component collects URLs from users with built-in formatting and validation. Use URL field for website addresses, link destinations, or any URL input to provide URL-specific keyboard layouts and automatic validation.\n\nURL fields support protocol prefixing, validation, and help text to guide users toward entering properly formatted web addresses. For general text input, use [text field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/text-field).", - "category": "Web components", - "subCategory": "Forms", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/urlfield.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Validate URL structure:** Browser validation for URL fields is minimal and inconsistent. Implement your own validation to ensure URLs have proper structure, valid protocols, and acceptable formats for your use case.\n- **Make the expected format clear:** Users need to know whether to include protocols, what protocols are acceptable, and what type of URL you're expecting. Show complete example URLs in placeholders to demonstrate the required format.\n- **Handle missing protocols gracefully:** Users often forget to include `https://` when entering URLs. Decide whether to automatically add it, accept URLs without protocols, or show clear error messages explaining what's missing.\n- **Set realistic length constraints:** URL length limits vary across browsers and servers. Set constraints based on where the URL will be used, not just arbitrary maximums. Communicate these limits clearly when they're necessary.\n- **Provide clear context:** Make the URL's purpose obvious through labels and help text. Users entering a product image URL have different needs than those entering a social media profile link or external reference." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The HTML5 URL input type (`type=\"url\"`) has very basic validation that varies by browser. Most browsers only check for **://** somewhere in the string. Invalid URLs like **ht://invalid** might pass browser validation. Always implement comprehensive server-side URL validation.\n- While RFC 3986 doesn't specify a maximum URL length, the practical recommended limit for broad compatibility across web clients and servers is 2,048 characters. Modern browsers support much longer URLs, but many servers have lower limits for request URIs. Setting `maxLength` above 2,048 might create URLs that work in some contexts but fail in others.\n- URLs starting with **//** (protocol-relative, like **//example.com**) are technically valid but might not pass HTML5 URL validation. Users must include the full protocol (http:// or https://).\n- This component doesn't automatically prepend **https://** if merchants omit the protocol. A value like **example.com** will be invalid and require manual correction. You must implement this behavior yourself if desired.\n- URLs with special characters (spaces, quotes, Unicode) should be percent-encoded (%20, %22), but the component doesn't auto-encode. Provide guidance to merchants or implement encoding in your validation logic." - } - ], - "definitions": [ - { - "title": "Properties", - "description": "Configure the following properties on the URL field component.", - "type": "URLField", - "typeDefinitions": { - "URLField": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLField", - "description": "Configure the following properties on the URL field component.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@15957", - "value": "ElementInternals", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", - "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "defaultValue": "'on' for everything else", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, 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.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "details", - "value": "string", - "description": "Supplementary text displayed below the checkbox to provide additional context, instructions, or help. Use this to explain what checking the box means or provide guidance to users. This text is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "error", - "value": "string", - "description": "An error message displayed below the checkbox to indicate validation problems. When set, the checkbox is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "formResetCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "getAttribute", - "value": "(qualifiedName: string) => string", - "description": "Global keyboard event handlers for things like key bindings typically ignore keystrokes originating from within input elements. Unfortunately, these never account for a Custom Element being the input element.\n\nTo fix this, we spoof getAttribute & hasAttribute to make a PreactFieldElement appear as a contentEditable \"input\" when it contains a focused input element.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "hasAttribute", - "value": "(qualifiedName: string) => boolean", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "isContentEditable", - "value": "boolean", - "description": "Whether the shadow tree contains a focused input (input, textarea, select, ).\n\nNote: this does _not_ return true for focussed non-field form elements like buttons.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "labelAccessibilityVisibility", - "value": "\"visible\" | \"exclusive\"", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone (default).\n- `exclusive`: The label is visually hidden but still announced by screen readers.\n\nUse `exclusive` when the surrounding context makes the label redundant visually, but screen reader users still need it for clarity.", - "defaultValue": "'visible'", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "maxLength", - "value": "number", - "description": "The maximum number of characters allowed in the field.", - "defaultValue": "Infinity", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "minLength", - "value": "number", - "description": "The minimum number of characters required in the field.", - "defaultValue": "0", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "placeholder", - "value": "string", - "description": "The placeholder text displayed in the field when it's empty, providing a hint about the expected input format or value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertyDeclaration", - "name": "required", - "value": "boolean", - "description": "Whether the field requires a value before form submission. Displays a visual indicator and adds semantic meaning, but doesn't automatically validate or show errors. Use the `error` property to display validation messages.", - "defaultValue": "false", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "GetAccessor", - "name": "value", - "value": "string", - "description": "The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.", - "isOptional": true - } - ], - "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" - }, - "URLAutocompleteField": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Events", - "description": "The URL field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/app-ui/using-web-components#handling-events).", - "type": "URLFieldEvents", - "typeDefinitions": { - "URLFieldEvents": { - "filePath": "src/surfaces/admin/components.ts", - "name": "URLFieldEvents", - "description": "The URL field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the URL field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the URL field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the URL field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener<'input'>", - "description": "A callback fired when the user inputs data into the URL field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface URLFieldEvents {\n /**\n * A callback fired when the URL field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change: CallbackEventListener<'input'>;\n /**\n * A callback fired when the user inputs data into the URL field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input: CallbackEventListener<'input'>;\n /**\n * A callback fired when the URL field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur: CallbackEventListener<'input'>;\n /**\n * A callback fired when the URL field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus: CallbackEventListener<'input'>;\n}" - }, - "CallbackEventListener": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A function that handles events from UI components.\n\nThis type represents an event listener callback that receives a `CallbackEvent` with a strongly-typed `currentTarget`. Use this for component event handlers like `click`, `focus`, `blur`, and other DOM events.", - "isPublicDocs": true - }, - "CallbackEvent": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "Event & {\n currentTarget: HTMLElementTagNameMap[T];\n}", - "description": "An event object with a strongly-typed `currentTarget` property that references the specific HTML element that triggered the event.\n\nThis type extends the standard DOM `Event` interface and ensures type safety when accessing the element that fired the event.", - "isPublicDocs": true - } - } - } - ], - "defaultExample": { - "description": "Capture web addresses from users with URL-specific input. This example pairs a label with placeholder text guiding the expected format.", - "codeblock": { - "title": "Collect a URL", - "tabs": [ - { - "title": "html", - "code": "<s-url-field\n label=\"Your website\"\n details=\"Enter your business website\"\n placeholder=\"https://example.com\"\n></s-url-field>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Enforce URL requirements before form submission. This example configures required validation with length constraints and custom error messages.", - "codeblock": { - "title": "Set validation constraints", - "tabs": [ - { - "title": "html", - "code": "<s-url-field\n label=\"Company website\"\n required\n minLength=\"10\"\n maxLength=\"200\"\n error=\"Please enter a valid website URL\"\n></s-url-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Display a URL that users can copy but not edit. This example uses readOnly to prevent changes while keeping the value selectable and included in form submissions.", - "codeblock": { - "title": "Pre-fill a URL", - "tabs": [ - { - "title": "html", - "code": "<s-url-field\n label=\"Profile URL\"\n value=\"https://shop.myshopify.com\"\n readOnly\n></s-url-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - }, - { - "description": "Show a URL in a non-interactive state. This example uses disabled to gray out the field and exclude it from form submission.", - "codeblock": { - "title": "Show a disabled field", - "tabs": [ - { - "title": "html", - "code": "<s-url-field\n label=\"Store URL\"\n value=\"https://your-store.myshopify.com\"\n disabled\n></s-url-field>\n", - "language": "html" - }, - { - "code": "\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Unordered list", - "description": "The unordered list component displays a bulleted list of related items where sequence isn't critical. Use unordered list to present collections of features, options, requirements, or any group of items where order doesn't affect meaning.\n\nUnordered lists automatically add bullet points and support nested lists for hierarchical content organization. For sequential items where order is important, use [ordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/ordered-list).", - "category": "Web components", - "subCategory": "Typography and content", - "related": [], - "thumbnail": "/assets/templated-apis-screenshots/admin/components/unordered-list.png", - "isVisualComponent": true, - "subSections": [ - { - "title": "Best practices", - "type": "Generic", - "anchorLink": "best-practices", - "sectionContent": "- **Use when order doesn't matter:** Unordered lists communicate a collection of related items without sequence or ranking. Use them for features, options, or benefits where the order isn't meaningful. When sequence matters, use [ordered list](/docs/api/{API_NAME}/{API_VERSION}/web-components/layout-and-structure/ordered-list) instead.\n- **Keep items parallel in structure:** Consistent grammar and structure across list items makes content easier to scan and understand. Mixing different writing styles within a list creates cognitive friction for readers.\n- **Write concise items:** List items work best as brief, scannable content. When items become long or complex, they lose the clarity and efficiency that makes lists valuable. Consider restructuring long items into separate sections.\n- **Limit nesting depth:** Nested lists help organize hierarchical content, but deep nesting becomes difficult to follow. When you find yourself nesting beyond two levels, the content structure might be too complex for a list format." - }, - { - "title": "Limitations", - "type": "Generic", - "anchorLink": "limitations", - "sectionContent": "- The component doesn't support custom bullet styles (like checkmarks, arrows, or custom icons). All unordered lists use standard bullet markers. If you need alternative markers, you'll need to create custom list styling." - } - ], - "definitions": [ - { - "title": "Slots", - "description": "The unordered list component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "UnorderedListSlots", - "typeDefinitions": { - "UnorderedListSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "UnorderedListSlots", - "description": "The unordered list component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "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.", - "isOptional": true - } - ], - "value": "export interface UnorderedListSlots {\n /**\n * 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.\n */\n children?: HTMLElement;\n}" - } - } - }, - { - "title": "List item", - "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.\n\nList 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.", - "type": "ListItem", - "typeDefinitions": { - "ListItem": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItem", - "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.\n\nList 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.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "adoptedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "attributeChangedCallback", - "value": "(name: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "click", - "value": "({ sourceEvent }?: ClickOptions) => void", - "description": "A method like the standard `element.click()`, but you can influence the behavior with a `sourceEvent`.\n\nFor example, if the `sourceEvent` was a middle click, or has particular keys held down, components will attempt to produce the desired behavior on links, such as opening the page in the background tab.", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "connectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "disconnectedCallback", - "value": "() => void", - "description": "", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "queueRender", - "value": "() => void", - "description": "A method that queues a run of the render function. You shouldn't need to call this manually - it should be handled by changes to", - "isPrivate": true, - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "MethodDeclaration", - "name": "setAttribute", - "value": "(name: string, value: string) => void", - "description": "", - "isPrivate": true, - "isOptional": true - } - ], - "value": "declare class ListItem extends PreactCustomElement implements ListItemProps {\n constructor();\n}" - }, - "ClickOptions": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ClickOptions", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "sourceEvent", - "value": "ActivationEventEsque", - "description": "The event you want to influence the synthetic click.", - "isOptional": true - } - ], - "value": "export interface ClickOptions {\n /**\n * The event you want to influence the synthetic click.\n */\n sourceEvent?: ActivationEventEsque;\n}" - }, - "ActivationEventEsque": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ActivationEventEsque", - "description": "", - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "button", - "value": "number", - "description": "The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "ctrlKey", - "value": "boolean", - "description": "Whether the Ctrl key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "metaKey", - "value": "boolean", - "description": "Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.", - "isOptional": true - }, - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "shiftKey", - "value": "boolean", - "description": "Whether the Shift key was pressed when the event occurred.", - "isOptional": true - } - ], - "value": "export interface ActivationEventEsque {\n /**\n * Whether the Shift key was pressed when the event occurred.\n */\n shiftKey: boolean;\n /**\n * Whether the Meta/Command key (Mac) or Windows key was pressed when the event occurred.\n */\n metaKey: boolean;\n /**\n * Whether the Ctrl key was pressed when the event occurred.\n */\n ctrlKey: boolean;\n /**\n * The button number that was pressed on the mouse. 0 for left button, 1 for middle button, 2 for right button.\n */\n button: number;\n}" - } - } - }, - { - "title": "Slots", - "description": "The list item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/app-ui/using-web-components#slots).", - "type": "ListItemSlots", - "typeDefinitions": { - "ListItemSlots": { - "filePath": "src/surfaces/admin/components.ts", - "name": "ListItemSlots", - "description": "The list item component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "HTMLElement", - "description": "The content displayed within the list item, which represents a single entry in an ordered or unordered list.", - "isOptional": true - } - ], - "value": "export interface ListItemSlots {\n /**\n * The content displayed within the list item, which represents a single entry in an ordered or unordered list.\n */\n children?: HTMLElement;\n}" - } - } - } - ], - "defaultExample": { - "image": "unordered-list-default.png", - "description": "Create a bulleted list of related items. This example shows a simple list of product color options.", - "codeblock": { - "title": "Add a bulleted list", - "tabs": [ - { - "title": "html", - "code": "<s-unordered-list>\n <s-list-item>Red shirt</s-list-item>\n <s-list-item>Green shirt</s-list-item>\n <s-list-item>Blue shirt</s-list-item>\n</s-unordered-list>\n", - "language": "html", - "editable": false - }, - { - "code": "
\n Red shirt\n Green shirt\n Blue shirt\n\n
", - "language": "preview" - } - ] - } - }, - "examples": { - "description": "Component examples", - "exampleGroups": [ - { - "title": "", - "examples": [ - { - "description": "Nest unordered lists inside list items to organize hierarchical content with sub-items. This example shows a store setup checklist with nested shipping options under a parent item.", - "codeblock": { - "title": "Create nested lists with sub-items", - "tabs": [ - { - "title": "html", - "code": "<s-stack gap=\"base\">\n <s-box borderWidth=\"small-100\" borderRadius=\"base\" padding=\"base\">\n <s-unordered-list>\n <s-list-item>Configure payment settings</s-list-item>\n <s-list-item>\n Set up shipping options\n <s-unordered-list>\n <s-list-item>Domestic shipping rates</s-list-item>\n <s-list-item>International shipping zones</s-list-item>\n </s-unordered-list>\n </s-list-item>\n <s-list-item>Add product descriptions</s-list-item>\n </s-unordered-list>\n </s-box>\n\n <s-box borderWidth=\"small-100\" borderRadius=\"base\" padding=\"base\">\n <s-unordered-list>\n <s-list-item>Enable online payments</s-list-item>\n <s-list-item>Set up shipping rates</s-list-item>\n <s-list-item>Configure tax settings</s-list-item>\n <s-list-item>Add product descriptions</s-list-item>\n </s-unordered-list>\n </s-box>\n</s-stack>\n", - "language": "html" - }, - { - "code": "\n \n \n Configure payment settings\n \n Set up shipping options\n \n Domestic shipping rates\n International shipping zones\n \n \n Add product descriptions\n \n \n\n \n \n Enable online payments\n Set up shipping rates\n Configure tax settings\n Add product descriptions\n \n \n\n", - "language": "preview" - } - ] - } - } - ] - } - ] - } - }, - { - "name": "Account connection", - "isOneColumnLayout": false, - "overviewPreviewDescription": "Enable merchants to connect or disconnect their store from external accounts or services.", - "description": "The account connection component is used so merchants can connect or disconnect their store to various accounts. For example, if merchants want to use the Facebook sales channel, they need to connect their Facebook account to their Shopify store.\n\n | Used to | Examples |\n | --- | --- |\n | Display connection status | Show if a sales channel is connected or disconnected |\n | Allow merchants to disconnect accounts | Enable merchants to disconnect from a marketing platform |\n\n ---\n \n\n \n", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/accountConnection.png", - "defaultExample": { - "codeblock": { - "title": "Account connection", - "tabs": [ - { - "title": "jsx", - "code": "<s-section>\n <s-stack gap=\"base\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\">\n <s-grid-item>\n <s-stack>\n <s-heading>Puzzlify</s-heading>\n <s-text color=\"subdued\">No account connected</s-text>\n </s-stack>\n </s-grid-item>\n <s-grid-item>\n <s-button variant=\"primary\">Connect</s-button>\n </s-grid-item>\n </s-grid>\n <s-text>\n By clicking Connect, you agree to accept Sample App's terms and\n conditions. You'll pay a commission rate of 15% on sales made through\n Sample App.\n </s-text>\n </s-stack>\n</s-section>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-section>\n <s-stack gap=\"base\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\">\n <s-grid-item>\n <s-stack>\n <s-heading>Puzzlify</s-heading>\n <s-text color=\"subdued\">No account connected</s-text>\n </s-stack>\n </s-grid-item>\n <s-grid-item>\n <s-button variant=\"primary\">Connect</s-button>\n </s-grid-item>\n </s-grid>\n <s-text>By clicking Connect, you agree to accept Sample App's terms and conditions. You'll pay a commission rate of 15% on sales made through Sample App.</s-text>\n</s-stack>\n</s-section>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "App card", - "isOneColumnLayout": false, - "overviewPreviewDescription": "Introduce and promote relevant apps to merchants within your app experience.", - "description": "App cards provide a consistent layout for presenting another app to merchants. They are used to highlight apps that can extend functionality or help merchants accomplish related tasks. App cards should educate merchants about the value of the suggested app and provide a clear, actionable way to learn more or install it.\n\n | Used to | Examples |\n | --- | --- |\n | Suggest complementary apps | Recommend an email marketing app to subscription service users |\n | Promote integrations | Highlight a social media scheduler that connects with your app |\n | Guide merchants to explore new solutions | Introduce a reporting tool for advanced analytics |\n\n ---\n \n\n \n", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/appCard.png", - "defaultExample": { - "codeblock": { - "title": "App card", - "tabs": [ - { - "title": "jsx", - "code": "<s-clickable\n href=\"https://apps.shopify.com/planet\"\n border=\"base\"\n borderRadius=\"base\"\n padding=\"base\"\n inlineSize=\"100%\"\n>\n <s-grid gridTemplateColumns=\"auto 1fr auto\" alignItems=\"stretch\" gap=\"base\">\n <s-thumbnail\n size=\"small\"\n src=\"https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png\"\n alt=\"Shopify Planet icon\"\n />\n <s-box>\n <s-heading>Shopify Planet</s-heading>\n <s-paragraph>Free</s-paragraph>\n <s-paragraph>\n Offer carbon-neutral shipping and showcase your commitment.\n </s-paragraph>\n </s-box>\n <s-stack justifyContent=\"start\">\n <s-button\n href=\"https://apps.shopify.com/planet\"\n icon=\"download\"\n accessibilityLabel=\"Download Shopify Planet\"\n />\n </s-stack>\n </s-grid>\n</s-clickable>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-clickable\n href=\"https://apps.shopify.com/planet\"\n border=\"base\"\n borderRadius=\"base\"\n padding=\"base\"\n inlineSize=\"100%\"\n>\n <s-grid gridTemplateColumns=\"auto 1fr auto\" alignItems=\"stretch\" gap=\"base\">\n <s-thumbnail\n size=\"small\"\n src=\"https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png\"\n alt=\"Shopify Planet icon\"\n ></s-thumbnail>\n <s-box>\n <s-heading>Shopify Planet</s-heading>\n <s-paragraph>Free</s-paragraph>\n <s-paragraph>\n Offer carbon-neutral shipping and showcase your commitment.\n </s-paragraph>\n </s-box>\n <s-stack justifyContent=\"start\">\n <s-button\n href=\"https://apps.shopify.com/planet\"\n icon=\"download\"\n accessibilityLabel=\"Download Shopify Planet\"\n ></s-button>\n </s-stack>\n </s-grid>\n</s-clickable>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Callout card", - "isOneColumnLayout": false, - "overviewPreviewDescription": "Encourage merchants to take action on new features or opportunities.", - "description": "Callout cards are used to encourage merchants to take an action related to a new feature or opportunity. They are most commonly displayed in the sales channels section of Shopify.\n \n | Used to | Examples |\n | --- | --- |\n | Promote new features or integrations | Dismissible feature announcement |\n | Drive adoption of app functionality | Common first actions |\n ---\n", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/calloutCard.png", - "defaultExample": { - "codeblock": { - "title": "Callout card", - "tabs": [ - { - "title": "jsx", - "code": "<s-section>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"small-400\" alignItems=\"start\">\n <s-grid\n gridTemplateColumns=\"@container (inline-size <= 480px) 1fr, auto auto\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-grid gap=\"small-200\">\n <s-heading>Ready to create your custom puzzle?</s-heading>\n <s-paragraph>\n Start by uploading an image to your gallery or choose from one of our\n templates.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button> Upload image </s-button>\n <s-button tone=\"neutral\" variant=\"tertiary\">\n {\" \"}\n Browse templates{\" \"}\n </s-button>\n </s-stack>\n </s-grid>\n <s-stack alignItems=\"center\">\n <s-box maxInlineSize=\"200px\" borderRadius=\"base\" overflow=\"hidden\">\n <s-image\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/callout.png\"\n alt=\"Customize checkout illustration\"\n aspectRatio=\"1/0.5\"\n />\n </s-box>\n </s-stack>\n </s-grid>\n <s-button\n icon=\"x\"\n tone=\"neutral\"\n variant=\"tertiary\"\n accessibilityLabel=\"Dismiss card\"\n />\n </s-grid>\n</s-section>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-section>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"small-400\" alignItems=\"start\">\n <s-grid\n gridTemplateColumns=\"@container (inline-size <= 480px) 1fr, auto auto\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-grid gap=\"small-200\">\n <s-heading>Ready to create your custom puzzle?</s-heading>\n <s-paragraph>\n Start by uploading an image to your gallery or choose from one of our templates.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button> Upload image </s-button>\n <s-button tone=\"neutral\" variant=\"tertiary\"> Browse templates </s-button>\n </s-stack>\n </s-grid>\n <s-stack alignItems=\"center\">\n <s-box maxInlineSize=\"200px\" borderRadius=\"base\" overflow=\"hidden\">\n <s-image\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/callout.png\"\n alt=\"Customize checkout illustration\"\n aspectRatio=\"1/0.5\"\n ></s-image>\n </s-box>\n </s-stack>\n </s-grid>\n <s-button\n icon=\"x\"\n tone=\"neutral\"\n variant=\"tertiary\"\n accessibilityLabel=\"Dismiss card\"\n ></s-button>\n </s-grid>\n</s-section>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Details", - "overviewPreviewDescription": "Edit and view objects with efficient dual-column layout.", - "description": "The details page allows merchants to view, create and edit objects. Use the right column to provide editable fields, and the right column for supporting information such as status, metadata, and summaries.\n \n | Used to | Examples |\n | --- | --- |\n | View, edit and create objects | Discounts, shipping labels, newsletters, templates. |\n\n ![Preview of the details page pattern](/assets/templated-apis-screenshots/admin/patterns/details-example.png)\n\n This pattern uses `Badge`, `Box`, `Button`, `Grid`, `Heading`, `Image`, `Link`, `MoneyField`, `NumberField`, `SearchField`, `Section`, `Select`, `Stack`, `Switch`, `Table`, `TextArea`, `TextField`, `UnorderedList`, and `URLField` components.\n\n ---\n\n ## Design guidelines\n Design details pages that enable users to create, view, and edit resource objects.\n\n ### Navigation\n\n * Users must be able to return to the previous page without using the browser button. To achieve this, your app can provide breadcrumbs or a Back button on the page.\n * Use tabs sparingly for secondary navigation purposes when the nav menu isn't sufficient.\n * Clicking a tab should only change the content below it, not above.\n * Tabs should never wrap onto multiple lines.\n * Navigating between tabs shouldn't cause the tabs to change position or move.\n * Offer users clear and predictable action labels.\n\n ---\n\n ### Layout\n\n * Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms.\n * Use looser spacing for low-density layouts. Use tighter spacing for high-density layouts.\n * Always use the default width. Full width tends to waste space and make the page harder to parse\n * In the primary column: Put information that defines the resource object\n * In the secondary column: Put supporting information such as status, metadata, and summaries\n * Arrange content in order of importance\n * Group similar content in the same card\n * Place unique page actions at the top of the actions list and typical object actions at the bottom\n\n ---\n\n ### Forms\n\n * For more than five inputs, use sections with titles in one card or use multiple cards with headers.\n * Form inputs should be saved using the App Bridge Contextual Save Bar API. This also applies to forms within max modals. Continuous data validation or auto-save for forms is consistent with the standard Shopify admin save UX.\n\n ---\n\n ", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Templates", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/details.png", - "defaultExample": { - "codeblock": { - "title": "Details", - "tabs": [ - { - "title": "jsx", - "code": "<form\n data-save-bar\n onSubmit={(event) => {\n event.preventDefault();\n const formData = new FormData(event.target);\n const formEntries = Object.fromEntries(formData);\n console.log(\"Form data\", formEntries);\n }}\n onReset={(event) => {\n console.log(\"Handle discarded changes if necessary\");\n }}\n>\n <s-page heading=\"Mountain view\">\n <s-link slot=\"breadcrumb-actions\" href=\"/app/puzzles\">\n Puzzles\n </s-link>\n <s-button slot=\"secondary-actions\">Duplicate</s-button>\n <s-button slot=\"secondary-actions\">Delete</s-button>\n {/* === */}\n {/* Puzzle information */}\n {/* === */}\n <s-section heading=\"Puzzle information\">\n <s-grid gap=\"base\">\n <s-text-field\n label=\"Puzzle name\"\n name=\"name\"\n labelAccessibilityVisibility=\"visible\"\n placeholder=\"Enter puzzle name\"\n value=\"Mountain view\"\n details=\"Players will see this name when browsing puzzles.\"\n />\n <s-text-area\n label=\"Description\"\n name=\"description\"\n labelAccessibilityVisibility=\"visible\"\n placeholder=\"Brief description of your puzzle\"\n value=\"A beautiful mountain landscape puzzle\"\n details=\"Help players understand what your puzzle features\"\n />\n <s-money-field\n label=\"Price\"\n name=\"price\"\n labelAccessibilityVisibility=\"visible\"\n placeholder=\"0.00\"\n value=\"9.99\"\n details=\"Set the price for this puzzle\"\n />\n <s-url-field\n label=\"Reference image URL\"\n name=\"reference-image-url\"\n labelAccessibilityVisibility=\"visible\"\n placeholder=\"https://example.com/image.jpg\"\n details=\"Optional link to original image\"\n />\n </s-grid>\n </s-section>\n\n {/* === */}\n {/* Puzzle templates */}\n {/* === */}\n <s-section heading=\"Puzzle templates\">\n <s-grid gap=\"base\">\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-grid-item>\n <s-search-field\n label=\"Search templates\"\n labelAccessibilityVisibility=\"exclusive\"\n placeholder=\"Search templates\"\n />\n </s-grid-item>\n <s-grid-item>\n <s-button>Browse</s-button>\n </s-grid-item>\n </s-grid>\n <s-box\n background=\"strong\"\n border=\"base\"\n borderRadius=\"base\"\n borderStyle=\"solid\"\n overflow=\"hidden\"\n >\n <s-table>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Template</s-table-header>\n <s-table-header>\n <s-stack alignItems=\"end\">Actions</s-stack>\n </s-table-header>\n <s-table-header listSlot=\"secondary\">\n <s-stack direction=\"inline\" alignItems=\"end\" />\n </s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>\n <s-stack\n direction=\"inline\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-box\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n maxInlineSize=\"40px\"\n maxBlockSize=\"40px\"\n >\n <s-image\n alt=\"16-pieces puzzle template\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png\"\n />\n </s-box>\n 16-pieces puzzle\n </s-stack>\n </s-table-cell>\n <s-table-cell>\n <s-stack alignItems=\"end\">\n <s-link>Preview</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>\n <s-stack alignItems=\"end\">\n <s-button\n icon=\"x\"\n tone=\"neutral\"\n variant=\"tertiary\"\n accessibilityLabel=\"Remove 16-Pieces Puzzle template\"\n />\n </s-stack>\n </s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>\n <s-stack\n direction=\"inline\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-box\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n maxInlineSize=\"40px\"\n maxBlockSize=\"40px\"\n >\n <s-image\n alt=\"9-pieces puzzle template\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png\"\n />\n </s-box>\n 9-pieces puzzle\n </s-stack>\n </s-table-cell>\n <s-table-cell>\n <s-stack\n direction=\"inline\"\n gap=\"base\"\n justifyContent=\"end\"\n >\n <s-link>Preview</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>\n <s-stack alignItems=\"end\">\n <s-button\n icon=\"x\"\n tone=\"neutral\"\n variant=\"tertiary\"\n accessibilityLabel=\"Remove 9-Pieces Puzzle template\"\n />\n </s-stack>\n </s-table-cell>\n </s-table-row>\n {/* Add more rows as needed here */}\n {/* If more than 10 rows are needed, details page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) */}\n </s-table-body>\n </s-table>\n </s-box>\n </s-grid>\n </s-section>\n\n {/* === */}\n {/* Settings */}\n {/* === */}\n <s-section heading=\"Settings\">\n <s-grid gap=\"base\">\n <s-select label=\"Puzzle size\" name=\"puzzle-size\">\n <s-option value=\"small\">Small (9\" x 9\")</s-option>\n <s-option value=\"medium\" selected>\n Medium (18\" x 24\")\n </s-option>\n <s-option value=\"large\">Large (24\" x 36\")</s-option>\n </s-select>\n <s-select label=\"Piece count\" name=\"piece-count\">\n <s-option value=\"250\">250 pieces (Easy)</s-option>\n <s-option value=\"500\" selected>\n 500 pieces (Medium)\n </s-option>\n <s-option value=\"1000\">1000 pieces (Hard)</s-option>\n <s-option value=\"2000\">2000 pieces (Expert)</s-option>\n </s-select>\n <s-select label=\"Material\" name=\"material\">\n <s-option value=\"standard\" selected>\n Standard cardboard\n </s-option>\n <s-option value=\"premium\">Premium cardboard</s-option>\n <s-option value=\"wooden\">Wooden pieces</s-option>\n </s-select>\n <s-number-field\n label=\"Quantity in stock\"\n name=\"quantity-in-stock\"\n labelAccessibilityVisibility=\"visible\"\n value=\"50\"\n min={0}\n placeholder=\"0\"\n details=\"Current inventory quantity\"\n />\n <s-switch\n label=\"Include reference image\"\n name=\"include-reference-image\"\n details=\"Ship a reference image with the puzzle\"\n />\n </s-grid>\n </s-section>\n {/* Use the aside slot for sidebar content */}\n <s-box slot=\"aside\">\n {/* === */}\n {/* Puzzle summary */}\n {/* === */}\n <s-section heading=\"Puzzle summary\">\n <s-heading>Mountain view</s-heading>\n <s-unordered-list>\n <s-list-item>16-piece puzzle with medium difficulty</s-list-item>\n <s-list-item>Pieces can be rotated</s-list-item>\n <s-list-item>No time limit</s-list-item>\n <s-list-item>\n <s-stack direction=\"inline\" gap=\"small\">\n <s-text>Current status:</s-text>\n <s-badge color=\"base\" tone=\"success\">\n Active\n </s-badge>\n </s-stack>\n </s-list-item>\n </s-unordered-list>\n </s-section>\n </s-box>\n </s-page>\n</form>\n", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <script src=\"https://cdn.shopify.com/shopifycloud/polaris.js\"></script>\n <title>Pattern</title>\n </head>\n <body>\n <!-- === -->\n <!-- Details page pattern -->\n <!-- === -->\n <form data-save-bar>\n <s-page heading=\"Mountain view\">\n <s-link slot=\"breadcrumb-actions\" href=\"/app/puzzles\">Puzzles</s-link>\n <s-button slot=\"secondary-actions\">Duplicate</s-button>\n <s-button slot=\"secondary-actions\">Delete</s-button>\n <!-- === -->\n <!-- Puzzle information -->\n <!-- === -->\n <s-section heading=\"Puzzle information\">\n <s-grid gap=\"base\">\n <s-text-field\n label=\"Puzzle name\"\n name=\"name\"\n labelAccessibilityVisibility=\"visible\"\n placeholder=\"Enter puzzle name\"\n value=\"Mountain view\"\n details=\"Players will see this name when browsing puzzles.\"\n ></s-text-field>\n <s-text-area\n label=\"Description\"\n name=\"description\"\n labelAccessibilityVisibility=\"visible\"\n placeholder=\"Brief description of your puzzle\"\n value=\"A beautiful mountain landscape puzzle\"\n details=\"Help players understand what your puzzle features\"\n ></s-text-area>\n <s-money-field\n label=\"Price\"\n name=\"price\"\n labelAccessibilityVisibility=\"visible\"\n placeholder=\"0.00\"\n value=\"9.99\"\n details=\"Set the price for this puzzle\"\n ></s-money-field>\n <s-url-field\n label=\"Reference image URL\"\n name=\"reference-image-url\"\n labelAccessibilityVisibility=\"visible\"\n placeholder=\"https://example.com/image.jpg\"\n details=\"Optional link to original image\"\n ></s-url-field>\n </s-grid>\n </s-section>\n <!-- === -->\n <!-- Puzzle templates -->\n <!-- === -->\n <s-section heading=\"Puzzle templates\">\n <s-grid gap=\"base\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\">\n <s-grid-item>\n <s-search-field\n label=\"Search templates\"\n labelAccessibilityVisibility=\"exclusive\"\n placeholder=\"Search templates\"\n ></s-search-field>\n </s-grid-item>\n <s-grid-item>\n <s-button>Browse</s-button>\n </s-grid-item>\n </s-grid>\n <s-box\n background=\"strong\"\n border=\"base\"\n borderRadius=\"base\"\n borderStyle=\"solid\"\n overflow=\"hidden\"\n >\n <s-table border=\"base\" borderRadius=\"base\" borderStyle=\"solid\">\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Template</s-table-header>\n <s-table-header>\n <s-stack alignItems=\"end\">Actions</s-stack>\n </s-table-header>\n <s-table-header listSlot=\"secondary\">\n <s-stack direction=\"inline\" alignItems=\"end\"></s-stack>\n </s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell listSlot=\"primary\">\n <s-stack direction=\"inline\" gap=\"base\" alignItems=\"center\">\n <s-box\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n maxInlineSize=\"40px\"\n maxBlockSize=\"40px\"\n >\n <s-image\n alt=\"16-pieces puzzle template\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png\"\n ></s-image>\n </s-box>\n 16-pieces puzzle\n </s-stack>\n </s-table-cell>\n <s-table-cell>\n <s-stack alignItems=\"end\">\n <s-link>Preview</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>\n <s-stack alignItems=\"end\">\n <s-button\n icon=\"x\"\n tone=\"neutral\"\n variant=\"tertiary\"\n accessibilityLabel=\"Remove 16-Pieces Puzzle template\"\n ></s-button>\n </s-stack>\n </s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell listSlot=\"primary\">\n <s-stack direction=\"inline\" gap=\"base\" alignItems=\"center\">\n <s-box\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n maxInlineSize=\"40px\"\n maxBlockSize=\"40px\"\n >\n <s-image\n alt=\"9-pieces puzzle template\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png\"\n ></s-image>\n </s-box>\n 9-pieces puzzle\n </s-stack>\n </s-table-cell>\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"base\" justifyContent=\"end\">\n <s-link>Preview</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell listSlot=\"secondary\">\n <s-stack alignItems=\"end\">\n <s-button\n icon=\"x\"\n tone=\"neutral\"\n variant=\"tertiary\"\n accessibilityLabel=\"Remove 9-Pieces Puzzle template\"\n ></s-button>\n </s-stack>\n </s-table-cell>\n </s-table-row>\n <!-- Add more rows as needed here -->\n <!-- If more than 10 rows are needed, details page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) -->\n </s-table-body>\n </s-table>\n </s-box>\n </s-grid>\n </s-section>\n <!-- === -->\n <!-- Settings -->\n <!-- === -->\n <s-section heading=\"Settings\">\n <s-grid gap=\"base\">\n <s-select label=\"Puzzle size\" name=\"puzzle-size\">\n <s-option value=\"small\">Small (9\" x 9\")</s-option>\n <s-option value=\"medium\" selected> Medium (18\" x 24\") </s-option>\n <s-option value=\"large\">Large (24\" x 36\")</s-option>\n </s-select>\n <s-select label=\"Piece count\" name=\"piece-count\">\n <s-option value=\"250\">250 pieces (Easy)</s-option>\n <s-option value=\"500\" selected> 500 pieces (Medium) </s-option>\n <s-option value=\"1000\">1000 pieces (Hard)</s-option>\n <s-option value=\"2000\">2000 pieces (Expert)</s-option>\n </s-select>\n <s-select label=\"Material\" name=\"material\">\n <s-option value=\"standard\" selected> Standard cardboard </s-option>\n <s-option value=\"premium\">Premium cardboard</s-option>\n <s-option value=\"wooden\">Wooden pieces</s-option>\n </s-select>\n <s-number-field\n label=\"Quantity in stock\"\n name=\"quantity-in-stock\"\n labelAccessibilityVisibility=\"visible\"\n value=\"50\"\n min=\"0\"\n placeholder=\"0\"\n details=\"Current inventory quantity\"\n ></s-number-field>\n <s-switch\n label=\"Include reference image\"\n name=\"include-reference-image\"\n details=\"Ship a reference image with the puzzle\"\n ></s-switch>\n </s-grid>\n </s-section>\n <!-- Use the aside slot for sidebar content -->\n <s-box slot=\"aside\">\n <!-- === -->\n <!-- Puzzle summary -->\n <!-- === -->\n <s-section heading=\"Puzzle summary\">\n <s-heading>Mountain view</s-heading>\n <s-unordered-list>\n <s-list-item>16-piece puzzle with medium difficulty</s-list-item>\n <s-list-item>Pieces can be rotated</s-list-item>\n <s-list-item>No time limit</s-list-item>\n <s-list-item>\n <s-stack direction=\"inline\" gap=\"small\">\n <s-text>Current status:</s-text>\n <s-badge color=\"base\" tone=\"success\">\n Active\n </s-badge>\n </s-stack>\n </s-list-item>\n </s-unordered-list>\n </s-section>\n </s-box>\n </s-page>\n </form>\n </body>\n</html>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Empty state", - "isOneColumnLayout": false, - "overviewPreviewDescription": "Provide guidance and encourage action when no data or items are available.", - "description": "Empty states are used when a list, table, or chart has no items or data to show. This is an opportunity to provide explanation or guidance to help merchants progress. The empty state component is intended for use when a full page in the admin is empty, and not for individual elements or areas in the interface.\n\n | Used to | Examples |\n | --- | --- |\n | Offer a clear next step when no data is present | Prompt merchants to create their first campaign |\n | Encourage activation of features | Suggest setting up a subscription plan when none exist |\n ---\n", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/emptyState.png", - "defaultExample": { - "codeblock": { - "title": "Empty state", - "tabs": [ - { - "title": "jsx", - "code": "<s-section accessibilityLabel=\"Empty state section\">\n <s-grid gap=\"base\" justifyItems=\"center\" paddingBlock=\"large-400\">\n <s-box maxInlineSize=\"200px\" maxBlockSize=\"200px\">\n {/* aspectRatio should match the actual image dimensions (width/height) */}\n <s-image\n aspectRatio=\"1/0.5\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/callout.png\"\n alt=\"A stylized graphic of four characters, each holding a puzzle piece\"\n />\n </s-box>\n <s-grid justifyItems=\"center\" maxInlineSize=\"450px\" gap=\"base\">\n <s-stack alignItems=\"center\">\n <s-heading>Start creating puzzles</s-heading>\n <s-paragraph>\n Create and manage your collection of puzzles for players to enjoy.\n </s-paragraph>\n </s-stack>\n <s-button-group>\n <s-button\n slot=\"secondary-actions\"\n aria-label=\"Learn more about creating puzzles\"\n >\n {\" \"}\n Learn more{\" \"}\n </s-button>\n <s-button slot=\"primary-action\" aria-label=\"Add a new puzzle\">\n {\" \"}\n Create puzzle{\" \"}\n </s-button>\n </s-button-group>\n </s-grid>\n </s-grid>\n</s-section>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-section accessibilityLabel=\"Empty state section\">\n <s-grid gap=\"base\" justifyItems=\"center\" paddingBlock=\"large-400\">\n <s-box maxInlineSize=\"200px\" maxBlockSize=\"200px\">\n <!-- aspectRatio should match the actual image dimensions (width/height) -->\n <s-image\n aspectRatio=\"1/0.5\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/callout.png\"\n alt=\"A stylized graphic of four characters, each holding a puzzle piece\"\n />\n </s-box>\n <s-grid\n justifyItems=\"center\"\n maxInlineSize=\"450px\"\n gap=\"base\"\n >\n <s-stack alignItems=\"center\">\n <s-heading>Start creating puzzles</s-heading>\n <s-paragraph>\n Create and manage your collection of puzzles for players to enjoy.\n </s-paragraph>\n </s-stack>\n <s-button-group>\n <s-button slot=\"secondary-actions\" aria-label=\"Learn more about creating puzzles\"> Learn more </s-button>\n <s-button slot=\"primary-action\" aria-label=\"Add a new puzzle\"> Create puzzle </s-button>\n </s-button-group>\n </s-grid>\n </s-grid>\n</s-section>", - "language": "html", - "editable": false - }, - { - "code": "
\n \n \n \n \n \n \n \n Start creating puzzles\n \n Create and manage your collection of puzzles for players to enjoy.\n \n \n \n Learn more \n Create puzzle \n \n \n \n
", - "language": "preview" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Footer help", - "isOneColumnLayout": false, - "overviewPreviewDescription": "Footer help is used to refer merchants to more information related to the product or feature they’re using.", - "description": "Footer help is used to refer merchants to more information related to the product or feature they’re using.\n\n | Used to | Examples |\n | --- | --- |\n | Refer merchants to related help docs | Learn more about [shipping zones]|\n | Offer support as a secondary option | [Contact us] about email marketing |\n\n ---\n \n\n \n", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/footerHelp.png", - "defaultExample": { - "codeblock": { - "title": "Footer help", - "tabs": [ - { - "title": "jsx", - "code": "<s-stack alignItems=\"center\">\n <s-text>Learn more about <s-link href=\"\">creating puzzles</s-link>.</s-text>\n</s-stack>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-stack alignItems=\"center\">\n <s-text>Learn more about <s-link href=\"\">creating puzzles</s-link>.</s-text>\n</s-stack>", - "language": "html", - "editable": false - }, - { - "code": "
\n Learn more about creating puzzles.\n
", - "language": "preview" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Homepage", - "overviewPreviewDescription": "Design your app homepage for daily merchant value.", - "description": "The app URL specified in the Partner Dashboard should point to your app homepage. The home page of your app is the first thing merchants will see, and it should provide daily value to them. Design the page to provide status updates and show merchants what actions they can take.\n \n | Used to | Examples |\n | --- | --- |\n | Teach merchants how to use the app | Onboarding, how-to guides |\n | Display app functionalities | Call-to-actions to app features, resource tables |\n | Show updates | Status banners, company news |\n\n ![Preview of the homepage pattern](/assets/templated-apis-screenshots/admin/patterns/homepage-example.png)\n\n This pattern uses `Badge`, `Banner`, `Box`, `Button`, `Checkbox`, `Clickable`, `Divider`, `Grid`, `Heading`, `Image`, `Link`, `Paragraph`, `Section`, `Stack`, and `Text` components.\n\n ---\n\n ## Design guidelines\n Your app home page should be designed to provide users with relevant, timely information like quick statistics, status updates, or information that’s immediately actionable.\n\n ### Onboarding\n\n The onboarding experience quickly introduces users to your app's essential features. A good onboarding should be self-guided, easy to follow and make users feel they understand how the app works after finishing it. If the onboarding is long or complex, give users the option to complete it at a later time to avoid stopping their workflow.\n\n * Onboarding must be brief and direct. Provide clear instructions and guide users to completion\n * Only request information from users if it's necessary\n * If your onboarding isn't essential, then make it dismissible\n * Don't have more than five steps in your onboarding process. This can lead users to drop off and not use your app\n\n ---\n\n ### Visual design\n\n * Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms.\n * Use looser spacing for low-density layouts. Use tighter spacing for high-density layouts.\n * Use high-resolution photos and images to ensure a professional, high-quality experience.\n\n ---\n\n ", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Templates", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/homepage.png", - "defaultExample": { - "codeblock": { - "title": "Homepage", - "tabs": [ - { - "title": "jsx", - "code": "const [visible, setVisible] = useState({\n banner: true,\n setupGuide: true,\n calloutCard: true,\n featuredApps: true,\n});\nconst [expanded, setExpanded] = useState({\n setupGuide: true,\n step1: false,\n step2: false,\n step3: false,\n});\nconst [progress, setProgress] = useState(0);\n\nreturn (\n <s-page>\n <s-button slot=\"primary-action\">Create puzzle</s-button>\n <s-button slot=\"secondary-actions\">Browse templates</s-button>\n <s-button slot=\"secondary-actions\">Import image</s-button>\n\n {/* === */}\n {/* Banner */}\n {/* Use banners sparingly. Only one banner should be visible at a time. */}\n {/* If dismissed, use local storage or a database entry to avoid showing this section again to the same user. */}\n {/* === */}\n {visible.banner && (\n <s-banner\n dismissible\n onDismiss={() => setVisible({ ...visible, banner: false })}\n >\n 3 of 5 puzzles created.{\" \"}\n <s-link href=\"#\">Upgrade to Puzzlify Pro</s-link> to create unlimited\n puzzles.\n </s-banner>\n )}\n\n {/* === */}\n {/* Setup Guide */}\n {/* Keep instructions brief and direct. Only ask merchants for required information. */}\n {/* If dismissed, use local storage or a database entry to avoid showing this section again to the same user. */}\n {/* === */}\n {visible.setupGuide && (\n <s-section>\n <s-grid gap=\"small\">\n {/* Header */}\n <s-grid gap=\"small-200\">\n <s-grid\n gridTemplateColumns=\"1fr auto auto\"\n gap=\"small-300\"\n alignItems=\"center\"\n >\n <s-heading>Setup Guide</s-heading>\n <s-button\n accessibilityLabel=\"Dismiss Guide\"\n onClick={() => setVisible({ ...visible, setupGuide: false })}\n variant=\"tertiary\"\n tone=\"neutral\"\n icon=\"x\"\n ></s-button>\n <s-button\n accessibilityLabel=\"Toggle setup guide\"\n onClick={(e) =>\n setExpanded({\n ...expanded,\n setupGuide: !expanded.setupGuide,\n })\n }\n variant=\"tertiary\"\n tone=\"neutral\"\n icon={expanded.setupGuide ? \"chevron-up\" : \"chevron-down\"}\n ></s-button>\n </s-grid>\n <s-paragraph>\n Use this personalized guide to get your store ready for sales.\n </s-paragraph>\n <s-paragraph color=\"subdued\">\n {progress} out of 3 steps completed\n </s-paragraph>\n </s-grid>\n {/* Steps Container */}\n <s-box\n borderRadius=\"base\"\n border=\"base\"\n background=\"base\"\n display={expanded.setupGuide ? \"auto\" : \"none\"}\n >\n {/* Step 1 */}\n <s-box>\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n gap=\"base\"\n padding=\"small\"\n >\n <s-checkbox\n label=\"Upload an image for your puzzle\"\n onInput={(e) =>\n setProgress(e.currentTarget.checked ? progress + 1 : progress - 1)\n }\n ></s-checkbox>\n <s-button\n onClick={(e) => {\n setExpanded({ ...expanded, step1: !expanded.step1 });\n }}\n accessibilityLabel=\"Toggle step 1 details\"\n variant=\"tertiary\"\n icon={expanded.step1 ? \"chevron-up\" : \"chevron-down\"}\n ></s-button>\n </s-grid>\n <s-box\n padding=\"small\"\n paddingBlockStart=\"none\"\n display={expanded.step1 ? \"auto\" : \"none\"}\n >\n <s-box\n padding=\"base\"\n background=\"subdued\"\n borderRadius=\"base\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-grid gap=\"small-200\">\n <s-paragraph>\n Start by uploading a high-quality image that will be\n used to create your puzzle. For best results, use\n images that are at least 1200x1200 pixels.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button variant=\"primary\">Upload image</s-button>\n <s-button variant=\"tertiary\" tone=\"neutral\">\n Image requirements\n </s-button>\n </s-stack>\n </s-grid>\n <s-box maxBlockSize=\"80px\" maxInlineSize=\"80px\">\n <s-image\n src=\"https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg\"\n alt=\"Customize checkout illustration\"\n />\n </s-box>\n </s-grid>\n </s-box>\n </s-box>\n </s-box>\n {/* Step 2 */}\n <s-divider />\n <s-box>\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n gap=\"base\"\n padding=\"small\"\n >\n <s-checkbox\n label=\"Choose a puzzle template\"\n onInput={(e) =>\n setProgress(e.currentTarget.checked ? progress + 1 : progress - 1)\n }\n ></s-checkbox>\n <s-button\n onClick={(e) =>\n setExpanded({ ...expanded, step2: !expanded.step2 })\n }\n accessibilityLabel=\"Toggle step 2 details\"\n variant=\"tertiary\"\n icon={expanded.step2 ? \"chevron-up\" : \"chevron-down\"}\n ></s-button>\n </s-grid>\n <s-box\n padding=\"small\"\n paddingBlockStart=\"none\"\n display={expanded.step2 ? \"auto\" : \"none\"}\n >\n <s-box\n padding=\"base\"\n background=\"subdued\"\n borderRadius=\"base\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-grid gap=\"small-200\">\n <s-paragraph>\n Select a template for your puzzle - choose between\n 9-piece (beginner), 16-piece (intermediate), or\n 25-piece (advanced) layouts.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button variant=\"primary\">Choose template</s-button>\n <s-button variant=\"tertiary\" tone=\"neutral\">\n See all templates\n </s-button>\n </s-stack>\n </s-grid>\n <s-box maxBlockSize=\"80px\" maxInlineSize=\"80px\">\n <s-image\n src=\"https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg\"\n alt=\"Customize checkout illustration\"\n />\n </s-box>\n </s-grid>\n </s-box>\n </s-box>\n </s-box>\n {/* Step 3 */}\n <s-divider />\n <s-box>\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n gap=\"base\"\n padding=\"small\"\n >\n <s-checkbox\n label=\"Customize puzzle piece shapes\"\n onInput={(e) =>\n setProgress(e.currentTarget.checked ? progress + 1 : progress - 1)\n }\n ></s-checkbox>\n <s-button\n onClick={(e) =>\n setExpanded({ ...expanded, step3: !expanded.step3 })\n }\n accessibilityLabel=\"Toggle step 3 details\"\n variant=\"tertiary\"\n icon={expanded.step3 ? \"chevron-up\" : \"chevron-down\"}\n ></s-button>\n </s-grid>\n <s-box\n padding=\"small\"\n paddingBlockStart=\"none\"\n display={expanded.step3 ? \"auto\" : \"none\"}\n >\n <s-box\n padding=\"base\"\n background=\"subdued\"\n borderRadius=\"base\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-grid gap=\"small-200\">\n <s-paragraph>\n Make your puzzle unique by customizing the shapes of\n individual pieces. Choose from classic, curved, or\n themed piece styles.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button variant=\"primary\">\n Customize pieces\n </s-button>\n <s-button variant=\"tertiary\" tone=\"neutral\">\n Learn about piece styles\n </s-button>\n </s-stack>\n </s-grid>\n <s-box maxBlockSize=\"80px\" maxInlineSize=\"80px\">\n <s-image\n src=\"https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg\"\n alt=\"Customize checkout illustration\"\n />\n </s-box>\n </s-grid>\n </s-box>\n </s-box>\n </s-box>\n {/* Add additional steps here... */}\n </s-box>\n </s-grid>\n </s-section>\n )}\n\n {/* === */}\n {/* Metrics cards */}\n {/* Your app homepage should provide merchants with quick statistics or status updates that help them understand how the app is performing for them. */}\n {/* === */}\n <s-section padding=\"base\">\n <s-grid\n gridTemplateColumns=\"@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr\"\n gap=\"small\"\n >\n <s-clickable\n href=\"#\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Total Designs</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>156</s-text>\n <s-badge tone=\"success\" icon=\"arrow-up\">\n 12%\n </s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n <s-divider direction=\"block\" />\n <s-clickable\n href=\"#\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Units Sold</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>2,847</s-text>\n <s-badge tone=\"warning\">0%</s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n <s-divider direction=\"block\" />\n <s-clickable\n href=\"#\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Return Rate</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>3.2%</s-text>\n <s-badge tone=\"critical\" icon=\"arrow-down\">\n 0.8%\n </s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n </s-grid>\n </s-section>\n\n {/* === */}\n {/* Callout Card */}\n {/* If dismissed, use local storage or a database entry to avoid showing this section again to the same user. */}\n {/* === */}\n {visible.calloutCard && (\n <s-section>\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n gap=\"small-400\"\n alignItems=\"start\"\n >\n <s-grid\n gridTemplateColumns=\"@container (inline-size <= 480px) 1fr, auto auto\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-grid gap=\"small-200\">\n <s-heading>Ready to create your custom puzzle?</s-heading>\n <s-paragraph>\n Start by uploading an image to your gallery or choose from one\n of our templates.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button> Upload image </s-button>\n <s-button tone=\"neutral\" variant=\"tertiary\">\n {\" \"}\n Browse templates{\" \"}\n </s-button>\n </s-stack>\n </s-grid>\n <s-stack alignItems=\"center\">\n <s-box\n maxInlineSize=\"200px\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n >\n <s-image\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/callout.png\"\n alt=\"Customize checkout illustration\"\n aspectRatio=\"1/0.5\"\n />\n </s-box>\n </s-stack>\n </s-grid>\n <s-button\n onClick={() => setVisible({ ...visible, calloutCard: false })}\n icon=\"x\"\n tone=\"neutral\"\n variant=\"tertiary\"\n accessibilityLabel=\"Dismiss card\"\n ></s-button>\n </s-grid>\n </s-section>\n )}\n\n {/* === */}\n {/* Puzzle templates */}\n {/* === */}\n <s-section>\n <s-heading>Puzzle Templates</s-heading>\n <s-grid\n gridTemplateColumns=\"repeat(auto-fit, minmax(155px, 1fr))\"\n gap=\"base\"\n >\n {/* Featured template 1 */}\n <s-box border=\"base\" borderRadius=\"base\" overflow=\"hidden\">\n <s-clickable\n href=\"/puzzles/4-piece\"\n accessibilityLabel=\"4-pieces puzzle template\"\n >\n <s-image\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n alt=\"4-pieces puzzle template\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png\"\n />\n </s-clickable>\n <s-divider />\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n background=\"base\"\n padding=\"small\"\n gap=\"small\"\n alignItems=\"center\"\n >\n <s-heading>4-Pieces</s-heading>\n <s-button\n href=\"/puzzles/4-piece\"\n accessibilityLabel=\"View 4-pieces puzzle template\"\n >\n View\n </s-button>\n </s-grid>\n </s-box>\n {/* Featured template 2 */}\n <s-box\n border=\"base\"\n borderRadius=\"base\"\n background=\"transparent\"\n overflow=\"hidden\"\n >\n <s-clickable\n href=\"/puzzles/9-piece\"\n accessibilityLabel=\"9-pieces puzzle template\"\n >\n <s-image\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n alt=\"9-pieces puzzle template\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png\"\n />\n </s-clickable>\n <s-divider />\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n background=\"base\"\n padding=\"small\"\n gap=\"small\"\n alignItems=\"center\"\n >\n <s-heading>9-Pieces</s-heading>\n <s-button\n href=\"/puzzles/9-piece\"\n accessibilityLabel=\"View 9-pieces puzzle template\"\n >\n View\n </s-button>\n </s-grid>\n </s-box>\n {/* Featured template 3 */}\n <s-box\n border=\"base\"\n borderRadius=\"base\"\n background=\"transparent\"\n overflow=\"hidden\"\n >\n <s-clickable\n href=\"/puzzles/16-piece\"\n accessibilityLabel=\"16-pieces puzzle template\"\n >\n <s-image\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n alt=\"16-pieces puzzle template\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png\"\n />\n </s-clickable>\n <s-divider />\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n background=\"base\"\n padding=\"small\"\n gap=\"small\"\n alignItems=\"center\"\n >\n <s-heading>16-Pieces</s-heading>\n <s-button\n href=\"/puzzles/16-piece\"\n accessibilityLabel=\"View 16-pieces puzzle template\"\n >\n View\n </s-button>\n </s-grid>\n </s-box>\n </s-grid>\n <s-stack\n direction=\"inline\"\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingBlockStart=\"base\"\n >\n <s-link href=\"/puzzles\">See all puzzle templates</s-link>\n </s-stack>\n </s-section>\n\n {/* === */}\n {/* News */}\n {/* === */}\n <s-section>\n <s-heading>News</s-heading>\n <s-grid\n gridTemplateColumns=\"repeat(auto-fit, minmax(240px, 1fr))\"\n gap=\"base\"\n >\n {/* News item 1 */}\n <s-grid\n background=\"base\"\n border=\"base\"\n borderRadius=\"base\"\n padding=\"base\"\n gap=\"small-400\"\n >\n <s-text>Jan 21, 2025</s-text>\n <s-link href=\"/news/new-shapes-and-themes\">\n <s-heading>New puzzle shapes and themes added</s-heading>\n </s-link>\n <s-paragraph>\n We've added 5 new puzzle piece shapes and 3 seasonal themes to\n help you create more engaging and unique puzzles for your\n customers.\n </s-paragraph>\n </s-grid>\n {/* News item 2 */}\n <s-grid\n background=\"base\"\n border=\"base\"\n borderRadius=\"base\"\n padding=\"base\"\n gap=\"small-400\"\n >\n <s-text>Nov 6, 2024</s-text>\n <s-link href=\"/news/puzzle-difficulty-customization\">\n <s-heading>Puzzle difficulty customization features</s-heading>\n </s-link>\n <s-paragraph>\n Now you can fine-tune the difficulty of your puzzles with new\n rotation controls, edge highlighting options, and piece\n recognition settings.\n </s-paragraph>\n </s-grid>\n </s-grid>\n <s-stack\n direction=\"inline\"\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingBlockStart=\"base\"\n >\n <s-link href=\"/news\">See all news items</s-link>\n </s-stack>\n </s-section>\n\n {/* === */}\n {/* Featured apps */}\n {/* If dismissed, use local storage or a database entry to avoid showing this section again to the same user. */}\n {/* === */}\n {visible.featuredApps && (\n <s-section>\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n paddingBlockEnd=\"small-400\"\n >\n <s-heading>Featured apps</s-heading>\n <s-button\n onClick={() => setVisible({ ...visible, featuredApps: false })}\n icon=\"x\"\n tone=\"neutral\"\n variant=\"tertiary\"\n accessibilityLabel=\"Dismiss featured apps section\"\n ></s-button>\n </s-grid>\n <s-grid\n gridTemplateColumns=\"repeat(auto-fit, minmax(240px, 1fr))\"\n gap=\"base\"\n >\n {/* Featured app 1 */}\n <s-clickable\n href=\"https://apps.shopify.com/flow\"\n border=\"base\"\n borderRadius=\"base\"\n padding=\"base\"\n inlineSize=\"100%\"\n accessibilityLabel=\"Download Shopify Flow\"\n >\n <s-grid\n gridTemplateColumns=\"auto 1fr auto\"\n alignItems=\"stretch\"\n gap=\"base\"\n >\n <s-thumbnail\n size=\"small\"\n src=\"https://cdn.shopify.com/app-store/listing_images/15100ebca4d221b650a7671125cd1444/icon/CO25r7-jh4ADEAE=.png\"\n alt=\"Shopify Flow icon\"\n />\n <s-box>\n <s-heading>Shopify Flow</s-heading>\n <s-paragraph>Free</s-paragraph>\n <s-paragraph>\n Automate everything and get back to business.\n </s-paragraph>\n </s-box>\n <s-stack justifyContent=\"start\">\n <s-button\n href=\"https://apps.shopify.com/flow\"\n icon=\"download\"\n accessibilityLabel=\"Download Shopify Flow\"\n />\n </s-stack>\n </s-grid>\n </s-clickable>\n {/* Featured app 2 */}\n <s-clickable\n href=\"https://apps.shopify.com/planet\"\n border=\"base\"\n borderRadius=\"base\"\n padding=\"base\"\n inlineSize=\"100%\"\n accessibilityLabel=\"Download Shopify Planet\"\n >\n <s-grid\n gridTemplateColumns=\"auto 1fr auto\"\n alignItems=\"stretch\"\n gap=\"base\"\n >\n <s-thumbnail\n size=\"small\"\n src=\"https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png\"\n alt=\"Shopify Planet icon\"\n />\n <s-box>\n <s-heading>Shopify Planet</s-heading>\n <s-paragraph>Free</s-paragraph>\n <s-paragraph>\n Offer carbon-neutral shipping and showcase your commitment.\n </s-paragraph>\n </s-box>\n <s-stack justifyContent=\"start\">\n <s-button\n href=\"https://apps.shopify.com/planet\"\n icon=\"download\"\n accessibilityLabel=\"Download Shopify Planet\"\n />\n </s-stack>\n </s-grid>\n </s-clickable>\n </s-grid>\n </s-section>\n )}\n</s-page>\n)\n", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <script src=\"https://cdn.shopify.com/shopifycloud/polaris.js\"></script>\n <title>Pattern</title>\n <script>\n // Simple global object to store handlers\n window.puzzleApp = {\n progress: 0,\n\n // Banner handlers\n dismissBanner: function(bannerElement) {\n if (bannerElement) {\n bannerElement.style.display = 'none';\n }\n },\n\n // Guide handlers\n dismissGuide: function(guideSection) {\n if (guideSection) {\n guideSection.style.display = 'none';\n }\n },\n\n toggleGuide: function(button, container) {\n if (button && container) {\n const isExpanded = container.style.display !== 'none';\n container.style.display = isExpanded ? 'none' : 'block';\n button.setAttribute('icon', isExpanded ? 'chevron-down' : 'chevron-up');\n }\n },\n\n // Step handlers\n toggleStep: function(button, detailsContainer) {\n if (button && detailsContainer) {\n const isExpanded = detailsContainer.style.display !== 'none';\n detailsContainer.style.display = isExpanded ? 'none' : 'block';\n button.setAttribute('icon', isExpanded ? 'chevron-down' : 'chevron-up');\n }\n },\n\n // Checkbox handlers\n updateProgress: function(checkbox, progressElement) {\n if (checkbox && progressElement) {\n this.progress += checkbox.checked ? 1 : -1;\n progressElement.textContent = `${this.progress} out of 3 steps completed`;\n }\n },\n\n // Section dismissal handlers\n dismissSection: function(section) {\n if (section) {\n section.style.display = 'none';\n }\n }\n };\n </script>\n </head>\n <body>\n <!-- === -->\n <!-- Home page pattern -->\n <!-- === -->\n <s-page>\n <s-button slot=\"primary-action\">Create puzzle</s-button>\n <s-button slot=\"secondary-actions\">Browse templates</s-button>\n <s-button slot=\"secondary-actions\">Import image</s-button>\n <!-- === -->\n <!-- Banner -->\n <!-- Use banners sparingly. Only one banner should be visible at a time. -->\n <!-- If dismissed, use local storage or a database entry to avoid showing this section again to the same user. -->\n <!-- === -->\n <s-banner\n id=\"upgrade-banner\"\n dismissible\n onDismiss=\"window.puzzleApp.dismissBanner(this)\"\n >\n 3 of 5 puzzles created.\n <s-link href=\"#\">Upgrade to Puzzlify Pro</s-link> to create unlimited puzzles.\n </s-banner>\n <!-- === -->\n <!-- Setup Guide -->\n <!-- Keep instructions brief and direct. Only ask merchants for required information. -->\n <!-- If dismissed, use local storage or a database entry to avoid showing this section again to the same user. -->\n <!-- === -->\n <s-section id=\"setup-guide-section\">\n <s-grid gap=\"base\">\n <!-- Header -->\n <s-grid gap=\"small-200\">\n <s-grid gridTemplateColumns=\"1fr auto auto\" gap=\"small-300\" alignItems=\"center\">\n <s-heading>Setup Guide</s-heading>\n <s-button\n accessibilityLabel=\"Dismiss Guide\"\n onClick=\"window.puzzleApp.dismissGuide(document.getElementById('setup-guide-section'))\"\n variant=\"tertiary\"\n tone=\"neutral\"\n icon=\"x\"\n ></s-button>\n <s-button\n id=\"toggle-guide-button\"\n accessibilityLabel=\"Toggle setup guide\"\n onClick=\"window.puzzleApp.toggleGuide(this, document.getElementById('steps-container'))\"\n variant=\"tertiary\"\n tone=\"neutral\"\n icon=\"chevron-up\"\n ></s-button>\n </s-grid>\n <s-paragraph>\n Use this personalized guide to get your store ready for sales.\n </s-paragraph>\n <s-paragraph id=\"progress-text\" color=\"subdued\">0 out of 3 steps completed</s-paragraph>\n </s-grid>\n <!-- Steps Container -->\n <s-box id=\"steps-container\" borderRadius=\"base\" border=\"base\" background=\"base\">\n <!-- Step 1 -->\n <s-box>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" padding=\"small\">\n <s-checkbox\n label=\"Upload an image for your puzzle\"\n onInput=\"window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))\"\n ></s-checkbox>\n <s-button\n id=\"toggle-step1-button\"\n onClick=\"window.puzzleApp.toggleStep(this, document.getElementById('step1-details'))\"\n accessibilityLabel=\"Toggle step 1 details\"\n variant=\"tertiary\"\n icon=\"chevron-down\"\n ></s-button>\n </s-grid>\n <s-box id=\"step1-details\" padding=\"small\" paddingBlockStart=\"none\" style=\"display: none;\">\n <s-box padding=\"base\" background=\"subdued\" borderRadius=\"base\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\">\n <s-grid gap=\"small-200\">\n <s-paragraph>\n Start by uploading a high-quality image that will be used to create your\n puzzle. For best results, use images that are at least 1200x1200 pixels.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button variant=\"primary\">\n Upload image\n </s-button>\n <s-button variant=\"tertiary\" tone=\"neutral\"> Image requirements </s-button>\n </s-stack>\n </s-grid>\n <s-box maxBlockSize=\"80px\" maxInlineSize=\"80px\">\n <s-image\n src=\"https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg\"\n alt=\"Customize checkout illustration\"\n ></s-image>\n </s-box>\n </s-grid>\n </s-box>\n </s-box>\n </s-box>\n <!-- Step 2 -->\n <s-divider></s-divider>\n <s-box>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" padding=\"small\">\n <s-checkbox\n label=\"Choose a puzzle template\"\n onInput=\"window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))\"\n ></s-checkbox>\n <s-button\n id=\"toggle-step2-button\"\n onClick=\"window.puzzleApp.toggleStep(this, document.getElementById('step2-details'))\"\n accessibilityLabel=\"Toggle step 2 details\"\n variant=\"tertiary\"\n icon=\"chevron-down\"\n ></s-button>\n </s-grid>\n <s-box id=\"step2-details\" padding=\"small\" paddingBlockStart=\"none\" style=\"display: none;\">\n <s-box padding=\"base\" background=\"subdued\" borderRadius=\"base\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\">\n <s-grid gap=\"small-200\">\n <s-paragraph>\n Select a template for your puzzle - choose between 9-piece (beginner),\n 16-piece (intermediate), or 25-piece (advanced) layouts.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button variant=\"primary\">Choose template</s-button>\n <s-button variant=\"tertiary\" tone=\"neutral\"> See all templates </s-button>\n </s-stack>\n </s-grid>\n <s-box maxBlockSize=\"80px\" maxInlineSize=\"80px\">\n <s-image\n src=\"https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg\"\n alt=\"Customize checkout illustration\"\n ></s-image>\n </s-box>\n </s-grid>\n </s-box>\n </s-box>\n </s-box>\n <!-- Step 3 -->\n <s-divider></s-divider>\n <s-box>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" padding=\"small\">\n <s-checkbox\n label=\"Customize puzzle piece shapes\"\n onInput=\"window.puzzleApp.updateProgress(this, document.getElementById('progress-text'))\"\n ></s-checkbox>\n <s-button\n id=\"toggle-step3-button\"\n onClick=\"window.puzzleApp.toggleStep(this, document.getElementById('step3-details'))\"\n accessibilityLabel=\"Toggle step 3 details\"\n variant=\"tertiary\"\n icon=\"chevron-down\"\n ></s-button>\n </s-grid>\n </s-box>\n <s-box id=\"step3-details\" padding=\"small\" paddingBlockStart=\"none\" style=\"display: none;\">\n <s-box padding=\"base\" background=\"subdued\" borderRadius=\"base\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\">\n <s-grid gap=\"small-200\">\n <s-paragraph>\n Make your puzzle unique by customizing the shapes of individual pieces.\n Choose from classic, curved, or themed piece styles.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button variant=\"primary\"> Customize pieces </s-button>\n <s-button variant=\"tertiary\" tone=\"neutral\">\n Learn about piece styles\n </s-button>\n </s-stack>\n </s-grid>\n <s-box maxBlockSize=\"80px\" maxInlineSize=\"80px\">\n <s-image\n src=\"https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg\"\n alt=\"Customize checkout illustration\"\n ></s-image>\n </s-box>\n </s-grid>\n </s-box>\n </s-box>\n <!-- Add additional steps here... -->\n </s-box>\n </s-grid>\n </s-section>\n <!-- === -->\n <!-- Metrics cards -->\n <!-- Your app homepage should provide merchants with quick statistics or status updates that help them understand how the app is performing for them. -->\n <!-- === -->\n <s-section padding=\"small\">\n <s-grid\n gridTemplateColumns=\"@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr\"\n gap=\"small\"\n >\n <s-clickable\n href=\"#\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Total Designs</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>156</s-text>\n <s-badge tone=\"success\" icon=\"arrow-up\"> 12% </s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n <s-divider direction=\"block\"></s-divider>\n <s-clickable\n href=\"#\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Units Sold</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>2,847</s-text>\n <s-badge tone=\"warning\">0%</s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n <s-divider direction=\"block\"></s-divider>\n <s-clickable\n href=\"#\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Return Rate</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>3.2%</s-text>\n <s-badge tone=\"critical\" icon=\"arrow-down\"> 0.8% </s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n </s-grid>\n </s-section>\n <!-- === -->\n <!-- Callout Card -->\n <!-- If dismissed, use local storage or a database entry to avoid showing this section again to the same user. -->\n <!-- === -->\n <s-section id=\"callout-section\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"small-400\" alignItems=\"start\">\n <s-grid\n gridTemplateColumns=\"@container (inline-size <= 480px) 1fr, auto auto\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-grid gap=\"small-200\">\n <s-heading>Ready to create your custom puzzle?</s-heading>\n <s-paragraph>\n Start by uploading an image to your gallery or choose from one of our templates.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button> Upload image </s-button>\n <s-button tone=\"neutral\" variant=\"tertiary\"> Browse templates </s-button>\n </s-stack>\n </s-grid>\n <s-box maxInlineSize=\"200px\" borderRadius=\"base\" overflow=\"hidden\">\n <s-image\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/callout.png\"\n alt=\"Customize checkout illustration\"\n aspectRatio=\"1/0.5\"\n ></s-image>\n </s-box>\n </s-grid>\n <s-button\n onClick=\"window.puzzleApp.dismissSection(document.getElementById('callout-section'))\"\n icon=\"x\"\n tone=\"neutral\"\n variant=\"tertiary\"\n accessibilityLabel=\"Dismiss card\"\n ></s-button>\n </s-grid>\n </s-section>\n <!-- === -->\n <!-- Puzzle templates -->\n <!-- === -->\n <s-section>\n <s-heading>Puzzle Templates</s-heading>\n <s-grid gridTemplateColumns=\"repeat(auto-fit, minmax(155px, 1fr))\" gap=\"base\">\n <!-- Featured template 1 -->\n <s-box border=\"base\" borderRadius=\"base\" overflow=\"hidden\">\n <s-clickable href=\"/puzzles/4-piece\" accessibilityLabel=\"4-pieces puzzle template\">\n <s-image\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n alt=\"4-pieces puzzle template\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png\"\n ></s-image>\n </s-clickable>\n <s-divider></s-divider>\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n background=\"base\"\n padding=\"small\"\n gap=\"small\"\n alignItems=\"center\"\n >\n <s-heading>4-Pieces</s-heading>\n <s-button href=\"/puzzles/4-piece\" accessibilityLabel=\"View 4-pieces puzzle template\">\n View\n </s-button>\n </s-grid>\n </s-box>\n <!-- Featured template 2 -->\n <s-box border=\"base\" borderRadius=\"base\" background=\"transparent\" overflow=\"hidden\">\n <s-clickable href=\"/puzzles/9-piece\" accessibilityLabel=\"9-pieces puzzle template\">\n <s-image\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n alt=\"9-pieces puzzle template\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/9-pieces.png\"\n ></s-image>\n </s-clickable>\n <s-divider></s-divider>\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n background=\"base\"\n padding=\"small\"\n gap=\"small\"\n alignItems=\"center\"\n >\n <s-heading>9-Pieces</s-heading>\n <s-button href=\"/puzzles/9-piece\" accessibilityLabel=\"View 9-pieces puzzle template\">\n View\n </s-button>\n </s-grid>\n </s-box>\n <!-- Featured template 3 -->\n <s-box border=\"base\" borderRadius=\"base\" background=\"transparent\" overflow=\"hidden\">\n <s-clickable href=\"/puzzles/16-piece\" accessibilityLabel=\"16-pieces puzzle template\">\n <s-image\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n alt=\"16-pieces puzzle template\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/16-pieces.png\"\n ></s-image>\n </s-clickable>\n <s-divider></s-divider>\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n background=\"base\"\n padding=\"small\"\n gap=\"small\"\n alignItems=\"center\"\n >\n <s-heading>16-Pieces</s-heading>\n <s-button\n href=\"/puzzles/16-piece\"\n accessibilityLabel=\"View 16-pieces puzzle template\"\n >\n View\n </s-button>\n </s-grid>\n </s-box>\n </s-grid>\n <s-stack\n direction=\"inline\"\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingBlockStart=\"base\"\n >\n <s-link href=\"/puzzles\">See all puzzle templates</s-link>\n </s-stack>\n </s-section>\n <!-- === -->\n <!-- News -->\n <!-- === -->\n <s-section>\n <s-heading>News</s-heading>\n <s-grid gridTemplateColumns=\"repeat(auto-fit, minmax(240px, 1fr))\" gap=\"base\">\n <!-- News item 1 -->\n <s-grid\n background=\"base\"\n border=\"base\"\n borderRadius=\"base\"\n padding=\"base\"\n gap=\"small-400\"\n >\n <s-text>Jan 21, 2025</s-text>\n <s-link href=\"/news/new-shapes-and-themes\">\n <s-heading>New puzzle shapes and themes added</s-heading>\n </s-link>\n <s-paragraph>\n We've added 5 new puzzle piece shapes and 3 seasonal themes to help you create more\n engaging and unique puzzles for your customers.\n </s-paragraph>\n </s-grid>\n <!-- News item 2 -->\n <s-grid\n background=\"base\"\n border=\"base\"\n borderRadius=\"base\"\n padding=\"base\"\n gap=\"small-400\"\n >\n <s-text>Nov 6, 2024</s-text>\n <s-link href=\"/news/puzzle-difficulty-customization\">\n <s-heading>Puzzle difficulty customization features</s-heading>\n </s-link>\n <s-paragraph>\n Now you can fine-tune the difficulty of your puzzles with new rotation controls, edge\n highlighting options, and piece recognition settings.\n </s-paragraph>\n </s-grid>\n </s-grid>\n <s-stack\n direction=\"inline\"\n alignItems=\"center\"\n justifyContent=\"center\"\n paddingBlockStart=\"base\"\n >\n <s-link href=\"/news\">See all news items</s-link>\n </s-stack>\n </s-section>\n <!-- === -->\n <!-- Featured apps -->\n <!-- If dismissed, use local storage or a database entry to avoid showing this section again to the same user. -->\n <!-- === -->\n <s-section id=\"featured-apps-section\">\n <s-grid gridTemplateColumns=\"1fr auto\" alignItems=\"center\" paddingBlockEnd=\"small-400\">\n <s-heading>Featured apps</s-heading>\n <s-button\n onClick=\"window.puzzleApp.dismissSection(document.getElementById('featured-apps-section'))\"\n icon=\"x\"\n tone=\"neutral\"\n variant=\"tertiary\"\n accessibilityLabel=\"Dismiss featured apps section\"\n ></s-button>\n </s-grid>\n <s-grid gridTemplateColumns=\"repeat(auto-fit, minmax(240px, 1fr))\" gap=\"base\">\n <!-- Featured app 1 -->\n <s-clickable\n href=\"https://apps.shopify.com/flow\"\n border=\"base\"\n borderRadius=\"base\"\n padding=\"base\"\n inlineSize=\"100%\"\n accessibilityLabel=\"Download Shopify Flow\"\n >\n <s-grid gridTemplateColumns=\"auto 1fr auto\" alignItems=\"stretch\" gap=\"base\">\n <s-thumbnail \n size=\"small\"\n src=\"https://cdn.shopify.com/app-store/listing_images/15100ebca4d221b650a7671125cd1444/icon/CO25r7-jh4ADEAE=.png\"\n alt=\"Shopify Flow icon\"\n ></s-thumbnail>\n <s-box>\n <s-heading>Shopify Flow</s-heading>\n <s-paragraph>Free</s-paragraph>\n <s-paragraph> Automate everything and get back to business. </s-paragraph>\n </s-box>\n <s-stack justifyContent=\"start\">\n <s-button\n href=\"https://apps.shopify.com/flow\"\n icon=\"download\"\n accessibilityLabel=\"Download Shopify Flow\"\n ></s-button>\n </s-stack>\n </s-grid>\n </s-clickable>\n <!-- Featured app 2 -->\n <s-clickable\n href=\"https://apps.shopify.com/planet\"\n border=\"base\"\n borderRadius=\"base\"\n padding=\"base\"\n inlineSize=\"100%\"\n accessibilityLabel=\"Download Shopify Planet\"\n >\n <s-grid gridTemplateColumns=\"auto 1fr auto\" alignItems=\"stretch\" gap=\"base\">\n <s-thumbnail\n size=\"small\"\n src=\"https://cdn.shopify.com/app-store/listing_images/87176a11f3714753fdc2e1fc8bbf0415/icon/CIqiqqXsiIADEAE=.png\"\n alt=\"Shopify Planet icon\"\n ></s-thumbnail>\n <s-box>\n <s-heading>Shopify Planet</s-heading>\n <s-paragraph>Free</s-paragraph>\n <s-paragraph>\n Offer carbon-neutral shipping and showcase your commitment.\n </s-paragraph>\n </s-box>\n <s-stack justifyContent=\"start\">\n <s-button\n href=\"https://apps.shopify.com/planet\"\n icon=\"download\"\n accessibilityLabel=\"Download Shopify Planet\"\n ></s-button>\n </s-stack>\n </s-grid>\n </s-clickable>\n </s-grid>\n </s-section>\n </s-page>\n </body>\n</html>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Index", - "overviewPreviewDescription": "Manage objects efficiently with dynamic table actions.", - "description": "The index layout lets merchants view and manage all their objects at once in a table format. They can filter, sort and do quick actions on their objects. To prevent tables from becoming visually cluttered, reveal actions only when the row is hovered over or selected\n\n | Used to | Examples |\n | --- | --- |\n | View all objects at once | Products, orders, customers, discounts |\n | Perform bulk actions | Delete products, pause/activate campaigns |\n\n ![Preview of the index pattern](/assets/templated-apis-screenshots/admin/patterns/index-example.png)\n\n This pattern uses `Badge`, `Box`, `Button`, `Clickable`, `Grid`, `Heading`, `Image`, `Link`, `Paragraph`, `Section`, `Stack`, and `Table` components.\n\n ---\n\n ## Design guidelines\n Design your index page so users can organize and take action on resource objects.\n\n ### Navigation\n\n * Users must be able to return to the previous page without using the browser button. To achieve this, your app can provide breadcrumbs or a Back button on the page.\n * Offer users clear and predictable action labels.\n\n ---\n\n ### Layout\n\n * Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms.\n * For resource index pages, use a full-width page. This is helpful when users are dealing with lists of data that have many columns.\n\n ---\n\n ", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Templates", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/index.png", - "defaultExample": { - "codeblock": { - "title": "Index", - "tabs": [ - { - "title": "jsx", - "code": "<s-page heading=\"Puzzles\">\n <s-button slot=\"primary-action\" variant=\"primary\">\n Create puzzle\n </s-button>\n <s-button slot=\"secondary-actions\" variant=\"secondary\">\n Export puzzles\n </s-button>\n <s-button slot=\"secondary-actions\" variant=\"secondary\">\n Import puzzles\n </s-button>\n {/* === */}\n {/* Empty state */}\n {/* This should only be visible if the merchant has not created any puzzles yet. */}\n {/* === */}\n <s-section accessibilityLabel=\"Empty state section\">\n <s-grid gap=\"base\" justifyItems=\"center\" paddingBlock=\"large-400\">\n <s-box maxInlineSize=\"200px\" maxBlockSize=\"200px\">\n {/* aspectRatio should match the actual image dimensions (width/height) */}\n <s-image\n aspectRatio=\"1/0.5\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/callout.png\"\n alt=\"A stylized graphic of four characters, each holding a puzzle piece\"\n />\n </s-box>\n <s-grid justifyItems=\"center\" maxInlineSize=\"450px\" gap=\"base\">\n <s-stack alignItems=\"center\">\n <s-heading>Start creating puzzles</s-heading>\n <s-paragraph>\n Create and manage your collection of puzzles for players to\n enjoy.\n </s-paragraph>\n </s-stack>\n <s-button-group>\n <s-button\n slot=\"secondary-actions\"\n accessibilityLabel=\"Learn more about creating puzzles\"\n >\n {\" \"}\n Learn more{\" \"}\n </s-button>\n <s-button slot=\"primary-action\" accessibilityLabel=\"Add a new puzzle\">\n {\" \"}\n Create puzzle{\" \"}\n </s-button>\n </s-button-group>\n </s-grid>\n </s-grid>\n </s-section>\n\n {/* === */}\n {/* Table */}\n {/* This should only be visible if the merchant has created one or more puzzles. */}\n {/* === */}\n <s-section padding=\"none\" accessibilityLabel=\"Puzzles table section\">\n <s-table>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Puzzle</s-table-header>\n <s-table-header format=\"numeric\">Pieces</s-table-header>\n <s-table-header>Created</s-table-header>\n <s-table-header>Status</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-clickable\n href=\"/app/details\"\n accessibilityLabel=\"Mountain View puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image\n objectFit=\"cover\"\n alt=\"Mountain View puzzle thumbnail\"\n src=\"https://picsum.photos/id/29/80/80\"\n />\n </s-clickable>\n <s-link href=\"/app/details\">Mountain View</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>16</s-table-cell>\n <s-table-cell>Today</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"success\">\n Active\n </s-badge>\n </s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-clickable\n href=\"/app/details\"\n accessibilityLabel=\"Ocean Sunset puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image\n objectFit=\"cover\"\n alt=\"Ocean Sunset puzzle thumbnail\"\n src=\"https://picsum.photos/id/12/80/80\"\n />\n </s-clickable>\n <s-link href=\"/app/details\">Ocean Sunset</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>9</s-table-cell>\n <s-table-cell>Yesterday</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"success\">\n Active\n </s-badge>\n </s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-clickable\n href=\"/app/details\"\n accessibilityLabel=\"Forest Animals puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image\n objectFit=\"cover\"\n alt=\"Forest Animals puzzle thumbnail\"\n src=\"https://picsum.photos/id/324/80/80\"\n />\n </s-clickable>\n <s-link href=\"/app/details\">Forest Animals</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>25</s-table-cell>\n <s-table-cell>Last week</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"neutral\">\n Draft\n </s-badge>\n </s-table-cell>\n </s-table-row>\n {/* Add more rows as needed here */}\n {/* If more than 100 rows are needed, index page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) */}\n </s-table-body>\n </s-table>\n </s-section>\n</s-page>\n", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<!DOCTYPE html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <script src=\"https://cdn.shopify.com/shopifycloud/polaris.js\"></script>\n <title>Pattern</title>\n </head>\n <body>\n <!-- === -->\n <!-- Index page pattern -->\n <!-- === -->\n <s-page heading=\"Puzzles\">\n <s-button slot=\"primary-action\" variant=\"primary\">Create puzzle</s-button>\n <s-button slot=\"secondary-actions\" variant=\"secondary\">Export puzzles</s-button>\n <s-button slot=\"secondary-actions\" variant=\"secondary\">Import puzzles</s-button>\n <!-- === -->\n <!-- Empty state -->\n <!-- This should only be visible if the merchant has not created any puzzles yet. -->\n <!-- === -->\n <s-section accessibilityLabel=\"Empty state section\">\n <s-grid gap=\"base\" justifyItems=\"center\" paddingBlock=\"large-400\">\n <s-box maxInlineSize=\"200px\" maxBlockSize=\"200px\">\n <!-- aspectRatio should match the actual image dimensions (width/height) -->\n <s-image\n maxInlineSize=\"200px\"\n maxBlockSize=\"200px\"\n aspectRatio=\"1/0.5\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/callout.png\"\n alt=\"A stylized graphic of four characters, each holding a puzzle piece\"\n />\n </s-box>\n <s-grid justifyItems=\"center\" maxInlineSize=\"450px\" gap=\"base\">\n <s-stack alignItems=\"center\">\n <s-heading>Start creating puzzles</s-heading>\n <s-paragraph>\n Create and manage your collection of puzzles for players to enjoy.\n </s-paragraph>\n </s-stack>\n <s-button-group>\n <s-button slot=\"secondary-actions\" aria-label=\"Learn more about creating puzzles\"> Learn more </s-button>\n <s-button slot=\"primary-action\" aria-label=\"Add a new puzzle\"> Create puzzle </s-button>\n </s-button-group>\n </s-grid>\n </s-grid>\n </s-section>\n <!-- === -->\n <!-- Table -->\n <!-- This should only be visible if the merchant has created one or more puzzles. -->\n <!-- === -->\n <s-section padding=\"none\" accessibilityLabel=\"Puzzles table section\">\n <s-table>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Puzzle</s-table-header>\n <s-table-header format=\"numeric\">Pieces</s-table-header>\n <s-table-header>Created</s-table-header>\n <s-table-header>Status</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row>\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-clickable\n href=\"/app/details\"\n accessibilityLabel=\"Mountain View puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image objectFit=\"cover\" alt=\"Mountain View puzzle thumbnail\" src=\"https://picsum.photos/id/29/80/80\"></s-image>\n </s-clickable>\n <s-link href=\"/app/details\">Mountain View</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>16</s-table-cell>\n <s-table-cell>Today</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"success\"> Active </s-badge>\n </s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-clickable\n href=\"/app/details\"\n accessibilityLabel=\"Ocean Sunset puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image objectFit=\"cover\" alt=\"Ocean Sunset puzzle thumbnail\" src=\"https://picsum.photos/id/12/80/80\"></s-image>\n </s-clickable>\n <s-link href=\"/app/details\">Ocean Sunset</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>9</s-table-cell>\n <s-table-cell>Yesterday</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"success\"> Active </s-badge>\n </s-table-cell>\n </s-table-row>\n <s-table-row>\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-clickable\n href=\"/app/details\"\n accessibilityLabel=\"Forest Animals puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image objectFit=\"cover\" alt=\"Forest Animals puzzle thumbnail\" src=\"https://picsum.photos/id/324/80/80\"></s-image>\n </s-clickable>\n <s-link href=\"/app/details\">Forest Animals</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>25</s-table-cell>\n <s-table-cell>Last week</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"neutral\"> Draft </s-badge>\n </s-table-cell>\n </s-table-row>\n <!-- Add more rows as needed here -->\n <!-- If more than 100 rows are needed, index page tables should use the paginate, hasPreviousPage, hasNextPage, onPreviousPage, and onNextPage attributes to display and handle pagination) -->\n </s-table-body>\n </s-table>\n </s-section>\n </s-page>\n </body>\n</html>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Index table", - "isOneColumnLayout": false, - "overviewPreviewDescription": "Display and manage data with powerful table interactions.", - "description": "An index table displays a collection of objects of the same type, like orders or products. The main job of an index table is to help merchants get an at-a-glance of the objects to perform actions or navigate to a full-page representation of it.\n | Used to | Examples |\n | --- | --- |\n | Display collections of similar objects | Products, orders, customers, discounts |\n | Perform bulk actions | Delete products, pause/activate campaigns |\n ---\n\n ", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/indexTable.png", - "defaultExample": { - "codeblock": { - "title": "Index table", - "tabs": [ - { - "title": "jsx", - "code": "<s-section padding=\"none\" accessibilityLabel=\"Puzzles table section\">\n <s-table>\n <s-grid slot=\"filters\" gap=\"small-200\" gridTemplateColumns=\"1fr auto\">\n <s-text-field\n label=\"Search puzzles\"\n labelAccessibilityVisibility=\"exclusive\"\n icon=\"search\"\n placeholder=\"Searching all puzzles\"\n />\n <s-button\n icon=\"sort\"\n variant=\"secondary\"\n accessibilityLabel=\"Sort\"\n interestFor=\"sort-tooltip\"\n commandFor=\"sort-actions\"\n />\n <s-tooltip id=\"sort-tooltip\">\n <s-text>Sort</s-text>\n </s-tooltip>\n <s-popover id=\"sort-actions\">\n <s-stack gap=\"none\">\n <s-box padding=\"small\">\n <s-choice-list label=\"Sort by\" name=\"Sort by\">\n <s-choice value=\"puzzle-name\" selected>\n Puzzle name\n </s-choice>\n <s-choice value=\"pieces\">Pieces</s-choice>\n <s-choice value=\"created\">Created</s-choice>\n <s-choice value=\"status\">Status</s-choice>\n </s-choice-list>\n </s-box>\n <s-divider />\n <s-box padding=\"small\">\n <s-choice-list label=\"Order by\" name=\"Order by\">\n <s-choice value=\"product-title\" selected>\n A-Z\n </s-choice>\n <s-choice value=\"created\">Z-A</s-choice>\n </s-choice-list>\n </s-box>\n </s-stack>\n </s-popover>\n </s-grid>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Puzzle</s-table-header>\n <s-table-header format=\"numeric\">Pieces</s-table-header>\n <s-table-header>Created</s-table-header>\n <s-table-header listSlot=\"secondary\">Status</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row clickDelegate=\"mountain-view-checkbox\">\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-checkbox id=\"mountain-view-checkbox\" />\n <s-clickable\n href=\"\"\n accessibilityLabel=\"Mountain View puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image\n objectFit=\"cover\"\n src=\"https://picsum.photos/id/29/80/80\"\n />\n </s-clickable>\n <s-link href=\"\">Mountain View</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>16</s-table-cell>\n <s-table-cell>Today</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"success\">\n Active\n </s-badge>\n </s-table-cell>\n </s-table-row>\n <s-table-row clickDelegate=\"ocean-sunset-checkbox\">\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-checkbox id=\"ocean-sunset-checkbox\" />\n <s-clickable\n href=\"\"\n accessibilityLabel=\"Ocean Sunset puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image\n objectFit=\"cover\"\n src=\"https://picsum.photos/id/12/80/80\"\n />\n </s-clickable>\n <s-link href=\"\">Ocean Sunset</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>9</s-table-cell>\n <s-table-cell>Yesterday</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"success\">\n Active\n </s-badge>\n </s-table-cell>\n </s-table-row>\n <s-table-row clickDelegate=\"forest-animals-checkbox\">\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-checkbox id=\"forest-animals-checkbox\" />\n <s-clickable\n href=\"\"\n accessibilityLabel=\"Forest Animals puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image\n objectFit=\"cover\"\n src=\"https://picsum.photos/id/324/80/80\"\n />\n </s-clickable>\n <s-link href=\"\">Forest Animals</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>25</s-table-cell>\n <s-table-cell>Last week</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"neutral\">\n Draft\n </s-badge>\n </s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-section padding=\"none\" accessibilityLabel=\"Puzzles table section\">\n <s-table>\n <s-grid slot=\"filters\" gap=\"small-200\" gridTemplateColumns=\"1fr auto\">\n <s-text-field\n label=\"Search puzzles\"\n labelAccessibilityVisibility=\"exclusive\"\n icon=\"search\"\n placeholder=\"Searching all puzzles\"\n ></s-text-field>\n <s-button\n icon=\"sort\"\n variant=\"secondary\"\n accessibilityLabel=\"Sort\"\n interestFor=\"sort-tooltip\"\n commandFor=\"sort-actions\"\n ></s-button>\n <s-tooltip id=\"sort-tooltip\">\n <s-text>Sort</s-text>\n </s-tooltip>\n <s-popover id=\"sort-actions\">\n <s-stack gap=\"none\">\n <s-box padding=\"small\">\n <s-choice-list label=\"Sort by\" name=\"Sort by\">\n <s-choice value=\"puzzle-name\" selected>Puzzle name</s-choice>\n <s-choice value=\"pieces\">Pieces</s-choice>\n <s-choice value=\"created\">Created</s-choice>\n <s-choice value=\"status\">Status</s-choice>\n </s-choice-list>\n </s-box>\n <s-divider></s-divider>\n <s-box padding=\"small\">\n <s-choice-list label=\"Order by\" name=\"Order by\">\n <s-choice value=\"product-title\" selected>A-Z</s-choice>\n <s-choice value=\"created\">Z-A</s-choice>\n </s-choice-list>\n </s-box>\n </s-stack>\n </s-popover>\n </s-grid>\n <s-table-header-row>\n <s-table-header listSlot=\"primary\">Puzzle</s-table-header>\n <s-table-header format=\"numeric\">Pieces</s-table-header>\n <s-table-header>Created</s-table-header>\n <s-table-header listSlot=\"secondary\">Status</s-table-header>\n </s-table-header-row>\n <s-table-body>\n <s-table-row clickDelegate=\"mountain-view-checkbox\">\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-checkbox id=\"mountain-view-checkbox\"></s-checkbox>\n <s-clickable\n href=\"\"\n accessibilityLabel=\"Mountain View puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image\n objectFit=\"cover\"\n src=\"https://picsum.photos/id/29/80/80\"\n ></s-image>\n </s-clickable>\n <s-link href=\"\">Mountain View</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>16</s-table-cell>\n <s-table-cell>Today</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"success\">Active</s-badge>\n </s-table-cell>\n </s-table-row>\n <s-table-row clickDelegate=\"ocean-sunset-checkbox\">\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-checkbox id=\"ocean-sunset-checkbox\"></s-checkbox>\n <s-clickable\n href=\"\"\n accessibilityLabel=\"Ocean Sunset puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image\n objectFit=\"cover\"\n src=\"https://picsum.photos/id/12/80/80\"\n ></s-image>\n </s-clickable>\n <s-link href=\"\">Ocean Sunset</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>9</s-table-cell>\n <s-table-cell>Yesterday</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"success\">Active</s-badge>\n </s-table-cell>\n </s-table-row>\n <s-table-row clickDelegate=\"forest-animals-checkbox\">\n <s-table-cell>\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-checkbox id=\"forest-animals-checkbox\"></s-checkbox>\n <s-clickable\n href=\"\"\n accessibilityLabel=\"Forest Animals puzzle thumbnail\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n inlineSize=\"40px\"\n blockSize=\"40px\"\n >\n <s-image\n objectFit=\"cover\"\n src=\"https://picsum.photos/id/324/80/80\"\n ></s-image>\n </s-clickable>\n <s-link href=\"\">Forest Animals</s-link>\n </s-stack>\n </s-table-cell>\n <s-table-cell>25</s-table-cell>\n <s-table-cell>Last week</s-table-cell>\n <s-table-cell>\n <s-badge color=\"base\" tone=\"neutral\">Draft</s-badge>\n </s-table-cell>\n </s-table-row>\n </s-table-body>\n </s-table>\n</s-section>\n", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - }, - { - "name": "Table", - "subtitle": "Component", - "url": "/docs/api/app-home/web-components/structure/table", - "type": "component" - } - ] - }, - { - "name": "Interstitial nav", - "isOneColumnLayout": false, - "overviewPreviewDescription": "Provide deeper navigation by linking merchants to related pages within a section.", - "description": "Interstitial navigation is used to connect merchants to deeper pages—such as settings, features, or resources—within a section of your app. It helps keep navigation clean and focused by avoiding multiple nested items, making it easier for merchants to discover and access important functionality.\n \n | Used to | Examples |\n | --- | --- |\n | Link to individual settings pages | Navigate from a settings overview to product settings or notification preferences |\n | Connect to feature-specific pages | Direct merchants from campaign overview to reporting or automation setup |\n | Guide merchants to supporting resources | Link to help documentation or integration guides from a central section |\n | Simplify navigation structure | Reduce clutter by providing access to deeper pages without multi-level menus |\n ---\n", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/interstitialNav.png", - "defaultExample": { - "codeblock": { - "title": "Interstitial nav", - "tabs": [ - { - "title": "jsx", - "code": "<s-section heading=\"Preferences\">\n <s-box border=\"base\" borderRadius=\"base\">\n <s-clickable\n padding=\"small-100\"\n href=\"#\"\n accessibilityLabel=\"Configure shipping methods, rates, and fulfillment options\"\n >\n <s-grid gridTemplateColumns=\"1fr auto\" alignItems=\"center\" gap=\"base\">\n <s-box>\n <s-heading>Shipping & fulfillment</s-heading>\n <s-paragraph color=\"subdued\">\n Shipping methods, rates, zones, and fulfillment preferences.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\" />\n </s-grid>\n </s-clickable>\n <s-box paddingInline=\"small-100\">\n <s-divider />\n </s-box>\n <s-clickable\n padding=\"small-100\"\n href=\"#\"\n accessibilityLabel=\"Configure product defaults, customer experience, and catalog settings\"\n >\n <s-grid gridTemplateColumns=\"1fr auto\" alignItems=\"center\" gap=\"base\">\n <s-box>\n <s-heading>Products & catalog</s-heading>\n <s-paragraph color=\"subdued\">\n Product defaults, customer experience, and catalog display options.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\" />\n </s-grid>\n </s-clickable>\n <s-box paddingInline=\"small-100\">\n <s-divider />\n </s-box>\n <s-clickable\n padding=\"small-100\"\n href=\"#\"\n accessibilityLabel=\"Manage customer support settings and help resources\"\n >\n <s-grid gridTemplateColumns=\"1fr auto\" alignItems=\"center\" gap=\"base\">\n <s-box>\n <s-heading>Customer support</s-heading>\n <s-paragraph color=\"subdued\">\n Support settings, help resources, and customer service tools.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\" />\n </s-grid>\n </s-clickable>\n </s-box>\n</s-section>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-section heading=\"Preferences\">\n <s-box\n border=\"base\"\n borderRadius=\"base\"\n >\n <s-clickable\n padding=\"small-100\"\n href=\"#\"\n accessibilityLabel=\"Configure shipping methods, rates, and fulfillment options\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Shipping & fulfillment</s-heading>\n <s-paragraph color=\"subdued\">\n Shipping methods, rates, zones, and fulfillment preferences.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\"></s-icon>\n </s-grid>\n </s-clickable>\n <s-box paddingInline=\"small-100\">\n <s-divider></s-divider>\n </s-box>\n <s-clickable\n padding=\"small-100\"\n href=\"#\"\n accessibilityLabel=\"Configure product defaults, customer experience, and catalog settings\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Products & catalog</s-heading>\n <s-paragraph color=\"subdued\">\n Product defaults, customer experience, and catalog display\n options.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\"></s-icon>\n </s-grid>\n </s-clickable>\n <s-box paddingInline=\"small-100\">\n <s-divider></s-divider>\n </s-box>\n <s-clickable\n padding=\"small-100\"\n href=\"#\"\n accessibilityLabel=\"Manage customer support settings and help resources\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Customer support</s-heading>\n <s-paragraph color=\"subdued\">\n Support settings, help resources, and customer service\n tools.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\"></s-icon>\n </s-grid>\n </s-clickable>\n </s-box>\n</s-section>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Media card", - "isOneColumnLayout": false, - "overviewPreviewDescription": "Present visual information alongside actionable, educational content.", - "description": "Media cards provide a consistent layout to present visual information to merchants. Visual media is used to provide additional context to the written information it's paired with.\n\n | Used to | Examples |\n | --- | --- |\n | Educate merchants on key actions | Show how to connect a social account with a demo image |\n | Provide clear calls to action | Show campaign preview with a \"Send campaign\" button |\n\n ---\n \n\n \n", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/mediaCard.png", - "defaultExample": { - "codeblock": { - "title": "Media card", - "tabs": [ - { - "title": "jsx", - "code": "<s-box\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n maxInlineSize=\"216px\"\n>\n <s-clickable href=\"\">\n <s-image\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n alt=\"Illustration of characters with a 4-piece puzzle\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png\"\n />\n </s-clickable>\n <s-divider />\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n background=\"base\"\n padding=\"small\"\n gap=\"small\"\n alignItems=\"center\"\n >\n <s-heading>4-Pieces</s-heading>\n <s-button href=\"\" accessibilityLabel=\"View 4-pieces puzzle template\">\n View\n </s-button>\n </s-grid>\n</s-box>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-box border=\"base\" borderRadius=\"base\" overflow=\"hidden\" maxInlineSize=\"216px\">\n <s-clickable href=\"\">\n <s-image\n aspectRatio=\"1/1\"\n objectFit=\"cover\"\n alt=\"Illustration of characters with a 4-piece puzzle\"\n src=\"https://cdn.shopify.com/static/images/polaris/patterns/4-pieces.png\"\n ></s-image>\n </s-clickable>\n <s-divider></s-divider>\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n background=\"base\"\n padding=\"small\"\n gap=\"small\"\n alignItems=\"center\"\n >\n <s-heading>4-Pieces</s-heading>\n <s-button href=\"\" accessibilityLabel=\"View 4-pieces puzzle template\">\n View\n </s-button>\n </s-grid>\n</s-box>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Metrics card", - "isOneColumnLayout": false, - "overviewPreviewDescription": "Display key metrics, statistics, or trends at a glance.", - "description": "Metrics cards are used to highlight important numbers, statistics, or trends from your app, so merchants can quickly understand their activity and performance.\n \n \n | Used to | Examples |\n | --- | --- |\n | Show app-specific metrics | Email open rates, active subscribers |\n | Visualize user engagement | Social media followers, campaign clicks |\n ---\n", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/metricsCard.png", - "defaultExample": { - "codeblock": { - "title": "Metrics card", - "tabs": [ - { - "title": "jsx", - "code": "<s-section padding=\"base\">\n <s-grid\n gridTemplateColumns=\"@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr\"\n gap=\"small\"\n >\n <s-clickable\n href=\"\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Total Designs</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>156</s-text>\n <s-badge tone=\"success\" icon=\"arrow-up\">\n {\" \"}\n 12%{\" \"}\n </s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n <s-divider direction=\"block\" />\n <s-clickable\n href=\"\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Units Sold</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>2,847</s-text>\n <s-badge tone=\"warning\">0%</s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n <s-divider direction=\"block\" />\n <s-clickable\n href=\"\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Return Rate</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>3.2%</s-text>\n <s-badge tone=\"critical\" icon=\"arrow-down\">\n {\" \"}\n 0.8%{\" \"}\n </s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n </s-grid>\n</s-section>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-section padding=\"small\">\n <s-grid\n gridTemplateColumns=\"@container (inline-size <= 400px) 1fr, 1fr auto 1fr auto 1fr\"\n gap=\"small\"\n >\n <s-clickable\n href=\"\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Total Designs</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>156</s-text>\n <s-badge tone=\"success\" icon=\"arrow-up\"> 12% </s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n <s-divider direction=\"block\"></s-divider>\n <s-clickable\n href=\"\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Units Sold</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>2,847</s-text>\n <s-badge tone=\"warning\">0%</s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n <s-divider direction=\"block\"></s-divider>\n <s-clickable\n href=\"\"\n paddingBlock=\"small-400\"\n paddingInline=\"small-100\"\n borderRadius=\"base\"\n >\n <s-grid gap=\"small-300\">\n <s-heading>Return Rate</s-heading>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-text>3.2%</s-text>\n <s-badge tone=\"critical\" icon=\"arrow-down\"> 0.8% </s-badge>\n </s-stack>\n </s-grid>\n </s-clickable>\n </s-grid>\n</s-section>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Resource list", - "isOneColumnLayout": false, - "overviewPreviewDescription": "A resource list displays a collection of objects of the same type, like products or customers. The main job of a resource list is to help merchants find an object and navigate to a full-page representation of it.", - "description": "A resource list displays a collection of objects of the same type, like products or customers. The main job of a resource list is to help merchants find an object and navigate to a full-page representation of it.\n.\n\n | Used to | Examples |\n | --- | --- |\n | Display collections of similar resources | Campaigns, subscribers, social posts, templates|\n | Help merchants find and select items | Search subscribers by email; Filter campaigns by status |\n | Perform bulk actions on selected items | Tag subscribers; Archive campaigns; Publish selected posts |\n\n ---\n \n\n \n", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/resourceList.png", - "defaultExample": { - "codeblock": { - "title": "Resource list", - "tabs": [ - { - "title": "jsx", - "code": "<s-section padding=\"none\">\n <s-stack gap=\"small-200\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\" paddingInline=\"base\" paddingBlockStart=\"base\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"small-200\" alignItems=\"center\">\n <s-text-field icon=\"search\" placeholder=\"Filter customers\"></s-text-field>\n <s-button commandFor=\"tagged-with\">Tagged with</s-button>\n <s-popover id=\"tagged-with\">\n <s-stack gap=\"small-200\" padding=\"small-200\">\n <s-text-field value=\"VIP\" placeholder=\"Add tag\"></s-text-field>\n <s-link href=\"\">Clear</s-link>\n </s-stack>\n </s-popover>\n </s-grid>\n <s-button variant=\"secondary\">Save</s-button>\n </s-grid>\n\n <s-stack direction=\"inline\" gap=\"small-400\" paddingInline=\"base\">\n <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>\n </s-stack>\n \n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\" paddingInline=\"base\">\n <s-checkbox label=\"Showing 2 customers\"></s-checkbox>\n <s-select>\n <s-option value=\"newest\">Newest update</s-option>\n <s-option value=\"oldest\">Oldest update</s-option>\n </s-select>\n </s-grid>\n \n <s-stack>\n <s-clickable borderStyle=\"solid none none none\" border=\"base\" paddingInline=\"base\" paddingBlock=\"small\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\">\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-checkbox></s-checkbox>\n <s-avatar></s-avatar>\n <s-stack>\n <s-heading>Mae Jemison</s-heading>\n <s-text>Decatur, USA</s-text>\n </s-stack>\n </s-stack>\n <s-button icon=\"menu-horizontal\" variant=\"tertiary\" accessibilityLabel=\"Actions for Mae Jemison\"></s-button>\n </s-grid>\n </s-clickable>\n <s-clickable borderStyle=\"solid none none none\" border=\"base\" paddingInline=\"base\" paddingBlock=\"small\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\">\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-checkbox></s-checkbox>\n <s-avatar></s-avatar>\n <s-stack>\n <s-heading>Ellen Ochoa</s-heading>\n <s-text>Los Angeles, USA</s-text>\n </s-stack>\n </s-stack>\n <s-button icon=\"menu-horizontal\" variant=\"tertiary\" accessibilityLabel=\"Actions for Ellen Ochoa\"></s-button>\n </s-grid>\n </s-clickable>\n </s-stack>\n </s-stack>\n</s-section>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-section padding=\"none\">\n <s-stack gap=\"small-200\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\" paddingInline=\"base\" paddingBlockStart=\"base\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"small-200\" alignItems=\"center\">\n <s-text-field icon=\"search\" placeholder=\"Filter customers\"></s-text-field>\n <s-button commandFor=\"tagged-with\">Tagged with</s-button>\n <s-popover id=\"tagged-with\">\n <s-stack gap=\"small-200\" padding=\"small-200\">\n <s-text-field value=\"VIP\" placeholder=\"Add tag\"></s-text-field>\n <s-link href=\"\">Clear</s-link>\n </s-stack>\n </s-popover>\n </s-grid>\n <s-button variant=\"secondary\">Save</s-button>\n </s-grid>\n\n <s-stack direction=\"inline\" gap=\"small-400\" paddingInline=\"base\">\n <s-clickable-chip removable>Tagged with VIP</s-clickable-chip>\n </s-stack>\n \n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\" paddingInline=\"base\">\n <s-checkbox label=\"Showing 2 customers\"></s-checkbox>\n <s-select>\n <s-option value=\"newest\">Newest update</s-option>\n <s-option value=\"oldest\">Oldest update</s-option>\n </s-select>\n </s-grid>\n \n <s-stack>\n <s-clickable borderStyle=\"solid none none none\" border=\"base\" paddingInline=\"base\" paddingBlock=\"small\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\">\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-checkbox></s-checkbox>\n <s-avatar></s-avatar>\n <s-stack>\n <s-heading>Mae Jemison</s-heading>\n <s-text>Decatur, USA</s-text>\n </s-stack>\n </s-stack>\n <s-button icon=\"menu-horizontal\" variant=\"tertiary\" accessibilityLabel=\"Actions for Mae Jemison\"></s-button>\n </s-grid>\n </s-clickable>\n <s-clickable borderStyle=\"solid none none none\" border=\"base\" paddingInline=\"base\" paddingBlock=\"small\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\">\n <s-stack direction=\"inline\" gap=\"small\" alignItems=\"center\">\n <s-checkbox></s-checkbox>\n <s-avatar></s-avatar>\n <s-stack>\n <s-heading>Ellen Ochoa</s-heading>\n <s-text>Los Angeles, USA</s-text>\n </s-stack>\n </s-stack>\n <s-button icon=\"menu-horizontal\" variant=\"tertiary\" accessibilityLabel=\"Actions for Ellen Ochoa\"></s-button>\n </s-grid>\n </s-clickable>\n </s-stack>\n </s-stack>\n</s-section>", - "language": "html", - "editable": false - }, - { - "code": "
\n \n \n \n \n Tagged with\n \n \n \n Clear\n \n \n \n Save\n \n\n \n Tagged with VIP\n \n \n \n \n \n Newest update\n Oldest update\n \n \n \n \n \n \n \n \n \n \n Mae Jemison\n Decatur, USA\n \n \n \n \n \n \n \n \n \n \n \n Ellen Ochoa\n Los Angeles, USA\n \n \n \n \n \n \n \n
", - "language": "preview" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Settings", - "overviewPreviewDescription": "Organize settings into categories for easy navigation.", - "description": "Make settings pages easy to scan by grouping related information in a logical order. For complex or lengthy settings, organize content into distinct, themed sections that link to their own pages.\n | Used to | Examples |\n | --- | --- |\n | Find and change app settings | Membership settings, app appearance, set up theme blocks |\n\n ![Preview of the settings pattern](/assets/templated-apis-screenshots/admin/patterns/settings-example.png)\n\n This pattern uses `Box`, `Button`, `ChoiceList`, `Clickable`, `Divider`, `Grid`, `Heading`, `Icon`, `Paragraph`, `Section`, `Select`, `Stack`, and `TextField` components.\n\n ---\n\n ## Design guidelines\n Design scannable settings pages with groups of related information placed in logical order.\n\n ### Navigation\n\n * Users must be able to return to the previous page without using the browser button. To achieve this, your app can provide breadcrumbs or a Back button on the page.\n * Offer users clear and predictable action labels.\n\n ---\n\n ### Visual design\n\n Design your app to be responsive and adapt to different screen sizes and devices. This ensures a seamless user experience across various platforms.\n\n * Use looser spacing for low-density layouts. Use tighter spacing for high-density layouts.\n * Use high-resolution photos and images to ensure a professional, high-quality experience.\n\n ---\n\n ", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Templates", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/settings.png", - "defaultExample": { - "codeblock": { - "title": "Settings", - "tabs": [ - { - "title": "jsx", - "code": "<form\n data-save-bar\n onSubmit={(event) => {\n event.preventDefault();\n const formData = new FormData(event.target);\n const formEntries = Object.fromEntries(formData);\n console.log(\"Form data\", formEntries);\n }}\n onReset={(event) => {\n console.log(\"Handle discarded changes if necessary\");\n }}\n>\n <s-page heading=\"Settings\" inlineSize=\"small\">\n {/* === */}\n {/* Store Information */}\n {/* === */}\n <s-section heading=\"Store Information\">\n <s-text-field\n label=\"Store name\"\n name=\"store-name\"\n value=\"Puzzlify Store\"\n placeholder=\"Enter store name\"\n />\n <s-text-field\n label=\"Business address\"\n name=\"business-address\"\n value=\"123 Main St, Anytown, USA\"\n placeholder=\"Enter business address\"\n />\n <s-text-field\n label=\"Store phone\"\n name=\"store-phone\"\n value=\"+1 (555) 123-4567\"\n placeholder=\"Enter phone number\"\n />\n <s-choice-list label=\"Primary currency\" name=\"currency\">\n <s-choice value=\"usd\" selected>\n US Dollar ($)\n </s-choice>\n <s-choice value=\"cad\">Canadian Dollar (CAD)</s-choice>\n <s-choice value=\"eur\">Euro (€)</s-choice>\n </s-choice-list>\n </s-section>\n\n {/* === */}\n {/* Notifications */}\n {/* === */}\n <s-section heading=\"Notifications\">\n <s-select\n label=\"Notification frequency\"\n name=\"notification-frequency\"\n >\n <s-option value=\"immediately\" selected>\n Immediately\n </s-option>\n <s-option value=\"hourly\">Hourly digest</s-option>\n <s-option value=\"daily\">Daily digest</s-option>\n </s-select>\n <s-choice-list\n label=\"Notification types\"\n name=\"notifications-type\"\n multiple\n >\n <s-choice value=\"new-order\" selected>\n New order notifications\n </s-choice>\n <s-choice value=\"low-stock\">Low stock alerts</s-choice>\n <s-choice value=\"customer-review\">\n Customer review notifications\n </s-choice>\n <s-choice value=\"shipping-updates\">Shipping updates</s-choice>\n </s-choice-list>\n </s-section>\n\n {/* === */}\n {/* Preferences */}\n {/* === */}\n <s-section heading=\"Preferences\">\n <s-box border=\"base\" borderRadius=\"base\">\n <s-clickable\n padding=\"small-100\"\n href=\"/app/settings/shipping\"\n accessibilityLabel=\"Configure shipping methods, rates, and fulfillment options\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Shipping & fulfillment</s-heading>\n <s-paragraph color=\"subdued\">\n Shipping methods, rates, zones, and fulfillment preferences.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\" />\n </s-grid>\n </s-clickable>\n <s-box paddingInline=\"small-100\">\n <s-divider />\n </s-box>\n\n <s-clickable\n padding=\"small-100\"\n href=\"/app/settings/products_catalog\"\n accessibilityLabel=\"Configure product defaults, customer experience, and catalog settings\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Products & catalog</s-heading>\n <s-paragraph color=\"subdued\">\n Product defaults, customer experience, and catalog display\n options.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\" />\n </s-grid>\n </s-clickable>\n <s-box paddingInline=\"small-100\">\n <s-divider />\n </s-box>\n\n <s-clickable\n padding=\"small-100\"\n href=\"/app/settings/customer_support\"\n accessibilityLabel=\"Manage customer support settings and help resources\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Customer support</s-heading>\n <s-paragraph color=\"subdued\">\n Support settings, help resources, and customer service\n tools.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\" />\n </s-grid>\n </s-clickable>\n </s-box>\n </s-section>\n\n {/* === */}\n {/* Tools */}\n {/* === */}\n <s-section heading=\"Tools\">\n <s-stack\n gap=\"none\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n >\n <s-box padding=\"small-100\">\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Reset app settings</s-heading>\n <s-paragraph color=\"subdued\">\n Reset all settings to their default values. This action\n cannot be undone.\n </s-paragraph>\n </s-box>\n <s-button tone=\"critical\">Reset</s-button>\n </s-grid>\n </s-box>\n <s-box paddingInline=\"small-100\">\n <s-divider />\n </s-box>\n\n <s-box padding=\"small-100\">\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Export settings</s-heading>\n <s-paragraph color=\"subdued\">\n Download a backup of all your current settings.\n </s-paragraph>\n </s-box>\n <s-button>Export</s-button>\n </s-grid>\n </s-box>\n </s-stack>\n </s-section>\n </s-page>\n</form>\n", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<!doctype html>\n<html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <script src=\"https://cdn.shopify.com/shopifycloud/polaris.js\"></script>\n <title>Pattern</title>\n </head>\n <body>\n <!-- === -->\n <!-- Settings page pattern -->\n <!-- === -->\n <form data-save-bar onSubmit=\"\" onReset=\"\">\n <s-page heading=\"Settings\" inlineSize=\"small\">\n <!-- === -->\n <!-- Store Information -->\n <!-- === -->\n <s-section heading=\"Store Information\">\n <s-text-field\n label=\"Store name\"\n name=\"store-name\"\n value=\"Puzzlify Store\"\n placeholder=\"Enter store name\"\n ></s-text-field>\n <s-text-field\n label=\"Business address\"\n name=\"business-address\"\n value=\"123 Main St, Anytown, USA\"\n placeholder=\"Enter business address\"\n ></s-text-field>\n <s-text-field\n label=\"Store phone\"\n name=\"store-phone\"\n value=\"+1 (555) 123-4567\"\n placeholder=\"Enter phone number\"\n ></s-text-field>\n <s-choice-list label=\"Primary currency\" name=\"currency\">\n <s-choice value=\"usd\" selected>US Dollar ($)</s-choice>\n <s-choice value=\"cad\">Canadian Dollar (CAD)</s-choice>\n <s-choice value=\"eur\">Euro (€)</s-choice>\n </s-choice-list>\n </s-section>\n <!-- === -->\n <!-- Notifications -->\n <!-- === -->\n <s-section heading=\"Notifications\">\n <s-select\n label=\"Notification frequency\"\n name=\"notification-frequency\"\n >\n <s-option value=\"immediately\" selected>Immediately</s-option>\n <s-option value=\"hourly\">Hourly digest</s-option>\n <s-option value=\"daily\">Daily digest</s-option>\n </s-select>\n <s-choice-list\n label=\"Notification types\"\n name=\"notifications-type\"\n multiple\n >\n <s-choice value=\"new-order\" selected\n >New order notifications</s-choice\n >\n <s-choice value=\"low-stock\">Low stock alerts</s-choice>\n <s-choice value=\"customer-review\"\n >Customer review notifications</s-choice\n >\n <s-choice value=\"shipping-updates\">Shipping updates</s-choice>\n </s-choice-list>\n </s-section>\n <!-- === -->\n <!-- Preferences -->\n <!-- === -->\n <s-section heading=\"Preferences\">\n <s-box\n border=\"base\"\n borderRadius=\"base\"\n >\n <s-clickable\n padding=\"small-100\"\n href=\"/app/settings/shipping\"\n accessibilityLabel=\"Configure shipping methods, rates, and fulfillment options\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Shipping & fulfillment</s-heading>\n <s-paragraph color=\"subdued\">\n Shipping methods, rates, zones, and fulfillment preferences.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\"></s-icon>\n </s-grid>\n </s-clickable>\n <s-box paddingInline=\"small-100\">\n <s-divider></s-divider>\n </s-box>\n <s-clickable\n padding=\"small-100\"\n href=\"/app/settings/products_catalog\"\n accessibilityLabel=\"Configure product defaults, customer experience, and catalog settings\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Products & catalog</s-heading>\n <s-paragraph color=\"subdued\">\n Product defaults, customer experience, and catalog display\n options.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\"></s-icon>\n </s-grid>\n </s-clickable>\n <s-box paddingInline=\"small-100\">\n <s-divider></s-divider>\n </s-box>\n <s-clickable\n padding=\"small-100\"\n href=\"/app/settings/customer_support\"\n accessibilityLabel=\"Manage customer support settings and help resources\"\n >\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Customer support</s-heading>\n <s-paragraph color=\"subdued\">\n Support settings, help resources, and customer service\n tools.\n </s-paragraph>\n </s-box>\n <s-icon type=\"chevron-right\"></s-icon>\n </s-grid>\n </s-clickable>\n </s-box>\n </s-section>\n <!-- === -->\n <!-- Tools -->\n <!-- === -->\n <s-section heading=\"Tools\">\n <s-stack\n gap=\"none\"\n border=\"base\"\n borderRadius=\"base\"\n overflow=\"hidden\"\n >\n <s-box padding=\"small-100\">\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Reset app settings</s-heading>\n <s-paragraph color=\"subdued\">\n Reset all settings to their default values. This action\n cannot be undone.\n </s-paragraph>\n </s-box>\n <s-button tone=\"critical\">Reset</s-button>\n </s-grid>\n </s-box>\n <s-box paddingInline=\"small-100\">\n <s-divider></s-divider>\n </s-box>\n <s-box padding=\"small-100\">\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n alignItems=\"center\"\n gap=\"base\"\n >\n <s-box>\n <s-heading>Export settings</s-heading>\n <s-paragraph color=\"subdued\">\n Download a backup of all your current settings.\n </s-paragraph>\n </s-box>\n <s-button>Export</s-button>\n </s-grid>\n </s-box>\n </s-stack>\n </s-section>\n </s-page>\n </form>\n </body>\n</html>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - }, - { - "name": "Setup guide", - "isOneColumnLayout": false, - "overviewPreviewDescription": "Guide merchants through onboarding and setup with interactive checklists and progress tracking.", - "description": "Setup guide provides an interactive checklist to guide merchants through essential onboarding or configuration tasks. Progress is tracked visually, helping merchants complete all required steps and understand what remains.\n | Used to | Examples |\n | --- | --- |\n | Onboard merchants | Initial app setup |\n | Track completion of multi-step processes | Necessary setup steps |\n ---\n", - "isVisualComponent": true, - "category": "Patterns", - "subCategory": "Compositions", - "thumbnail": "/assets/templated-apis-screenshots/admin/patterns/setupGuide.png", - "defaultExample": { - "codeblock": { - "title": "Setup guide", - "tabs": [ - { - "title": "jsx", - "code": "<s-section>\n <s-grid gap=\"base\">\n <s-grid gap=\"small-200\">\n <s-grid\n gridTemplateColumns=\"1fr auto auto\"\n gap=\"small-300\"\n alignItems=\"center\"\n >\n <s-heading>Setup Guide</s-heading>\n <s-button\n accessibilityLabel=\"Dismiss Guide\"\n variant=\"tertiary\"\n tone=\"neutral\"\n icon=\"x\"\n />\n <s-button\n accessibilityLabel=\"Toggle setup guide\"\n variant=\"tertiary\"\n tone=\"neutral\"\n icon=\"chevron-up\"\n />\n </s-grid>\n <s-paragraph>\n Use this personalized guide to get your store ready for sales.\n </s-paragraph>\n <s-paragraph color=\"subdued\">0 out of 3 steps completed</s-paragraph>\n </s-grid>\n <s-box borderRadius=\"base\" border=\"base\" background=\"base\">\n <s-box>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" padding=\"small\">\n <s-checkbox label=\"Upload an image for your puzzle\" />\n <s-button\n accessibilityLabel=\"Toggle step 1 details\"\n variant=\"tertiary\"\n icon=\"chevron-up\"\n />\n </s-grid>\n <s-box padding=\"small\" paddingBlockStart=\"none\">\n <s-box padding=\"base\" background=\"subdued\" borderRadius=\"base\">\n <s-grid\n gridTemplateColumns=\"1fr auto\"\n gap=\"base\"\n alignItems=\"center\"\n >\n <s-grid gap=\"small-200\">\n <s-paragraph>\n Start by uploading a high-quality image that will be used to\n create your puzzle. For best results, use images that are at\n least 1200x1200 pixels.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button variant=\"primary\">Upload image</s-button>\n <s-button variant=\"tertiary\" tone=\"neutral\">\n {\" \"}\n Image requirements{\" \"}\n </s-button>\n </s-stack>\n </s-grid>\n <s-box maxBlockSize=\"80px\" maxInlineSize=\"80px\">\n <s-image\n src=\"https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg\"\n alt=\"Customize checkout illustration\"\n />\n </s-box>\n </s-grid>\n </s-box>\n </s-box>\n </s-box>\n <s-divider />\n <s-box>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" padding=\"small\">\n <s-checkbox label=\"Choose a puzzle template\" />\n <s-button\n accessibilityLabel=\"Toggle step 2 details\"\n variant=\"tertiary\"\n icon=\"chevron-down\"\n />\n </s-grid>\n <s-box\n padding=\"small\"\n paddingBlockStart=\"none\"\n />\n </s-box>\n <s-divider />\n <s-box>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" padding=\"small\">\n <s-checkbox label=\"Customize puzzle piece shapes\" />\n <s-button\n accessibilityLabel=\"Toggle step 3 details\"\n variant=\"tertiary\"\n icon=\"chevron-down\"\n />\n </s-grid>\n <s-box\n padding=\"small\"\n paddingBlockStart=\"none\"\n />\n </s-box>\n </s-box>\n </s-grid>\n</s-section>", - "language": "jsx", - "editable": false - }, - { - "title": "html", - "code": "<s-section>\n <s-grid gap=\"base\">\n <s-grid gap=\"small-200\">\n <s-grid gridTemplateColumns=\"1fr auto auto\" gap=\"small-300\" alignItems=\"center\">\n <s-heading>Setup Guide</s-heading>\n <s-button\n accessibilityLabel=\"Dismiss Guide\"\n variant=\"tertiary\"\n tone=\"neutral\"\n icon=\"x\"\n ></s-button>\n <s-button\n accessibilityLabel=\"Toggle setup guide\"\n variant=\"tertiary\"\n tone=\"neutral\"\n icon=\"chevron-up\"\n ></s-button>\n </s-grid>\n <s-paragraph>\n Use this personalized guide to get your store ready for sales.\n </s-paragraph>\n <s-paragraph tone=\"subdued\">0 out of 3 steps completed</s-paragraph>\n </s-grid>\n <s-box borderRadius=\"base\" border=\"base\" background=\"base\">\n <s-box>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" padding=\"small\">\n <s-checkbox\n label=\"Upload an image for your puzzle\"\n ></s-checkbox>\n <s-button\n accessibilityLabel=\"Toggle step 1 details\"\n variant=\"tertiary\"\n icon=\"chevron-up\"\n ></s-button>\n </s-grid>\n <s-box padding=\"small\" paddingBlockStart=\"none\">\n <s-box padding=\"base\" background=\"subdued\" borderRadius=\"base\">\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" alignItems=\"center\">\n <s-grid gap=\"small-200\">\n <s-paragraph>\n Start by uploading a high-quality image that will be used to create your\n puzzle. For best results, use images that are at least 1200x1200 pixels.\n </s-paragraph>\n <s-stack direction=\"inline\" gap=\"small-200\">\n <s-button variant=\"primary\">\n Upload image\n </s-button>\n <s-button variant=\"tertiary\" tone=\"neutral\"> Image requirements </s-button>\n </s-stack>\n </s-grid>\n <s-box maxBlockSize=\"80px\" maxInlineSize=\"80px\">\n <s-image\n src=\"https://cdn.shopify.com/s/assets/admin/checkout/settings-customizecart-705f57c725ac05be5a34ec20c05b94298cb8afd10aac7bd9c7ad02030f48cfa0.svg\"\n alt=\"Customize checkout illustration\"\n ></s-image>\n </s-box>\n </s-grid>\n </s-box>\n </s-box>\n </s-box>\n <s-divider></s-divider>\n <s-box>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" padding=\"small\">\n <s-checkbox\n label=\"Choose a puzzle template\"\n ></s-checkbox>\n <s-button\n accessibilityLabel=\"Toggle step 2 details\"\n variant=\"tertiary\"\n icon=\"chevron-down\"\n ></s-button>\n </s-grid>\n <s-box padding=\"small\" paddingBlockStart=\"none\" style=\"display: none;\"></s-box>\n </s-box>\n <s-divider></s-divider>\n <s-box>\n <s-grid gridTemplateColumns=\"1fr auto\" gap=\"base\" padding=\"small\">\n <s-checkbox\n label=\"Customize puzzle piece shapes\"\n ></s-checkbox>\n <s-button\n accessibilityLabel=\"Toggle step 3 details\"\n variant=\"tertiary\"\n icon=\"chevron-down\"\n ></s-button>\n </s-grid>\n <s-box padding=\"small\" paddingBlockStart=\"none\" style=\"display: none;\"></s-box>\n </s-box>\n </s-box>\n </s-grid>\n</s-section>", - "language": "html" - }, - { - "code": " \n \n\n\n", - "language": "preview" - } - ] - } - }, - "related": [ - { - "name": "Built for Shopify", - "subtitle": "Requirements", - "url": "/docs/apps/launch/built-for-shopify/requirements", - "type": "component" - } - ] - } -] \ No newline at end of file diff --git a/packages/ui-extensions/docs/surfaces/admin/generated/app_home/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/admin/generated/app_home/generated_docs_data_v2.json index 71174d4454..3c67652d30 100644 --- a/packages/ui-extensions/docs/surfaces/admin/generated/app_home/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/admin/generated/app_home/generated_docs_data_v2.json @@ -179,6 +179,13 @@ "value": "RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >", "description": "A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options." }, + { + "filePath": "src/surfaces/admin/extension-targets.ts", + "syntaxKind": "PropertySignature", + "name": "admin.app.intent.render", + "value": "RenderExtension<\n IntentRenderApi<'admin.app.intent.render'>,\n FormExtensionComponents\n >", + "description": "Renders an admin extension for handling app intents." + }, { "filePath": "src/surfaces/admin/extension-targets.ts", "syntaxKind": "PropertySignature", @@ -706,7 +713,7 @@ "description": "A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules." } ], - "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n}" + "value": "export interface ExtensionTargets {\n /**\n * A runnable target that provides [customer segment templates](/docs/apps/build/marketing-analytics/customer-segments/build-a-template-extension) in the [customer segment editor](https://help.shopify.com/manual/customers/customer-segmentation/create-customer-segments). Use this target to provide pre-built segment templates that merchants can use as starting points for creating targeted customer groups based on custom criteria.\n */\n 'admin.customers.segmentation-templates.data': RunnableExtension<\n CustomerSegmentTemplateApi<'admin.customers.segmentation-templates.data'>,\n {templates: CustomerSegmentTemplate[]}\n >;\n\n // Blocks\n /**\n * A block target that displays inline content within the product details page. Use this to show product-specific information, tools, or actions directly on the product page.\n */\n 'admin.product-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the order details page. Use this to show order-specific information, fulfillment tools, or custom order actions.\n */\n 'admin.order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that appears when merchants create or edit a discount powered by your discount function, allowing them to configure function-specific settings. Use this to build custom configuration interfaces for discount function parameters.\n */\n 'admin.discount-details.function-settings.render': RenderExtension<\n DiscountFunctionSettingsApi<'admin.discount-details.function-settings.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A block target that displays inline content within the customer details page. Use this to show customer-specific information, loyalty data, or custom customer actions.\n */\n 'admin.customer-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.customer-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the collection details page. Use this to show collection analytics, bulk product operations, or collection-specific tools.\n */\n 'admin.collection-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.collection-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the draft order details page. Use this to show custom pricing calculations, special order handling tools, or order-specific information.\n */\n 'admin.draft-order-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.draft-order-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the abandoned checkout details page. Use this to show cart recovery tools, abandonment analysis, or customer re-engagement options.\n */\n 'admin.abandoned-checkout-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.abandoned-checkout-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the catalog details page. Use this to show catalog-specific settings, market information, or synchronization tools.\n */\n 'admin.catalog-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.catalog-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company details page. Use this to show B2B customer information, credit limits, or company-specific data.\n */\n 'admin.company-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the company location details page. Use this to show location-specific information, shipping preferences, or location management tools.\n */\n 'admin.company-location-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.company-location-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the gift card details page. Use this to show gift card balance tracking, usage history, or custom gift card metadata.\n */\n 'admin.gift-card-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.gift-card-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that displays inline content within the product variant details page. Use this to show variant-specific data, inventory tools, or variant configuration options.\n */\n 'admin.product-variant-details.block.render': RenderExtension<\n BlockExtensionApi<'admin.product-variant-details.block.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A block target that provides custom reordering functionality on the product details page. Use this to help merchants rearrange product data.\n */\n 'admin.product-details.reorder.render': RenderExtension<\n BlockExtensionApi<'admin.product-details.reorder.render'>,\n BlockExtensionComponents\n >;\n\n // Actions\n /**\n * An action target that appears in the **More actions** menu on the product details page. Use this to create workflows for processing products, syncing data, or integrating with external systems.\n */\n 'admin.product-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the catalog details page. Use this to create workflows for catalog management, market synchronization, or data exports.\n */\n 'admin.catalog-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.catalog-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the company details page. Use this to create workflows for B2B customer management, credit operations, or company data synchronization.\n */\n 'admin.company-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.company-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the gift card details page. Use this to create workflows for gift card processing, balance adjustments, or custom gift card operations.\n */\n 'admin.gift-card-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.gift-card-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order details page. Use this to create workflows for order processing, fulfillment operations, or external system integrations.\n */\n 'admin.order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer details page. Use this to create workflows for customer data management, loyalty operations, or CRM integrations.\n */\n 'admin.customer-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears from the **Use segment** button on the customer segment details page. Use this to create workflows for marketing campaigns, email operations, or segment-based actions.\n */\n 'admin.customer-segment-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-segment-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product index page. Use this to create workflows for product management, catalog operations, or inventory synchronization.\n */\n 'admin.product-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the order index page. Use this to create workflows for order management, reporting, or fulfillment operations.\n */\n 'admin.order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the customer index page. Use this to create workflows for customer management, marketing operations, or bulk data processing.\n */\n 'admin.customer-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page. Use this to create workflows for discount management, promotional operations, or bulk discount updates.\n */\n 'admin.discount-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection details page. Use this to create workflows for collection management, product operations, or merchandising tools.\n */\n 'admin.collection-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the collection index page. Use this to create workflows for collection management, bulk operations, or catalog organization.\n */\n 'admin.collection-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.collection-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the abandoned checkout details page. Use this to create workflows for cart recovery, customer engagement, or checkout analysis.\n */\n 'admin.abandoned-checkout-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.abandoned-checkout-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the product variant details page. Use this to create workflows for variant management, inventory operations, or data synchronization.\n */\n 'admin.product-variant-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.product-variant-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order details page. Use this to create workflows for draft order processing, custom pricing, or order preparation tools.\n */\n 'admin.draft-order-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the draft order index page. Use this to create workflows for draft order management, bulk operations, or order conversion tools.\n */\n 'admin.draft-order-index.action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount details page. Use this to create workflows for discount management, promotion analysis, or discount synchronization.\n */\n 'admin.discount-details.action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-details.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the actions menu inside the order fulfilled card, visible only on orders fulfilled by your app. Use this to create workflows for fulfillment operations, tracking updates, or post-fulfillment actions.\n */\n 'admin.order-fulfilled-card.action.render': RenderExtension<\n ActionExtensionApi<'admin.order-fulfilled-card.action.render'>,\n ActionExtensionComponents\n >;\n\n // Bulk Actions\n\n /**\n * A selection action target that appears in the **More actions** menu on the product index page when multiple products are selected. Use this to create workflows for bulk product operations, batch updates, or mass data processing.\n */\n 'admin.product-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.product-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the order index page when multiple orders are selected. Use this to create workflows for bulk order operations, batch fulfillment, or mass order processing.\n */\n 'admin.order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the customer index page when multiple customers are selected. Use this to create workflows for bulk customer operations, mass email campaigns, or batch data updates.\n */\n 'admin.customer-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.customer-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **More actions** menu on the discount index page when multiple discounts are selected. Use this to create workflows for bulk discount operations or batch data updates.\n */\n 'admin.discount-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.discount-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * A selection action target that appears in the **More actions** menu on the draft order index page when multiple draft orders are selected. Use this to create workflows for bulk draft order operations, batch conversions, or mass order processing.\n */\n 'admin.draft-order-index.selection-action.render': RenderExtension<\n ActionExtensionApi<'admin.draft-order-index.selection-action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product details page when a selling plan group is present. Use this to create workflows for subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n /**\n * An action target that appears in the **Purchase Options** card on the product variant details page when a selling plan group is present. Use this to create workflows for variant-specific subscription management, selling plan configuration, or purchase option operations.\n */\n 'admin.product-variant-purchase-option.action.render': RenderExtension<\n PurchaseOptionsCardConfigurationApi<'admin.product-variant-purchase-option.action.render'>,\n ActionExtensionComponents\n >;\n\n // Print actions and bulk print actions\n\n /**\n * A print action target that appears in the **Print** menu on the order details page. Use this to generate custom documents such as packing slips, shipping labels, or invoices.\n */\n 'admin.order-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product details page. Use this to generate custom documents such as product labels, barcode sheets, or specification sheets.\n */\n 'admin.product-details.print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-details.print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the order index page when multiple orders are selected. Use this to generate batch documents such as combined packing slips, shipping manifests, or bulk invoices.\n */\n 'admin.order-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.order-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n /**\n * A print action target that appears in the **Print** menu on the product index page when multiple products are selected. Use this to generate batch documents such as combined product labels, barcode sheets, or catalog pages.\n */\n 'admin.product-index.selection-print-action.render': RenderExtension<\n PrintActionExtensionApi<'admin.product-index.selection-print-action.render'>,\n PrintActionExtensionComponents\n >;\n\n // Other\n\n /**\n * A configuration target that renders product configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product details page. Use this to define bundle component selections, customization options, or product configuration rules.\n */\n 'admin.product-details.configuration.render': RenderExtension<\n ProductDetailsConfigurationApi<'admin.product-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A configuration target that renders product variant configuration settings for [product bundles](/docs/apps/build/product-merchandising/bundles/product-configuration-extension/add-merchant-config-ui) and customizable products on the product variant details page. Use this to define variant-specific bundle components, customization options, or configuration rules.\n */\n 'admin.product-variant-details.configuration.render': RenderExtension<\n ProductVariantDetailsConfigurationApi<'admin.product-variant-details.configuration.render'>,\n BlockExtensionComponents\n >;\n\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions.\n * @private\n */\n 'admin.settings.internal-order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.internal-order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n /**\n * A function settings target that renders within order routing settings, allowing merchants to configure order routing rule functions. Use this to build custom configuration interfaces for order routing function parameters.\n */\n 'admin.settings.order-routing-rule.render': RenderExtension<\n OrderRoutingRuleApi<'admin.settings.order-routing-rule.render'>,\n FunctionSettingsComponents\n >;\n\n /**\n * A function settings target that renders within a validation's add and edit views, allowing merchants to configure validation function settings. Use this to build custom configuration interfaces for validation function parameters and rules.\n */\n 'admin.settings.validation.render': RenderExtension<\n ValidationSettingsApi<'admin.settings.validation.render'>,\n FunctionSettingsComponents\n >;\n\n // Admin action shouldRender targets\n /**\n * A non-rendering target that controls whether the product details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the catalog details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on catalog properties, user permissions, or external data.\n */\n 'admin.catalog-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.catalog-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the company details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on company properties, user permissions, or external data.\n */\n 'admin.company-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.company-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the gift card details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on gift card properties, user permissions, or external data.\n */\n 'admin.gift-card-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.gift-card-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on order properties, fulfillment status, or external data.\n */\n 'admin.order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on customer properties, user permissions, or external data.\n */\n 'admin.customer-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer segment details action appears from the **Use segment** button. Use this to conditionally show or hide your action based on segment properties, user permissions, or external data.\n */\n 'admin.customer-segment-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-segment-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.product-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.customer-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.discount-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on collection properties, user permissions, or external data.\n */\n 'admin.collection-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the collection index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.collection-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.collection-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the abandoned checkout details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on checkout properties, user permissions, or external data.\n */\n 'admin.abandoned-checkout-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.abandoned-checkout-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product variant details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on variant properties, user permissions, or external data.\n */\n 'admin.product-variant-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-variant-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on draft order properties, user permissions, or external data.\n */\n 'admin.draft-order-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index action appears in the **More actions** menu. Use this to conditionally show or hide your action based on user permissions, store configuration, or external data.\n */\n 'admin.draft-order-index.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount details action appears in the **More actions** menu. Use this to conditionally show or hide your action based on discount properties, user permissions, or external data.\n */\n 'admin.discount-details.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-details.action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order fulfilled card action appears in the actions menu. Use this to conditionally show or hide your action based on fulfillment properties, user permissions, or external data.\n */\n 'admin.order-fulfilled-card.action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-fulfilled-card.action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin bulk action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the product index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the customer index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.customer-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.customer-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the discount index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.discount-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.discount-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the draft order index selection action appears in the **More actions** menu. Use this to conditionally show or hide your bulk action based on selection criteria, user permissions, or external data.\n */\n 'admin.draft-order-index.selection-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.draft-order-index.selection-action.should-render'>,\n ShouldRenderOutput\n >;\n\n // Admin print action and bulk print action shouldRender targets\n\n /**\n * A non-rendering target that controls whether the order details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on order properties, user permissions, or external data.\n */\n 'admin.order-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product details print action appears in the **Print** menu. Use this to conditionally show or hide your print action based on product properties, user permissions, or external data.\n */\n 'admin.product-details.print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-details.print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the order index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.order-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.order-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A non-rendering target that controls whether the product index selection print action appears in the **Print** menu. Use this to conditionally show or hide your bulk print action based on selection criteria, user permissions, or external data.\n */\n 'admin.product-index.selection-print-action.should-render': RunnableExtension<\n ShouldRenderApi<'admin.product-index.selection-print-action.should-render'>,\n ShouldRenderOutput\n >;\n\n /**\n * A runnable target that enables your app to expose data to [Sidekick](/docs/apps/build/sidekick/build-app-data). Use this target to register tools that Sidekick can invoke to search your app's data and answer merchant questions.\n */\n 'admin.app.tools.data': RunnableExtension<\n StandardApi<'admin.app.tools.data'>,\n undefined\n >;\n\n /**\n * Renders an admin extension for handling app intents.\n */\n 'admin.app.intent.render': RenderExtension<\n IntentRenderApi<'admin.app.intent.render'>,\n FormExtensionComponents\n >;\n}" } }, "RenderExtension": { @@ -917,9 +924,17 @@ "value": "string | URL", "description": "The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.", "isOptional": true + }, + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "PropertySignature", + "name": "response", + "value": "IntentResponseApi", + "description": "Resolves the current intent from within an invoked extension. This property is only present when your extension is running inside an intent workflow.", + "isOptional": true } ], - "value": "export interface Intents {\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" + "value": "export interface Intents {\n /**\n * Resolves the current intent from within an invoked extension. This property is only present when your extension is running inside an intent workflow.\n */\n response?: IntentResponseApi;\n\n /**\n * The URL that launched the current intent workflow, if your extension was opened through an intent. Use this to determine how your extension was invoked and access any parameters passed in the URL.\n */\n launchUrl?: string | URL;\n /**\n * Launches an intent workflow for creating or editing Shopify resources. Returns a handle that resolves when the merchant completes, cancels, or encounters an error in the workflow. Use this to initiate resource creation or editing without building custom forms.\n */\n invoke?: IntentInvokeApi;\n}" } }, "IntentInvokeApi": { @@ -932,6 +947,71 @@ "value": "export interface IntentInvokeApi {\n (query: IntentQuery): Promise;\n (intentURL: string, options?: IntentQueryOptions): Promise;\n}" } }, + "IntentResponseApi": { + "src/surfaces/admin/api/intents/intents.ts": { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "name": "IntentResponseApi", + "description": "The `IntentResponseApi` object provides methods for resolving the current intent from within an invoked extension. This API is only present when your extension is running inside an intent workflow.", + "members": [ + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "MethodSignature", + "name": "closed", + "value": "() => Promise", + "description": "Resolves the current intent as closed without completing the workflow." + }, + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "MethodSignature", + "name": "error", + "value": "(message: string, issues?: Issue[]) => Promise", + "description": "Resolves the current intent with an error. Use `issues` to provide field-specific validation details when available." + }, + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "MethodSignature", + "name": "ok", + "value": "(data?: { [key: string]: unknown; }) => Promise", + "description": "Resolves the current intent successfully. Pass output data when your intent defines a response schema." + } + ], + "value": "export interface IntentResponseApi {\n /**\n * Resolves the current intent successfully. Pass output data when your intent defines a response schema.\n */\n ok(data?: SuccessIntentResponse['data']): Promise;\n\n /**\n * Resolves the current intent with an error. Use `issues` to provide field-specific validation details when available.\n */\n error(message: string, issues?: Issue[]): Promise;\n\n /**\n * Resolves the current intent as closed without completing the workflow.\n */\n closed(): Promise;\n}" + } + }, + "Issue": { + "src/surfaces/admin/api/intents/intents.ts": { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "name": "Issue", + "description": "A structured issue describing a validation or workflow error.", + "members": [ + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "PropertySignature", + "name": "code", + "value": "string", + "description": "A machine-readable error code for this issue. Use this for programmatic error handling or logging.", + "isOptional": true + }, + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "PropertySignature", + "name": "message", + "value": "string", + "description": "A description of what's wrong with this field. Display this to help merchants understand how to fix the error.", + "isOptional": true + }, + { + "filePath": "src/surfaces/admin/api/intents/intents.ts", + "syntaxKind": "PropertySignature", + "name": "path", + "value": "string[]", + "description": "The path to the field that has an error (for example, `['product', 'title']`). Use this to identify which field caused the validation failure.", + "isOptional": true + } + ], + "value": "export interface Issue {\n /** The path to the field that has an error (for example, `['product', 'title']`). Use this to identify which field caused the validation failure. */\n path?: string[];\n /** A description of what's wrong with this field. Display this to help merchants understand how to fix the error. */\n message?: string;\n /** A machine-readable error code for this issue. Use this for programmatic error handling or logging. */\n code?: string;\n}" + } + }, "PickerApi": { "src/surfaces/admin/api/picker/picker.ts": { "filePath": "src/surfaces/admin/api/picker/picker.ts", @@ -1242,7 +1322,7 @@ "syntaxKind": "PropertySignature", "name": "query", "value": "string", - "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", + "description": "An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.", "isOptional": true, "defaultValue": "''" }, @@ -1263,7 +1343,7 @@ "description": "The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned." } ], - "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" + "value": "export interface ResourcePickerOptions {\n /**\n * The type of Shopify resource to select: `'product'` for products, `'variant'` for specific product variants, or `'collection'` for collections. This determines what appears in the picker and what data structure is returned.\n */\n type: 'product' | 'variant' | 'collection';\n /**\n * The action verb that appears in the picker's title and primary button. Use `'add'` for actions that add new items (for example, \"Add products\") or `'select'` for choosing existing items (for example, \"Select products\"). This helps merchants understand the picker's purpose.\n * @defaultValue 'add'\n */\n action?: 'add' | 'select';\n /**\n * Filtering options that control which resources appear in the picker. Use filters to restrict resources by publication status, include or exclude variants, or apply custom search criteria. This helps merchants find relevant items faster.\n */\n filter?: Filters;\n /**\n * The selection mode for the picker. Pass `true` to allow unlimited selections, `false` for single-item selection only, or a number to set a maximum selection limit (for example, `5` allows up to five items). When `type` is `'product'`, merchants can still select multiple variants from a single product even if `multiple` is `false`.\n * @defaultValue false\n */\n multiple?: boolean | number;\n /**\n * An initial search query that appears in the picker's search bar when it opens. Merchants can see and edit this query. See [search syntax](/docs/api/usage/search-syntax) for the query format. For most use cases, use `filter.query` instead, which filters results without exposing the query to merchants.\n * @defaultValue ''\n */\n query?: string;\n /**\n * Resources that should be preselected when the picker opens. Pass an array of resource objects with IDs (and optional variant IDs) to show which items are already selected. Merchants can deselect these preselected items. Use this to show current selections or default choices.\n * @defaultValue []\n */\n selectionIds?: BaseResource[];\n}" } }, "Filters": { @@ -1305,7 +1385,7 @@ "syntaxKind": "PropertySignature", "name": "query", "value": "string", - "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", + "description": "A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).", "isOptional": true }, { @@ -1318,7 +1398,7 @@ "defaultValue": "true" } ], - "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](https://shopify.dev/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" + "value": "export interface Filters {\n /**\n * Whether to include products that aren't published on any sales channels. When `false`, only products published to at least one sales channel appear in the picker. Use this to ensure merchants only select products that customers can purchase.\n * @defaultValue true\n */\n hidden?: boolean;\n /**\n * Whether to show product variants in the picker. When `false`, merchants can only select products, not individual variants. Only applies when `type` is `'product'`. Use this to simplify selection when you only need product-level data.\n * @defaultValue true\n */\n variants?: boolean;\n /**\n * Whether to include draft products in the picker. When `false`, draft products are hidden. When `undefined`, draft products appear with a draft badge. Only applies when `type` is `'product'`. Use this to prevent selecting products that aren't ready for use.\n * @defaultValue true\n */\n draft?: boolean | undefined;\n /**\n * Whether to include archived products in the picker. When `false`, archived products are hidden. When `undefined`, archived products appear with an archived badge. Only applies when `type` is `'product'`. Use this to prevent selecting discontinued products.\n * @defaultValue true\n */\n archived?: boolean | undefined;\n /**\n * A GraphQL search query that filters the available resources without showing the query in the picker's search bar. Merchants won't see or edit this filter. See [search syntax](/docs/api/usage/search-syntax) for the query format. Use this to programmatically restrict resources based on attributes like tags, vendor, or product type (for example, `\"tag:featured\"` or `\"vendor:Acme\"`).\n */\n query?: string;\n}" } }, "BaseResource": { @@ -1565,7 +1645,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", + "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | ... 541 more ... | \"x-circle-filled\"", "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." }, { @@ -2192,7 +2272,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", + "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | ... 541 more ... | \"x-circle-filled\"", "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." }, { @@ -2544,7 +2624,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -2889,7 +2969,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$3@6858", + "name": "__@internals$3@2303", "value": "ElementInternals", "description": "", "isPrivate": true @@ -3571,7 +3651,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -3674,7 +3754,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$2@6959", + "name": "__@internals$2@2404", "value": "ElementInternals", "description": "", "isPrivate": true @@ -3933,7 +4013,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -4095,7 +4175,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@dirtyStateSymbol@7003", + "name": "__@dirtyStateSymbol@2448", "value": "boolean", "description": "", "isPrivate": true @@ -4103,7 +4183,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$1@7002", + "name": "__@internals$1@2447", "value": "ElementInternals", "description": "", "isPrivate": true @@ -4270,7 +4350,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "MethodDeclaration", - "name": "__@setFiles@7038", + "name": "__@setFiles@2483", "value": "(files: File[]) => void", "description": "", "isPrivate": true @@ -4278,7 +4358,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "MethodDeclaration", - "name": "__@getFileInput@7040", + "name": "__@getFileInput@2485", "value": "() => HTMLInputElement", "description": "", "isPrivate": true @@ -4286,7 +4366,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals@7039", + "name": "__@internals@2484", "value": "ElementInternals", "description": "", "isPrivate": true @@ -4445,7 +4525,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"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\" | `section-${string} shipping email` | `section-${string} shipping home email` | `section-${string} shipping mobile email` | `section-${string} shipping fax email` | `section-${string} shipping pager email` | `section-${string} billing email` | `section-${string} billing home email` | `section-${string} billing mobile email` | `section-${string} billing fax email` | `section-${string} billing pager email`", + "value": "\"on\" | \"off\" | EmailAutocompleteField | `section-${string} email` | `section-${string} home email` | `section-${string} mobile email` | `section-${string} fax email` | `section-${string} pager email` | \"shipping email\" | \"shipping home email\" | \"shipping mobile email\" | ... 16 more ... | `section-${string} billing p...", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -4596,7 +4676,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -4706,7 +4786,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "placeItems", - "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch baseline\" | \"stretch first baseline\" | \"stretch last baseline\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline baseline\" | \"baseline first baseline\" | \"baseline last baseline\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline baseline\" | \"first baseline first baseline\" | \"first baseline last baseline\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline baseline\" | \"last baseline first baseline\" | \"last baseline last baseline\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start baseline\" | \"start first baseline\" | \"start last baseline\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end baseline\" | \"end first baseline\" | \"end last baseline\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center baseline\" | \"center first baseline\" | \"center last baseline\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start baseline\" | \"unsafe start first baseline\" | \"unsafe start last baseline\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end baseline\" | \"unsafe end first baseline\" | \"unsafe end last baseline\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center baseline\" | \"unsafe center first baseline\" | \"unsafe center last baseline\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start baseline\" | \"safe start first baseline\" | \"safe start last baseline\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end baseline\" | \"safe end first baseline\" | \"safe end last baseline\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center baseline\" | \"safe center first baseline\" | \"safe center last baseline\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\"", + "value": "AlignItemsKeyword | \"normal normal\" | \"normal stretch\" | \"normal baseline\" | \"normal first baseline\" | \"normal last baseline\" | \"normal start\" | \"normal end\" | ... 188 more ... | \"safe center safe center\"", "description": "A shorthand property for `justify-items` and `align-items`.", "defaultValue": "'normal normal'" }, @@ -4730,7 +4810,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "placeContent", - "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | \"normal safe end\" | \"normal safe center\" | \"stretch normal\" | \"stretch stretch\" | \"stretch start\" | \"stretch end\" | \"stretch center\" | \"stretch unsafe start\" | \"stretch unsafe end\" | \"stretch unsafe center\" | \"stretch safe start\" | \"stretch safe end\" | \"stretch safe center\" | \"baseline normal\" | \"baseline stretch\" | \"baseline start\" | \"baseline end\" | \"baseline center\" | \"baseline unsafe start\" | \"baseline unsafe end\" | \"baseline unsafe center\" | \"baseline safe start\" | \"baseline safe end\" | \"baseline safe center\" | \"first baseline normal\" | \"first baseline stretch\" | \"first baseline start\" | \"first baseline end\" | \"first baseline center\" | \"first baseline unsafe start\" | \"first baseline unsafe end\" | \"first baseline unsafe center\" | \"first baseline safe start\" | \"first baseline safe end\" | \"first baseline safe center\" | \"last baseline normal\" | \"last baseline stretch\" | \"last baseline start\" | \"last baseline end\" | \"last baseline center\" | \"last baseline unsafe start\" | \"last baseline unsafe end\" | \"last baseline unsafe center\" | \"last baseline safe start\" | \"last baseline safe end\" | \"last baseline safe center\" | \"start normal\" | \"start stretch\" | \"start start\" | \"start end\" | \"start center\" | \"start unsafe start\" | \"start unsafe end\" | \"start unsafe center\" | \"start safe start\" | \"start safe end\" | \"start safe center\" | \"end normal\" | \"end stretch\" | \"end start\" | \"end end\" | \"end center\" | \"end unsafe start\" | \"end unsafe end\" | \"end unsafe center\" | \"end safe start\" | \"end safe end\" | \"end safe center\" | \"center normal\" | \"center stretch\" | \"center start\" | \"center end\" | \"center center\" | \"center unsafe start\" | \"center unsafe end\" | \"center unsafe center\" | \"center safe start\" | \"center safe end\" | \"center safe center\" | \"unsafe start normal\" | \"unsafe start stretch\" | \"unsafe start start\" | \"unsafe start end\" | \"unsafe start center\" | \"unsafe start unsafe start\" | \"unsafe start unsafe end\" | \"unsafe start unsafe center\" | \"unsafe start safe start\" | \"unsafe start safe end\" | \"unsafe start safe center\" | \"unsafe end normal\" | \"unsafe end stretch\" | \"unsafe end start\" | \"unsafe end end\" | \"unsafe end center\" | \"unsafe end unsafe start\" | \"unsafe end unsafe end\" | \"unsafe end unsafe center\" | \"unsafe end safe start\" | \"unsafe end safe end\" | \"unsafe end safe center\" | \"unsafe center normal\" | \"unsafe center stretch\" | \"unsafe center start\" | \"unsafe center end\" | \"unsafe center center\" | \"unsafe center unsafe start\" | \"unsafe center unsafe end\" | \"unsafe center unsafe center\" | \"unsafe center safe start\" | \"unsafe center safe end\" | \"unsafe center safe center\" | \"safe start normal\" | \"safe start stretch\" | \"safe start start\" | \"safe start end\" | \"safe start center\" | \"safe start unsafe start\" | \"safe start unsafe end\" | \"safe start unsafe center\" | \"safe start safe start\" | \"safe start safe end\" | \"safe start safe center\" | \"safe end normal\" | \"safe end stretch\" | \"safe end start\" | \"safe end end\" | \"safe end center\" | \"safe end unsafe start\" | \"safe end unsafe end\" | \"safe end unsafe center\" | \"safe end safe start\" | \"safe end safe end\" | \"safe end safe center\" | \"safe center normal\" | \"safe center stretch\" | \"safe center start\" | \"safe center end\" | \"safe center center\" | \"safe center unsafe start\" | \"safe center unsafe end\" | \"safe center unsafe center\" | \"safe center safe start\" | \"safe center safe end\" | \"safe center safe center\" | AlignContentKeyword | \"normal space-between\" | \"normal space-around\" | \"normal space-evenly\" | \"baseline space-between\" | \"baseline space-around\" | \"baseline space-evenly\" | \"first baseline space-between\" | \"first baseline space-around\" | \"first baseline space-evenly\" | \"last baseline space-between\" | \"last baseline space-around\" | \"last baseline space-evenly\" | \"start space-between\" | \"start space-around\" | \"start space-evenly\" | \"end space-between\" | \"end space-around\" | \"end space-evenly\" | \"center space-between\" | \"center space-around\" | \"center space-evenly\" | \"unsafe start space-between\" | \"unsafe start space-around\" | \"unsafe start space-evenly\" | \"unsafe end space-between\" | \"unsafe end space-around\" | \"unsafe end space-evenly\" | \"unsafe center space-between\" | \"unsafe center space-around\" | \"unsafe center space-evenly\" | \"safe start space-between\" | \"safe start space-around\" | \"safe start space-evenly\" | \"safe end space-between\" | \"safe end space-around\" | \"safe end space-evenly\" | \"safe center space-between\" | \"safe center space-around\" | \"safe center space-evenly\" | \"stretch space-between\" | \"stretch space-around\" | \"stretch space-evenly\" | \"space-between normal\" | \"space-between start\" | \"space-between end\" | \"space-between center\" | \"space-between unsafe start\" | \"space-between unsafe end\" | \"space-between unsafe center\" | \"space-between safe start\" | \"space-between safe end\" | \"space-between safe center\" | \"space-between stretch\" | \"space-between space-between\" | \"space-between space-around\" | \"space-between space-evenly\" | \"space-around normal\" | \"space-around start\" | \"space-around end\" | \"space-around center\" | \"space-around unsafe start\" | \"space-around unsafe end\" | \"space-around unsafe center\" | \"space-around safe start\" | \"space-around safe end\" | \"space-around safe center\" | \"space-around stretch\" | \"space-around space-between\" | \"space-around space-around\" | \"space-around space-evenly\" | \"space-evenly normal\" | \"space-evenly start\" | \"space-evenly end\" | \"space-evenly center\" | \"space-evenly unsafe start\" | \"space-evenly unsafe end\" | \"space-evenly unsafe center\" | \"space-evenly safe start\" | \"space-evenly safe end\" | \"space-evenly safe center\" | \"space-evenly stretch\" | \"space-evenly space-between\" | \"space-evenly space-around\" | \"space-evenly space-evenly\"", + "value": "\"normal normal\" | \"normal stretch\" | \"normal start\" | \"normal end\" | \"normal center\" | \"normal unsafe start\" | \"normal unsafe end\" | \"normal unsafe center\" | \"normal safe start\" | ... 229 more ... | \"space-evenly space-evenly\"", "description": "A shorthand property for `justify-content` and `align-content`.", "defaultValue": "'normal normal'" }, @@ -5515,7 +5595,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "type", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", + "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | ... 541 more ... | \"x-circle-filled\"", "description": "The icon to display from the icon library.\n\nSet 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'`." }, { @@ -6014,7 +6094,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@7174", + "name": "__@overlayHidden@2619", "value": "boolean", "description": "", "isPrivate": true @@ -6022,7 +6102,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@7175", + "name": "__@overlayActivator@2620", "value": "HTMLElement", "description": "", "isPrivate": true @@ -6030,7 +6110,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@7176", + "name": "__@overlayHideFrameId@2621", "value": "number", "description": "", "isPrivate": true @@ -6241,7 +6321,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -6364,7 +6444,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | \"billing cc-number\" | \"billing cc-csc\" | `section-${string} shipping one-time-code` | `section-${string} shipping cc-number` | `section-${string} shipping cc-csc` | `section-${string} billing one-time-code` | `section-${string} billing cc-number` | `section-${string} billing cc-csc`", + "value": "\"on\" | \"off\" | NumberAutocompleteField | `section-${string} one-time-code` | `section-${string} cc-number` | `section-${string} cc-csc` | \"shipping one-time-code\" | \"shipping cc-number\" | \"shipping cc-csc\" | \"billing one-time-code\" | ... 7 more ... | `section-${string} billing cc-csc`", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -6492,7 +6572,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -7083,7 +7163,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -7259,7 +7339,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", + "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | ... 141...", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -7387,7 +7467,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -7554,7 +7634,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "icon", - "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\"", + "value": "\"\" | \"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | ... 541 more ... | \"x-circle-filled\"", "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier." }, { @@ -7635,7 +7715,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@usedFirstOptionSymbol@7453", + "name": "__@usedFirstOptionSymbol@2898", "value": "boolean", "description": "A flag used to determine if no value or defaultValue was set, in which case the first non-disabled option was used.\n\nThis is important because we need to use the placeholder in these situations, even though the first value will be submitted as part of the form.", "isPrivate": true @@ -7643,7 +7723,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@hasInitialValueSymbol@7454", + "name": "__@hasInitialValueSymbol@2899", "value": "boolean", "description": "", "isPrivate": true @@ -7673,7 +7753,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -8237,7 +8317,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -8352,7 +8432,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@actualTableVariantSymbol@7529", + "name": "__@actualTableVariantSymbol@2974", "value": "AddedContext", "description": "", "isPrivate": true @@ -8360,7 +8440,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@tableHeadersSharedDataSymbol@7530", + "name": "__@tableHeadersSharedDataSymbol@2975", "value": "AddedContext<{ listSlot: ListSlotType; textContent: string; format: HeaderFormat; }[]>", "description": "", "isPrivate": true @@ -8570,7 +8650,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "GetAccessor", - "name": "__@headerFormatSymbol@7552", + "name": "__@headerFormatSymbol@2997", "value": "HeaderFormat", "description": "", "isPrivate": true @@ -9022,7 +9102,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", + "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | ... 141...", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -9150,7 +9230,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -9218,7 +9298,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "icon", - "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | \"adjust\" | \"affiliate\" | \"airplane\" | \"alert-bubble\" | \"alert-circle\" | \"alert-diamond\" | \"alert-location\" | \"alert-octagon\" | \"alert-octagon-filled\" | \"alert-triangle\" | \"alert-triangle-filled\" | \"app-extension\" | \"apps\" | \"archive\" | \"arrow-down\" | \"arrow-down-circle\" | \"arrow-down-right\" | \"arrow-left\" | \"arrow-left-circle\" | \"arrow-right\" | \"arrow-right-circle\" | \"arrow-up\" | \"arrow-up-circle\" | \"arrow-up-right\" | \"arrows-in-horizontal\" | \"arrows-out-horizontal\" | \"asterisk\" | \"attachment\" | \"automation\" | \"backspace\" | \"bag\" | \"bank\" | \"barcode\" | \"battery-low\" | \"bill\" | \"blank\" | \"blog\" | \"bolt\" | \"bolt-filled\" | \"book\" | \"book-open\" | \"bug\" | \"bullet\" | \"business-entity\" | \"button\" | \"button-press\" | \"calculator\" | \"calendar\" | \"calendar-check\" | \"calendar-compare\" | \"calendar-list\" | \"calendar-time\" | \"camera\" | \"camera-flip\" | \"caret-down\" | \"caret-left\" | \"caret-right\" | \"caret-up\" | \"cart\" | \"cart-abandoned\" | \"cart-discount\" | \"cart-down\" | \"cart-filled\" | \"cart-sale\" | \"cart-send\" | \"cart-up\" | \"cash-dollar\" | \"cash-euro\" | \"cash-pound\" | \"cash-rupee\" | \"cash-yen\" | \"catalog-product\" | \"categories\" | \"channels\" | \"chart-cohort\" | \"chart-donut\" | \"chart-funnel\" | \"chart-histogram-first\" | \"chart-histogram-first-last\" | \"chart-histogram-flat\" | \"chart-histogram-full\" | \"chart-histogram-growth\" | \"chart-histogram-last\" | \"chart-histogram-second-last\" | \"chart-horizontal\" | \"chart-line\" | \"chart-popular\" | \"chart-stacked\" | \"chart-vertical\" | \"chat\" | \"chat-new\" | \"chat-referral\" | \"check\" | \"check-circle\" | \"check-circle-filled\" | \"checkbox\" | \"chevron-down\" | \"chevron-down-circle\" | \"chevron-left\" | \"chevron-left-circle\" | \"chevron-right\" | \"chevron-right-circle\" | \"chevron-up\" | \"chevron-up-circle\" | \"circle\" | \"circle-dashed\" | \"clipboard\" | \"clipboard-check\" | \"clipboard-checklist\" | \"clock\" | \"clock-list\" | \"clock-revert\" | \"code-add\" | \"collection-featured\" | \"collection-list\" | \"collection-reference\" | \"color-none\" | \"compass\" | \"compose\" | \"confetti\" | \"connect\" | \"content\" | \"contract\" | \"corner-pill\" | \"corner-round\" | \"corner-square\" | \"credit-card\" | \"credit-card-cancel\" | \"credit-card-percent\" | \"credit-card-reader\" | \"credit-card-reader-chip\" | \"credit-card-reader-tap\" | \"credit-card-secure\" | \"credit-card-tap-chip\" | \"crop\" | \"currency-convert\" | \"cursor\" | \"cursor-banner\" | \"cursor-option\" | \"data-presentation\" | \"data-table\" | \"database\" | \"database-add\" | \"database-connect\" | \"delete\" | \"delivered\" | \"delivery\" | \"desktop\" | \"disabled\" | \"disabled-filled\" | \"discount\" | \"discount-add\" | \"discount-automatic\" | \"discount-code\" | \"discount-remove\" | \"dns-settings\" | \"dock-floating\" | \"dock-side\" | \"domain\" | \"domain-landing-page\" | \"domain-new\" | \"domain-redirect\" | \"download\" | \"drag-drop\" | \"drag-handle\" | \"drawer\" | \"duplicate\" | \"email\" | \"email-follow-up\" | \"email-newsletter\" | \"empty\" | \"enabled\" | \"enter\" | \"envelope\" | \"envelope-soft-pack\" | \"eraser\" | \"exchange\" | \"exit\" | \"export\" | \"external\" | \"eye-check-mark\" | \"eye-dropper\" | \"eye-dropper-list\" | \"eye-first\" | \"eyeglasses\" | \"fav\" | \"favicon\" | \"file\" | \"file-list\" | \"filter\" | \"filter-active\" | \"flag\" | \"flip-horizontal\" | \"flip-vertical\" | \"flower\" | \"folder\" | \"folder-add\" | \"folder-down\" | \"folder-remove\" | \"folder-up\" | \"food\" | \"foreground\" | \"forklift\" | \"forms\" | \"games\" | \"gauge\" | \"geolocation\" | \"gift\" | \"gift-card\" | \"git-branch\" | \"git-commit\" | \"git-repository\" | \"globe\" | \"globe-asia\" | \"globe-europe\" | \"globe-lines\" | \"globe-list\" | \"graduation-hat\" | \"grid\" | \"hashtag\" | \"hashtag-decimal\" | \"hashtag-list\" | \"heart\" | \"hide\" | \"hide-filled\" | \"home\" | \"home-filled\" | \"icons\" | \"identity-card\" | \"image\" | \"image-add\" | \"image-alt\" | \"image-explore\" | \"image-magic\" | \"image-none\" | \"image-with-text-overlay\" | \"images\" | \"import\" | \"in-progress\" | \"incentive\" | \"incoming\" | \"info-filled\" | \"inheritance\" | \"inventory\" | \"inventory-edit\" | \"inventory-list\" | \"inventory-transfer\" | \"inventory-updated\" | \"iq\" | \"key\" | \"keyboard\" | \"keyboard-filled\" | \"keyboard-hide\" | \"keypad\" | \"label-printer\" | \"language\" | \"language-translate\" | \"layout-block\" | \"layout-buy-button\" | \"layout-buy-button-horizontal\" | \"layout-buy-button-vertical\" | \"layout-column-1\" | \"layout-columns-2\" | \"layout-columns-3\" | \"layout-footer\" | \"layout-header\" | \"layout-logo-block\" | \"layout-popup\" | \"layout-rows-2\" | \"layout-section\" | \"layout-sidebar-left\" | \"layout-sidebar-right\" | \"lightbulb\" | \"link-list\" | \"list-bulleted\" | \"list-bulleted-filled\" | \"list-numbered\" | \"live\" | \"live-critical\" | \"live-none\" | \"location\" | \"location-none\" | \"lock\" | \"map\" | \"markets\" | \"markets-euro\" | \"markets-rupee\" | \"markets-yen\" | \"maximize\" | \"measurement-size\" | \"measurement-size-list\" | \"measurement-volume\" | \"measurement-volume-list\" | \"measurement-weight\" | \"measurement-weight-list\" | \"media-receiver\" | \"megaphone\" | \"mention\" | \"menu\" | \"menu-filled\" | \"menu-horizontal\" | \"menu-vertical\" | \"merge\" | \"metafields\" | \"metaobject\" | \"metaobject-list\" | \"metaobject-reference\" | \"microphone\" | \"microphone-muted\" | \"minimize\" | \"minus\" | \"minus-circle\" | \"mobile\" | \"money-none\" | \"money-split\" | \"moon\" | \"nature\" | \"note\" | \"note-add\" | \"notification\" | \"number-one\" | \"order-batches\" | \"order-draft\" | \"order-filled\" | \"order-first\" | \"order-fulfilled\" | \"order-repeat\" | \"order-unfulfilled\" | \"orders-status\" | \"organization\" | \"outdent\" | \"outgoing\" | \"package\" | \"package-cancel\" | \"package-fulfilled\" | \"package-on-hold\" | \"package-reassign\" | \"package-returned\" | \"page\" | \"page-add\" | \"page-attachment\" | \"page-clock\" | \"page-down\" | \"page-heart\" | \"page-list\" | \"page-reference\" | \"page-remove\" | \"page-report\" | \"page-up\" | \"pagination-end\" | \"pagination-start\" | \"paint-brush-flat\" | \"paint-brush-round\" | \"paper-check\" | \"partially-complete\" | \"passkey\" | \"paste\" | \"pause-circle\" | \"payment\" | \"payment-capture\" | \"payout\" | \"payout-dollar\" | \"payout-euro\" | \"payout-pound\" | \"payout-rupee\" | \"payout-yen\" | \"person\" | \"person-add\" | \"person-exit\" | \"person-filled\" | \"person-list\" | \"person-lock\" | \"person-remove\" | \"person-segment\" | \"personalized-text\" | \"phablet\" | \"phone\" | \"phone-down\" | \"phone-down-filled\" | \"phone-in\" | \"phone-out\" | \"pin\" | \"pin-remove\" | \"plan\" | \"play\" | \"play-circle\" | \"plus\" | \"plus-circle\" | \"plus-circle-down\" | \"plus-circle-filled\" | \"plus-circle-up\" | \"point-of-sale\" | \"point-of-sale-register\" | \"price-list\" | \"print\" | \"product-add\" | \"product-cost\" | \"product-filled\" | \"product-list\" | \"product-reference\" | \"product-remove\" | \"product-return\" | \"product-unavailable\" | \"profile\" | \"profile-filled\" | \"question-circle\" | \"question-circle-filled\" | \"radio-control\" | \"receipt\" | \"receipt-dollar\" | \"receipt-euro\" | \"receipt-folded\" | \"receipt-paid\" | \"receipt-pound\" | \"receipt-refund\" | \"receipt-rupee\" | \"receipt-yen\" | \"receivables\" | \"redo\" | \"referral-code\" | \"refresh\" | \"remove-background\" | \"reorder\" | \"replay\" | \"reset\" | \"return\" | \"reward\" | \"rocket\" | \"rotate-left\" | \"rotate-right\" | \"sandbox\" | \"save\" | \"savings\" | \"scan-qr-code\" | \"search-add\" | \"search-list\" | \"search-recent\" | \"search-resource\" | \"send\" | \"settings\" | \"share\" | \"shield-check-mark\" | \"shield-none\" | \"shield-pending\" | \"shield-person\" | \"shipping-label\" | \"shipping-label-cancel\" | \"shopcodes\" | \"slideshow\" | \"smiley-happy\" | \"smiley-joy\" | \"smiley-neutral\" | \"smiley-sad\" | \"social-ad\" | \"social-post\" | \"sort\" | \"sort-ascending\" | \"sort-descending\" | \"sound\" | \"sports\" | \"star\" | \"star-circle\" | \"star-filled\" | \"star-half\" | \"star-list\" | \"status\" | \"status-active\" | \"stop-circle\" | \"store\" | \"store-import\" | \"store-managed\" | \"store-online\" | \"sun\" | \"table\" | \"table-masonry\" | \"tablet\" | \"target\" | \"tax\" | \"team\" | \"text\" | \"text-align-center\" | \"text-align-left\" | \"text-align-right\" | \"text-block\" | \"text-bold\" | \"text-color\" | \"text-font\" | \"text-font-list\" | \"text-grammar\" | \"text-in-columns\" | \"text-in-rows\" | \"text-indent\" | \"text-indent-remove\" | \"text-italic\" | \"text-quote\" | \"text-title\" | \"text-underline\" | \"text-with-image\" | \"theme\" | \"theme-edit\" | \"theme-store\" | \"theme-template\" | \"three-d-environment\" | \"thumbs-down\" | \"thumbs-up\" | \"tip-jar\" | \"toggle-off\" | \"toggle-on\" | \"transaction\" | \"transaction-fee-add\" | \"transaction-fee-dollar\" | \"transaction-fee-euro\" | \"transaction-fee-pound\" | \"transaction-fee-rupee\" | \"transaction-fee-yen\" | \"transfer\" | \"transfer-in\" | \"transfer-internal\" | \"transfer-out\" | \"truck\" | \"undo\" | \"unknown-device\" | \"unlock\" | \"upload\" | \"variant-list\" | \"video\" | \"video-list\" | \"view\" | \"viewport-narrow\" | \"viewport-short\" | \"viewport-tall\" | \"viewport-wide\" | \"wallet\" | \"wand\" | \"watch\" | \"wifi\" | \"work\" | \"work-list\" | \"wrench\" | \"x\" | \"x-circle\" | \"x-circle-filled\" | AnyString", + "value": "\"replace\" | \"search\" | \"split\" | \"link\" | \"edit\" | \"info\" | \"incomplete\" | \"complete\" | \"product\" | \"variant\" | \"collection\" | \"select\" | \"color\" | \"money\" | \"order\" | \"code\" | ... 542 more ... | AnyString", "description": "An icon displayed inside the field to provide visual context about the expected input or field purpose. Commonly used for search fields, currency inputs, or to indicate field type. Accepts any icon name from the icon library or a custom string identifier.", "defaultValue": "''" }, @@ -9265,7 +9345,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | `section-${string} additional-name` | `section-${string} address-level1` | `section-${string} address-level2` | `section-${string} address-level3` | `section-${string} address-level4` | `section-${string} address-line1` | `section-${string} address-line2` | `section-${string} address-line3` | `section-${string} country-name` | `section-${string} country` | `section-${string} family-name` | `section-${string} given-name` | `section-${string} honorific-prefix` | `section-${string} honorific-suffix` | `section-${string} nickname` | `section-${string} organization-title` | `section-${string} postal-code` | `section-${string} sex` | `section-${string} street-address` | `section-${string} transaction-currency` | `section-${string} username` | `section-${string} cc-additional-name` | `section-${string} cc-family-name` | `section-${string} cc-given-name` | `section-${string} cc-name` | `section-${string} cc-type` | \"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 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 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\" | `section-${string} shipping language` | `section-${string} shipping organization` | `section-${string} shipping name` | `section-${string} shipping additional-name` | `section-${string} shipping address-level1` | `section-${string} shipping address-level2` | `section-${string} shipping address-level3` | `section-${string} shipping address-level4` | `section-${string} shipping address-line1` | `section-${string} shipping address-line2` | `section-${string} shipping address-line3` | `section-${string} shipping country-name` | `section-${string} shipping country` | `section-${string} shipping family-name` | `section-${string} shipping given-name` | `section-${string} shipping honorific-prefix` | `section-${string} shipping honorific-suffix` | `section-${string} shipping nickname` | `section-${string} shipping organization-title` | `section-${string} shipping postal-code` | `section-${string} shipping sex` | `section-${string} shipping street-address` | `section-${string} shipping transaction-currency` | `section-${string} shipping username` | `section-${string} shipping cc-additional-name` | `section-${string} shipping cc-family-name` | `section-${string} shipping cc-given-name` | `section-${string} shipping cc-name` | `section-${string} shipping cc-type` | `section-${string} billing language` | `section-${string} billing organization` | `section-${string} billing name` | `section-${string} billing additional-name` | `section-${string} billing address-level1` | `section-${string} billing address-level2` | `section-${string} billing address-level3` | `section-${string} billing address-level4` | `section-${string} billing address-line1` | `section-${string} billing address-line2` | `section-${string} billing address-line3` | `section-${string} billing country-name` | `section-${string} billing country` | `section-${string} billing family-name` | `section-${string} billing given-name` | `section-${string} billing honorific-prefix` | `section-${string} billing honorific-suffix` | `section-${string} billing nickname` | `section-${string} billing organization-title` | `section-${string} billing postal-code` | `section-${string} billing sex` | `section-${string} billing street-address` | `section-${string} billing transaction-currency` | `section-${string} billing username` | `section-${string} billing cc-additional-name` | `section-${string} billing cc-family-name` | `section-${string} billing cc-given-name` | `section-${string} billing cc-name` | `section-${string} billing cc-type`", + "value": "\"on\" | \"off\" | TextAutocompleteField | `section-${string} one-time-code` | \"shipping one-time-code\" | \"billing one-time-code\" | `section-${string} shipping one-time-code` | `section-${string} billing one-time-code` | `section-${string} language` | `section-${string} organization` | `section-${string} name` | ... 141...", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -9393,7 +9473,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -9550,7 +9630,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@7174", + "name": "__@overlayHidden@2619", "value": "boolean", "description": "", "isPrivate": true @@ -9558,7 +9638,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@7175", + "name": "__@overlayActivator@2620", "value": "HTMLElement", "description": "", "isPrivate": true @@ -9566,7 +9646,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@7176", + "name": "__@overlayHideFrameId@2621", "value": "number", "description": "", "isPrivate": true @@ -9709,7 +9789,7 @@ "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", "name": "autocomplete", - "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobile impp\" | \"shipping fax impp\" | \"shipping pager impp\" | \"billing url\" | \"billing photo\" | \"billing impp\" | \"billing home impp\" | \"billing mobile impp\" | \"billing fax impp\" | \"billing pager impp\" | `section-${string} shipping url` | `section-${string} shipping photo` | `section-${string} shipping impp` | `section-${string} shipping home impp` | `section-${string} shipping mobile impp` | `section-${string} shipping fax impp` | `section-${string} shipping pager impp` | `section-${string} billing url` | `section-${string} billing photo` | `section-${string} billing impp` | `section-${string} billing home impp` | `section-${string} billing mobile impp` | `section-${string} billing fax impp` | `section-${string} billing pager impp` | URLAutocompleteField", + "value": "\"on\" | \"off\" | `section-${string} url` | `section-${string} photo` | `section-${string} impp` | `section-${string} home impp` | `section-${string} mobile impp` | `section-${string} fax impp` | `section-${string} pager impp` | \"shipping url\" | \"shipping photo\" | \"shipping impp\" | \"shipping home impp\" | \"shipping mobi...", "description": "Controls browser autofill behavior for the field.\n\nBasic values:\n- `on` - Enables autofill without specifying content type (default)\n- `off` - Disables autofill for sensitive data or one-time codes\n\nSpecific field values describe the expected data type. You can optionally prefix these with:\n- `section-${string}` - Scopes autofill to a specific form section (when multiple forms exist on the same page)\n- `shipping` or `billing` - Indicates whether the data is for shipping or billing purposes\n- Both section and group (for example, `section-primary shipping email`)\n\nProviding a specific autofill token helps browsers suggest more relevant saved data.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", "defaultValue": "'on' for everything else" }, @@ -9860,7 +9940,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@internals$4@6805", + "name": "__@internals$4@2250", "value": "ElementInternals", "description": "", "isPrivate": true @@ -9917,16 +9997,6 @@ "value": "declare class URLField\n extends PreactFieldElement\n implements URLFieldProps\n{\n accessor autocomplete: URLFieldProps['autocomplete'];\n accessor maxLength: URLFieldProps['maxLength'];\n accessor minLength: URLFieldProps['minLength'];\n /**\n * The current URL value in the field as a string. When setting this property programmatically, it updates the field's display value. When reading it, you get the user's current input. The field validates this value as a URL format when the user finishes editing.\n */\n get value(): string;\n set value(value: string);\n constructor();\n}" } }, - "URLAutocompleteField": { - "src/surfaces/admin/components.ts": { - "filePath": "src/surfaces/admin/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "URLAutocompleteField", - "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", - "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", - "isPublicDocs": true - } - }, "AdminAction": { "src/surfaces/admin/components.ts": { "filePath": "src/surfaces/admin/components.ts", @@ -10377,6 +10447,100 @@ "value": "declare class Form extends PreactCustomElement implements FormProps {\n constructor();\n}" } }, + "IntentRenderApi": { + "src/surfaces/admin/api/intents/intent-render.ts": { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "name": "IntentRenderApi", + "description": "The `IntentRenderApi` object provides methods for extensions that render in response to an app intent. Access the intent data to determine what action the merchant requested and use `intents.response` to resolve the intent when complete.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "auth", + "value": "Auth", + "description": "Provides methods for authenticating calls to your app backend. Use the `idToken()` method to retrieve a signed JWT token that verifies the current user's identity for secure server-side operations." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "extension", + "value": "{ target: ExtensionTarget; }", + "description": "The identifier of the running extension target. Use this to determine which target your extension is rendering in and conditionally adjust functionality or UI based on the extension context." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "i18n", + "value": "I18n", + "description": "Utilities for translating content according to the current localization of the admin. Use these methods to provide translated strings that match the merchant's language preferences, ensuring your extension is accessible to a global audience." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "intents", + "value": "IntentRenderIntents", + "description": "Provides methods for resolving the current intent. Always available for intent render extensions since they are always invoked inside an intent workflow." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "picker", + "value": "PickerApi", + "description": "Opens a custom selection dialog with your app-specific data. Use the [Picker API](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/picker-api) to define the picker's heading, items, headers, and selection behavior. Returns a Promise that resolves to a `Picker` object with a `selected` property for accessing the merchant's selection." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "query", + "value": "(query: string, options?: { variables?: Variables; version?: Omit; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", + "description": "Executes GraphQL queries against the [GraphQL Admin API](/docs/api/admin-graphql). Use this to fetch shop data, manage resources, or perform mutations. Queries are automatically authenticated with the current user's permissions. Optionally specify GraphQL variables and API version for your query." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "resourcePicker", + "value": "ResourcePickerApi", + "description": "Opens the [resource picker](/docs/api/admin-extensions/{API_VERSION}/target-apis/utility-apis/resource-picker-api) modal for selecting products, variants, or collections. Returns the selected resources when the user confirms their selection, or undefined if they cancel." + }, + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "storage", + "value": "Storage", + "description": "Provides methods for persisting data in browser storage that is scoped to your extension. Use this to store user preferences, cache data, maintain state across sessions, or save temporary working data. Storage is persistent across page reloads and isolated per extension." + } + ], + "value": "export interface IntentRenderApi\n extends StandardRenderingExtensionApi {\n /**\n * Provides methods for resolving the current intent. Always available for intent render extensions since they are always invoked inside an intent workflow.\n */\n intents: IntentRenderIntents;\n}" + } + }, + "IntentRenderIntents": { + "src/surfaces/admin/api/intents/intent-render.ts": { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "name": "IntentRenderIntents", + "description": "The intents API available to intent render extensions. Unlike other targets where `response` is optional, intent render extensions always run inside an intent workflow so `response` is guaranteed.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/admin/api/intents/intent-render.ts", + "syntaxKind": "PropertySignature", + "name": "response", + "value": "IntentResponseApi", + "description": "Resolves the current intent from within the invoked extension. Use `ok()` to signal success, `error()` to report failure, or `closed()` to indicate the merchant cancelled." + } + ], + "value": "export interface IntentRenderIntents {\n /**\n * Resolves the current intent from within the invoked extension. Use `ok()` to signal success, `error()` to report failure, or `closed()` to indicate the merchant cancelled.\n */\n response: IntentResponseApi;\n}" + } + }, + "FormExtensionComponents": { + "src/surfaces/admin/components/FormExtensionComponents.ts": { + "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "FormExtensionComponents", + "value": "StandardComponents | 'Form'", + "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." + } + }, "StandardApi": { "src/surfaces/admin/api/standard/standard.ts": { "filePath": "src/surfaces/admin/api/standard/standard.ts", @@ -11040,15 +11204,6 @@ "description": "The components available for building function settings extensions. Includes all form components plus the function settings component required for function settings configuration." } }, - "FormExtensionComponents": { - "src/surfaces/admin/components/FormExtensionComponents.ts": { - "filePath": "src/surfaces/admin/components/FormExtensionComponents.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "FormExtensionComponents", - "value": "StandardComponents | 'Form'", - "description": "The components available for building form-based extensions. Includes all standard components plus the form component for creating structured data collection interfaces with submission handling and validation." - } - }, "FunctionSettings": { "src/surfaces/admin/components.ts": { "filePath": "src/surfaces/admin/components.ts", @@ -12160,7 +12315,7 @@ "filePath": "src/surfaces/admin/api/intents/intents.ts", "syntaxKind": "PropertySignature", "name": "issues", - "value": "{ path?: string[]; message?: string; code?: string; }[]", + "value": "Issue[]", "description": "Specific validation issues or field errors. Present when validation fails on particular fields, allowing you to show targeted error messages.", "isOptional": true }, @@ -12173,7 +12328,7 @@ "isOptional": true } ], - "value": "export interface ErrorIntentResponse {\n /** Indicates the workflow failed. When `'error'`, the workflow encountered validation errors or other issues that prevented completion. */\n code?: 'error';\n /** A general error message describing what went wrong. Use this to display feedback when specific field errors aren't available. */\n message?: string;\n /** Specific validation issues or field errors. Present when validation fails on particular fields, allowing you to show targeted error messages. */\n issues?: {\n /** The path to the field that has an error (for example, `['product', 'title']`). Use this to identify which field caused the validation failure. */\n path?: string[];\n /** A description of what's wrong with this field. Display this to help merchants understand how to fix the error. */\n message?: string;\n /** A machine-readable error code for this issue. Use this for programmatic error handling or logging. */\n code?: string;\n }[];\n}" + "value": "export interface ErrorIntentResponse {\n /** Indicates the workflow failed. When `'error'`, the workflow encountered validation errors or other issues that prevented completion. */\n code?: 'error';\n /** A general error message describing what went wrong. Use this to display feedback when specific field errors aren't available. */\n message?: string;\n /** Specific validation issues or field errors. Present when validation fails on particular fields, allowing you to show targeted error messages. */\n issues?: Issue[];\n}" } }, "IntentResponse": { @@ -15500,7 +15655,7 @@ "syntaxKind": "PropertySignature", "name": "code", "value": "string", - "description": "A unique identifier describing the “class” of error. These will match the GraphQL error codes as closely as possible. For example the enums returned by the `metafieldsSet` mutation.\n\nLearn more about [MetafieldsSetUserErrorCode](https://shopify.dev/docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode)." + "description": "A unique identifier describing the “class” of error. These will match the GraphQL error codes as closely as possible. For example the enums returned by the `metafieldsSet` mutation.\n\nLearn more about [MetafieldsSetUserErrorCode](/docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode)." }, { "filePath": "src/surfaces/admin/components.ts", @@ -15525,7 +15680,7 @@ "isOptional": true } ], - "value": "export interface FunctionSettingsError extends Error {\n /**\n * A unique identifier describing the “class” of error. These will match\n * the GraphQL error codes as closely as possible. For example the enums\n * returned by the `metafieldsSet` mutation.\n *\n * Learn more about [MetafieldsSetUserErrorCode](https://shopify.dev/docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode).\n */\n code: string;\n /**\n * The error type name, always set to `FunctionSettingsError`.\n *\n * This helps identify errors specific to function settings, distinguishing them from other error types.\n */\n name: 'FunctionSettingsError';\n}" + "value": "export interface FunctionSettingsError extends Error {\n /**\n * A unique identifier describing the “class” of error. These will match\n * the GraphQL error codes as closely as possible. For example the enums\n * returned by the `metafieldsSet` mutation.\n *\n * Learn more about [MetafieldsSetUserErrorCode](/docs/api/admin-graphql/latest/enums/MetafieldsSetUserErrorCode).\n */\n code: string;\n /**\n * The error type name, always set to `FunctionSettingsError`.\n *\n * This helps identify errors specific to function settings, distinguishing them from other error types.\n */\n name: 'FunctionSettingsError';\n}" } }, "BaseTypographyProps": { @@ -15741,6 +15896,16 @@ "isPublicDocs": true } }, + "URLAutocompleteField": { + "src/surfaces/admin/components.ts": { + "filePath": "src/surfaces/admin/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "URLAutocompleteField", + "value": "'url' | 'photo' | 'impp' | 'home impp' | 'mobile impp' | 'fax impp' | 'pager impp'", + "description": "Represents autocomplete values that are valid for URL input fields. This is a subset of `AnyAutocompleteField` containing only fields suitable for URL inputs.\n\nAvailable values:\n- `url` - General URL or web address\n- `photo` - URL to a photo or image\n- `impp` - Instant messaging protocol URL\n- `home impp` - Home instant messaging protocol URL\n- `mobile impp` - Mobile instant messaging protocol URL\n- `fax impp` - Fax instant messaging protocol URL\n- `pager impp` - Pager instant messaging protocol URL", + "isPublicDocs": true + } + }, "Key": { "src/surfaces/admin/components.ts": { "filePath": "src/surfaces/admin/components.ts", @@ -18653,7 +18818,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@abortController@7234", + "name": "__@abortController@2679", "value": "AbortController", "description": "", "isPrivate": true @@ -18661,7 +18826,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@dialog@7228", + "name": "__@dialog@2673", "value": "HTMLDialogElement", "description": "", "isPrivate": true @@ -18669,7 +18834,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@focusedElement@7230", + "name": "__@focusedElement@2675", "value": "HTMLElement", "description": "", "isPrivate": true @@ -18677,7 +18842,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@nestedModals@7232", + "name": "__@nestedModals@2677", "value": "Map", "description": "", "isPrivate": true @@ -18685,7 +18850,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@childrenRerenderObserver@7236", + "name": "__@childrenRerenderObserver@2681", "value": "MutationObserver", "description": "", "isPrivate": true @@ -18693,7 +18858,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@shadowDomRerenderObserver@7237", + "name": "__@shadowDomRerenderObserver@2682", "value": "MutationObserver", "description": "", "isPrivate": true @@ -18701,7 +18866,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@onEscape@7231", + "name": "__@onEscape@2676", "value": "(event: KeyboardEvent) => void", "description": "", "isPrivate": true @@ -18709,7 +18874,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@onBackdropClick@7233", + "name": "__@onBackdropClick@2678", "value": "(event: MouseEvent) => void", "description": "", "isPrivate": true @@ -18717,7 +18882,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@onChildModalChange@7235", + "name": "__@onChildModalChange@2680", "value": "EventListenerOrEventListenerObject", "description": "", "isPrivate": true @@ -18725,7 +18890,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "GetAccessor", - "name": "__@isOpen@7227", + "name": "__@isOpen@2672", "value": "boolean", "description": "", "isPrivate": true @@ -18733,7 +18898,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "MethodDeclaration", - "name": "__@dismiss@7229", + "name": "__@dismiss@2674", "value": "() => void", "description": "", "isPrivate": true @@ -18741,7 +18906,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "GetAccessor", - "name": "__@hasOpenChildModal@7224", + "name": "__@hasOpenChildModal@2669", "value": "boolean", "description": "", "isPrivate": true @@ -18749,7 +18914,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "MethodDeclaration", - "name": "__@show@7225", + "name": "__@show@2670", "value": "() => Promise", "description": "", "isPrivate": true @@ -18757,7 +18922,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "MethodDeclaration", - "name": "__@hide@7226", + "name": "__@hide@2671", "value": "() => Promise", "description": "", "isPrivate": true @@ -18765,7 +18930,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@7174", + "name": "__@overlayHidden@2619", "value": "boolean", "description": "", "isPrivate": true @@ -18773,7 +18938,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@7175", + "name": "__@overlayActivator@2620", "value": "HTMLElement", "description": "", "isPrivate": true @@ -18781,7 +18946,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@7176", + "name": "__@overlayHideFrameId@2621", "value": "number", "description": "", "isPrivate": true @@ -19087,7 +19252,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHidden@7174", + "name": "__@overlayHidden@2619", "value": "boolean", "description": "", "isPrivate": true @@ -19095,7 +19260,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayActivator@7175", + "name": "__@overlayActivator@2620", "value": "HTMLElement", "description": "", "isPrivate": true @@ -19103,7 +19268,7 @@ { "filePath": "src/surfaces/admin/components.ts", "syntaxKind": "PropertyDeclaration", - "name": "__@overlayHideFrameId@7176", + "name": "__@overlayHideFrameId@2621", "value": "number", "description": "", "isPrivate": true @@ -21562,14 +21727,5 @@ ], "value": "export interface FunctionSettingsEvents {\n /**\n * An optional callback function that will be run by the admin when the user\n * commits their changes in the admin-rendered part of the function settings\n * experience. If `event.waitUntil` is called with a promise, the admin will wait for the\n * promise to resolve before committing any changes to Shopify’s servers. If\n * the promise rejects, the admin will abort the changes and display an error,\n * using the `message` property of the error you reject with.\n */\n submit: CallbackExtendableEventListener | null = null;\n /**\n * An optional callback function that will be run by the admin when\n * committing the changes to Shopify’s servers fails. The error event you receive includes\n * an `error` property that is an `AggregateError` object. This object includes\n * an array of errors that were caused by data your extension provided.\n * Network errors and user errors that are out of your control will not be reported here.\n *\n * In the `onError` callback, you should update your extension’s UI to\n * highlight the fields that caused the errors, and display the error messages\n * to the user.\n */\n error: CallbackErrorEventListener<\n typeof tagName,\n FunctionSettingsErrorEvent['error']['errors'][0]\n > | null = null;\n /**\n * A callback that is run when the function settings form is reset.\n */\n reset: CallbackEventListener | null = null;\n}" } - }, - "DataGeneratedType": { - "src/surfaces/admin/api/purchase-options-card-action.doc.ts": { - "filePath": "src/surfaces/admin/api/purchase-options-card-action.doc.ts", - "name": "DataGeneratedType", - "description": "Template schema for reference entity documentation pages.", - "isPublicDocs": true, - "value": "data: ReferenceEntityTemplateSchema = {\n name: 'Purchase Options Card Configuration API',\n description:\n 'The Purchase Options Card Configuration API provides access to purchase option selection data for products with [subscription](/docs/apps/build/purchase-options/subscriptions) and [selling plan](/docs/apps/build/purchase-options/subscriptions/selling-plans) configurations. Use this API to build action extensions that interact with selected [purchase options](/docs/apps/build/purchase-options) on product and product variant details pages.',\n isVisualComponent: false,\n type: 'API',\n requires:\n 'the [admin action](/docs/api/admin-extensions/{API_VERSION}/web-components/settings-and-templates/admin-action) component.',\n defaultExample: {\n description:\n 'Update a subscription by sending product and selling plan IDs to your backend. This example checks for selling plan presence, posts the update request, and shows a success banner before auto-closing the modal.',\n codeblock: {\n title: 'Manage a subscription',\n tabs: [\n {\n title: 'jsx',\n code: './purchase-options-card/examples/manage-subscription.jsx',\n language: 'jsx',\n },\n ],\n },\n },\n definitions: [\n {\n title: 'Properties',\n description:\n 'The `PurchaseOptionsCardConfigurationApi` object provides access to selected purchase option data. Access the following properties on the `PurchaseOptionsCardConfigurationApi` object to interact with currently selected products and selling plans in the `admin.product-purchase-option.action.render` and `admin.product-variant-purchase-option.action.render` targets.',\n type: 'PurchaseOptionsCardConfigurationApi',\n },\n ],\n examples: {\n description: 'Work with purchase options and selling plans',\n examples: [\n {\n description:\n 'Show a confirmation dialog before removing a product from a selling plan. This example demonstrates two-step confirmation with cancel option and success feedback after removal.',\n codeblock: {\n title: 'Remove from selling plan',\n tabs: [\n {\n title: 'jsx',\n code: './purchase-options-card/examples/remove-from-plan.jsx',\n language: 'jsx',\n },\n ],\n },\n },\n {\n description:\n 'Fetch selling plan name and options using the [GraphQL Admin API](/docs/api/admin-graphql) to validate the configuration. This example queries plan details, stores them in state, displays the information, and auto-closes after two seconds.',\n codeblock: {\n title: 'Validate selling plan',\n tabs: [\n {\n title: 'jsx',\n code: './purchase-options-card/examples/validate-selling-plan.jsx',\n language: 'jsx',\n },\n ],\n },\n },\n ],\n },\n category: 'Target APIs',\n subCategory: 'Contextual APIs',\n related: [],\n subSections: [\n {\n type: 'Generic',\n anchorLink: 'best-practices',\n title: 'Best practices',\n sectionContent:\n '- **Handle operations based on selling plan selection:** Items in `api.data.selected` have an optional `sellingPlanId` property. When present, perform subscription-specific operations. When absent, treat it as a one-time purchase.',\n },\n {\n type: 'Generic',\n anchorLink: 'limitations',\n title: 'Limitations',\n sectionContent:\n '- The action only appears when selling plan groups exist on the product or variant. The action is hidden for products without subscription options, even if your extension is installed.\\n' +\n '- Items in `api.data.selected` have an optional `sellingPlanId` property. When present, the merchant selected a specific selling plan. When absent, they selected the product/variant without a specific plan.\\n' +\n \"- Your extension can't modify selling plan configurations. The API is read-only for selling plan data. Use GraphQL mutations to update selling plans if needed.\\n\" +\n '- Selection data only includes IDs. You must query GraphQL for full product, variant, and selling plan details like billing policy and pricing adjustments. Selling plan group data is also unavailable. Your extension only receives individual selling plan IDs but not the parent selling plan group structure.',\n },\n ],\n}" - } } } \ No newline at end of file diff --git a/packages/ui-extensions/docs/surfaces/checkout/generated/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/checkout/generated/generated_docs_data_v2.json index bcbcb4ceae..bccafb5c82 100644 --- a/packages/ui-extensions/docs/surfaces/checkout/generated/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/checkout/generated/generated_docs_data_v2.json @@ -1,155 +1,63 @@ { - "DataGeneratedType": { - "docs/surfaces/checkout/reference/apis/address.doc.ts": { - "filePath": "docs/surfaces/checkout/reference/apis/address.doc.ts", - "name": "DataGeneratedType", - "description": "Template schema for reference entity documentation pages.", - "isPublicDocs": true, - "value": "data: ReferenceEntityTemplateSchema = {\n name: 'Addresses API',\n description: 'The API for interacting with addresses.',\n isVisualComponent: false,\n requires: REQUIRES_PROTECTED_CUSTOMER_DATA_LEVEL_2,\n category: 'Target APIs',\n subCategory: 'Checkout APIs',\n type: 'API',\n definitions: [\n {\n title: 'StandardApi',\n description: STANDARD_API_PROPERTIES_DESCRIPTION,\n type: 'Docs_Standard_AddressApi',\n },\n {\n title: 'CheckoutApi',\n description: CHECKOUT_API_PROPERTIES_DESCRIPTION,\n type: 'Docs_Checkout_AddressApi',\n },\n {\n title: 'useBillingAddress',\n description:\n 'Returns the proposed `billingAddress` applied to the checkout.',\n type: 'UseBillingAddressGeneratedType',\n },\n {\n title: 'useShippingAddress',\n description:\n 'Returns the proposed `shippingAddress` applied to the checkout.',\n type: 'UseShippingAddressGeneratedType',\n },\n {\n title: 'useApplyShippingAddressChange',\n description:\n 'Returns a function to mutate the `shippingAddress` property of checkout.',\n type: 'UseApplyShippingAddressChangeGeneratedType',\n },\n ],\n related: getLinksByTag('apis'),\n}" - } - }, - "StandardApi": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "StandardApi", - "description": "", - "isPublicDocs": true, + "ValidationError": { + "src/shared.ts": { + "filePath": "src/shared.ts", + "name": "ValidationError", + "description": "A validation error object that is returned when an operation fails.", "members": [ { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "analytics", - "value": "Analytics", - "description": "Tracks custom events and sends visitor information to [Web Pixels](https://shopify.dev/docs/apps/marketing). Use `publish()` to emit events and `visitor()` to submit buyer contact details." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "appliedGiftCards", - "value": "SubscribableSignalLike", - "description": "The gift cards that have been applied to the checkout. Each entry includes the last four characters of the gift card code, the amount used at checkout, and the card's remaining balance." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "applyTrackingConsentChange", - "value": "ApplyTrackingConsentChangeType", - "description": "Enables setting and updating customer privacy consent settings and tracking consent metafields.\n\n> Note: Requires the [`collect_buyer_consent` capability](/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent) to be set to `true`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "appMetafields", - "value": "SubscribableSignalLike", - "description": "The metafields requested in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.\n\nApp owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` isn't supported. See [app owned metafields](https://shopify.dev/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "attributes", - "value": "SubscribableSignalLike", - "description": "The custom key-value attributes attached to the cart or checkout. These are set by the buyer or by an extension using `applyAttributeChange()`. The list is empty if no attributes have been added." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "availablePaymentOptions", - "value": "SubscribableSignalLike", - "description": "All payment options available to the buyer for this checkout, such as credit cards, wallets, and local payment methods. The list depends on the shop's payment configuration and the buyer's region.\n\nThe set of payment options can change when the buyer updates their address or cart, so subscribe to changes rather than reading once during initialization. Each option exposes `handle` and `type` only. Provider names, logos, fees, and installment terms aren't available." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/shared.ts", "syntaxKind": "PropertySignature", - "name": "billingAddress", - "value": "SubscribableSignalLike", - "description": "The proposed customer billing address. The address updates when the field is committed (on change) rather than every keystroke. The property is available only if the extension has access to protected customer data. The subscribable value is `undefined` if the billing address hasn't been provided yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true + "name": "code", + "value": "string", + "description": "A code identifier for the error." }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/shared.ts", "syntaxKind": "PropertySignature", - "name": "buyerIdentity", - "value": "BuyerIdentity", - "description": "Information about the buyer that's interacting with the checkout. The property is available only if the extension has access to protected customer data.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "name": "issues", + "value": "{ message: string; path: string[]; }[]", + "description": "Field-level validation issues", "isOptional": true }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "buyerJourney", - "value": "BuyerJourney", - "description": "Provides details on the buyer's progression through the checkout and lets you intercept navigation to validate data before the buyer continues.\n\nRefer to [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/buyer-journey#examples) examples for more information." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "checkoutSettings", - "value": "SubscribableSignalLike", - "description": "Settings applied to the buyer's checkout." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "checkoutToken", - "value": "SubscribableSignalLike", - "description": "A stable ID that represents the current checkout.\n\nThe value is `undefined` when the checkout hasn't been created on the server yet.\n\nUse this to correlate checkout sessions across your extension, web pixels, and backend systems.\n\nThis matches the `data.checkout.token` field in a [checkout-related WebPixel event](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data) and the `checkout_token` field in the [REST Admin API `Order` resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object).\n\nCan be `undefined`. Handle the `undefined` state before using the value." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "cost", - "value": "CartCost", - "description": "The cost breakdown for the current checkout, including subtotal, shipping, tax, and total amounts. These values update as the buyer progresses through checkout and costs like shipping and tax are calculated." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "customerPrivacy", - "value": "SubscribableSignalLike", - "description": "Customer privacy consent settings and a flag denoting if consent has previously been collected." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "deliveryGroups", - "value": "SubscribableSignalLike", - "description": "The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items.\n\nEmpty until the buyer enters enough address information for Shopify to calculate shipping rates." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "discountAllocations", - "value": "SubscribableSignalLike", - "description": "The discount allocations applied to the entire cart, including automatic discounts, code-based discounts, and custom discounts from [Shopify Functions](https://shopify.dev/docs/apps/build/functions). Each allocation indicates how much was discounted and how the discount was triggered." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/shared.ts", "syntaxKind": "PropertySignature", - "name": "discountCodes", - "value": "SubscribableSignalLike", - "description": "The discount codes currently applied to the checkout. The list is empty if no discount codes have been applied. Use `applyDiscountCodeChange()` to add or remove codes." + "name": "message", + "value": "string", + "description": "A message describing the error." }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/shared.ts", "syntaxKind": "PropertySignature", - "name": "extension", - "value": "Extension", - "description": "Metadata about the running extension, including the current target, API version, capabilities, and editor context. Use this to conditionally render content based on where the extension is running." - }, + "name": "type", + "value": "'error'", + "description": "" + } + ], + "value": "interface ValidationError {\n type: 'error';\n /**\n * A message describing the error.\n */\n message: string;\n /**\n * A code identifier for the error.\n */\n code: string;\n /**\n * Field-level validation issues\n */\n issues?: {\n message: string;\n path: string[];\n }[];\n}" + } + }, + "SellingPlan": { + "src/surfaces/checkout/api/shared.ts": { + "filePath": "src/surfaces/checkout/api/shared.ts", + "name": "SellingPlan", + "description": "A [selling plan](/docs/apps/build/purchase-options/subscriptions) represents a recurring or deferred purchasing option for a product, such as a subscription, pre-order, or try-before-you-buy plan. The merchant configures selling plans to define how and when the buyer is charged.", + "isPublicDocs": true, + "members": [ { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "extensionPoint", - "value": "Target", - "description": "The identifier that specifies where in Shopify's UI your code is being injected. This is one of the targets you've included in your extension's configuration file.", - "deprecationMessage": "Use `extension.target` instead.", + "name": "id", + "value": "string", + "description": "A globally-unique identifier for the selling plan in the format `gid://shopify/SellingPlan/`. Use this to reference the specific selling plan associated with a line item.", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'purchase.checkout.block.render'", + "code": "'gid://shopify/SellingPlan/1'", "title": "Example" } ] @@ -157,297 +65,55 @@ ] }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "i18n", - "value": "I18n", - "description": "Utilities for translating strings, formatting currencies, numbers, and dates according to the buyer's locale. Use alongside [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization) to build fully localized extensions." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "instructions", - "value": "SubscribableSignalLike", - "description": "The cart instructions used to create the checkout and possibly limit extension capabilities.\n\nThese instructions should be checked before performing any actions that might be affected by them.\n\nFor example, if you intend to add a discount code via the `applyDiscountCodeChange` method, check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout.\n\n> Caution: Check cart instructions before calling select APIs, as > some may not be available. See the > [Cart Instructions API](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#examples) > for more information." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "lines", - "value": "SubscribableSignalLike", - "description": "The list of line items the buyer intends to purchase. Each entry includes the merchandise, quantity, cost, and any custom attributes. Use `applyCartLinesChange()` to add, remove, or update line items." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "localization", - "value": "Localization", - "description": "The buyer's language, country, currency, and timezone context. For formatting and translation helpers, use the [`i18n`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization#properties-propertydetail-i18n) object instead." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "localizedFields", - "value": "SubscribableSignalLike", - "description": "Additional region-specific fields required during checkout, such as tax identification numbers (Brazil's CPF/CNPJ) or customs credentials. The property is available only if the extension has access to protected customer data. The array is empty if the current checkout doesn't require any localized fields.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "note", - "value": "SubscribableSignalLike", - "description": "A note left by the customer to the merchant, either in their cart or during checkout.\n\nThe value is `undefined` if the buyer hasn't entered a note. Use this to display or react to order-level instructions such as delivery preferences or gift messages." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "query", - "value": ">(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "The method used to query the Storefront GraphQL API with a prefetched token." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "selectedPaymentOptions", - "value": "SubscribableSignalLike", - "description": "The payment options the buyer has currently selected. This updates as the buyer changes their payment method. The array can contain multiple entries when the buyer splits payment across methods (for example, a gift card and a credit card).\n\nEach option exposes `handle` and `type` only. Provider names, logos, fees, and installment terms aren't available." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "sessionToken", - "value": "SessionToken", - "description": "The session token providing a set of claims as a signed JSON Web Token (JWT).\n\nThe token has a TTL of five minutes.\n\nIf the previous token expires, this value reflects a new session token with a new signature and expiry.\n\nLearn more about [session tokens](/docs/apps/build/authentication-authorization/session-tokens)." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "settings", - "value": "SubscribableSignalLike", - "description": "The settings matching the settings definition written in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n\n Refer to [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/settings#examples) for more information.\n\n> Note: When an extension is being installed in the editor, the settings are empty until a merchant sets a value. In that case, this object updates in real time as a merchant fills in the settings." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "shippingAddress", - "value": "SubscribableSignalLike", - "description": "The proposed customer shipping address. During the information step, the address updates when the field is committed (on change) rather than every keystroke. The property is available only if the extension has access to protected customer data. When available, the subscribable value is `undefined` if delivery isn't required.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "shop", - "value": "Shop", - "description": "The store where the checkout is taking place, including the shop name, storefront URL, `.myshopify.com` subdomain, and a globally-unique ID." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "storage", - "value": "Storage", - "description": "Key-value storage that persists across page loads within the current checkout session. Data is shared across all activated targets associated with this extension.\n\n> Caution: Data persistence isn't guaranteed and storage is cleared when the buyer starts a new checkout." - }, + "name": "recurringDeliveries", + "value": "boolean", + "description": "Whether purchasing through this selling plan results in multiple deliveries. `true` for subscription plans with recurring fulfillment, `false` for one-time pre-orders or try-before-you-buy plans." + } + ], + "value": "export interface SellingPlan {\n /**\n * A globally-unique identifier for the selling plan in the format\n * `gid://shopify/SellingPlan/`. Use this to reference the specific\n * selling plan associated with a line item.\n *\n * @example 'gid://shopify/SellingPlan/1'\n */\n id: string;\n\n /**\n * Whether purchasing through this selling plan results in multiple\n * deliveries. `true` for subscription plans with recurring fulfillment,\n * `false` for one-time pre-orders or try-before-you-buy plans.\n */\n recurringDeliveries: boolean;\n}" + } + }, + "Attribute": { + "src/surfaces/checkout/api/shared.ts": { + "filePath": "src/surfaces/checkout/api/shared.ts", + "name": "Attribute", + "description": "", + "isPublicDocs": true, + "members": [ { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "version", - "value": "Version", - "description": "The renderer version being used for the extension.", + "name": "key", + "value": "string", + "description": "The identifier for the attribute. Each key must be unique within the set of attributes on the cart or checkout. If you call `applyAttributeChange()` with a key that already exists, then the existing value is replaced.", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'2025-10'", + "code": "'gift_wrapping'", "title": "Example" } ] } ] - } - ], - "value": "export interface StandardApi {\n /**\n * Tracks custom events and sends visitor information to\n * [Web Pixels](https://shopify.dev/docs/apps/marketing). Use `publish()` to emit events\n * and `visitor()` to submit buyer contact details.\n */\n analytics: Analytics;\n\n /**\n * The gift cards that have been applied to the checkout. Each entry includes\n * the last four characters of the gift card code, the amount used at\n * checkout, and the card's remaining balance.\n */\n appliedGiftCards: SubscribableSignalLike;\n\n /**\n * The cart instructions used to create the checkout and possibly limit extension capabilities.\n *\n * These instructions should be checked before performing any actions that might be affected by them.\n *\n * For example, if you intend to add a discount code via the `applyDiscountCodeChange` method,\n * check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout.\n *\n * > Caution: Check cart instructions before calling select APIs, as\n * > some may not be available. See the\n * > [Cart Instructions API](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#examples)\n * > for more information.\n *\n */\n instructions: SubscribableSignalLike;\n\n /**\n * The metafields requested in the\n * [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration)\n * file. These metafields are updated when there's a change in the merchandise items\n * being purchased by the customer.\n *\n * App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` isn't supported. See [app owned metafields](https://shopify.dev/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n appMetafields: SubscribableSignalLike;\n\n /**\n * The custom key-value attributes attached to the cart or checkout. These are set by the buyer or by an extension using `applyAttributeChange()`. The list is empty if no attributes have been added.\n */\n attributes: SubscribableSignalLike;\n\n /**\n * All payment options available to the buyer for this checkout, such as\n * credit cards, wallets, and local payment methods. The list depends on\n * the shop's payment configuration and the buyer's region.\n *\n * The set of payment options can change when the buyer updates their\n * address or cart, so subscribe to changes rather than reading once\n * during initialization. Each option exposes `handle` and `type` only.\n * Provider names, logos, fees, and installment terms aren't available.\n */\n availablePaymentOptions: SubscribableSignalLike;\n\n /**\n * Information about the buyer that's interacting with the checkout. The property is available only if the extension has access to protected customer data.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n buyerIdentity?: BuyerIdentity;\n\n /**\n * Provides details on the buyer's progression through the checkout and lets you intercept navigation to validate data before the buyer continues.\n *\n * Refer to [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/buyer-journey#examples)\n * examples for more information.\n */\n buyerJourney: BuyerJourney;\n\n /**\n * Settings applied to the buyer's checkout.\n */\n checkoutSettings: SubscribableSignalLike;\n\n /**\n * A stable ID that represents the current checkout.\n *\n * The value is `undefined` when the checkout hasn't been created on the server yet.\n *\n * Use this to correlate checkout sessions across your extension, web pixels, and backend systems.\n *\n * This matches the `data.checkout.token` field in a [checkout-related WebPixel event](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data)\n * and the `checkout_token` field in the [REST Admin API `Order` resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object).\n *\n * Can be `undefined`. Handle the `undefined` state before using the value.\n */\n checkoutToken: SubscribableSignalLike;\n\n /**\n * The cost breakdown for the current checkout, including subtotal, shipping, tax, and total amounts. These values update as the buyer progresses through checkout and costs like shipping and tax are calculated.\n */\n cost: CartCost;\n\n /**\n * The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items.\n *\n * Empty until the buyer enters enough address information for Shopify to\n * calculate shipping rates.\n */\n deliveryGroups: SubscribableSignalLike;\n\n /**\n * The discount codes currently applied to the checkout. The list is empty if no discount codes have been applied. Use `applyDiscountCodeChange()` to add or remove codes.\n */\n discountCodes: SubscribableSignalLike;\n\n /**\n * The discount allocations applied to the entire cart, including automatic discounts, code-based discounts, and custom discounts from [Shopify Functions](https://shopify.dev/docs/apps/build/functions). Each allocation indicates how much was discounted and how the discount was triggered.\n */\n discountAllocations: SubscribableSignalLike;\n\n /**\n * Metadata about the running extension, including the current target, API version,\n * capabilities, and editor context. Use this to conditionally render content\n * based on where the extension is running.\n */\n extension: Extension;\n\n /**\n * The identifier that specifies where in Shopify's UI your code is being\n * injected. This is one of the targets you've included in your\n * extension's configuration file.\n *\n * @example 'purchase.checkout.block.render'\n * @see https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/extension-targets-overview\n * @see https://shopify.dev/docs/apps/app-extensions/configuration#targets\n *\n * @deprecated Use `extension.target` instead.\n */\n extensionPoint: Target;\n\n /**\n * Utilities for translating strings, formatting currencies, numbers, and dates\n * according to the buyer's locale. Use alongside\n * [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization)\n * to build fully localized extensions.\n */\n i18n: I18n;\n\n /**\n * The list of line items the buyer intends to purchase. Each entry includes the merchandise, quantity, cost, and any custom attributes. Use `applyCartLinesChange()` to add, remove, or update line items.\n */\n lines: SubscribableSignalLike;\n\n /**\n * The buyer's language, country, currency, and timezone context. For\n * formatting and translation helpers, use the\n * [`i18n`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization#properties-propertydetail-i18n)\n * object instead.\n */\n localization: Localization;\n\n /**\n * A note left by the customer to the merchant, either in their cart or during checkout.\n *\n * The value is `undefined` if the buyer hasn't entered a note. Use this to display or react to order-level instructions such as delivery preferences or gift messages.\n */\n note: SubscribableSignalLike;\n\n /**\n * The method used to query the Storefront GraphQL API with a prefetched token.\n *\n */\n query: >(\n query: string,\n options?: {variables?: Variables; version?: StorefrontApiVersion},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n\n /**\n * The payment options the buyer has currently selected. This updates as\n * the buyer changes their payment method. The array can contain multiple\n * entries when the buyer splits payment across methods (for example, a\n * gift card and a credit card).\n *\n * Each option exposes `handle` and `type` only. Provider names, logos,\n * fees, and installment terms aren't available.\n */\n selectedPaymentOptions: SubscribableSignalLike;\n\n /**\n * The session token providing a set of claims as a signed JSON Web Token (JWT).\n *\n * The token has a TTL of five minutes.\n *\n * If the previous token expires, this value reflects a new session token with a new signature and expiry.\n *\n * Learn more about [session tokens](/docs/apps/build/authentication-authorization/session-tokens).\n */\n sessionToken: SessionToken;\n\n /**\n * The settings matching the settings definition written in the\n * [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n *\n * Refer to [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/settings#examples) for more information.\n *\n * > Note: When an extension is being installed in the editor, the settings are empty until\n * a merchant sets a value. In that case, this object updates in real time as a merchant fills in the settings.\n */\n settings: SubscribableSignalLike;\n\n /**\n * The proposed customer shipping address. During the information step, the address\n * updates when the field is committed (on change) rather than every keystroke.\n * The property is available only if the extension has access to protected customer\n * data. When available, the subscribable value is `undefined` if delivery isn't required.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n shippingAddress?: SubscribableSignalLike;\n\n /**\n * The proposed customer billing address. The address updates when the field is\n * committed (on change) rather than every keystroke. The property is available only\n * if the extension has access to protected customer data. The subscribable value is\n * `undefined` if the billing address hasn't been provided yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n billingAddress?: SubscribableSignalLike;\n\n /**\n * The store where the checkout is taking place, including the shop name,\n * storefront URL, `.myshopify.com` subdomain, and a globally-unique ID.\n */\n shop: Shop;\n\n /**\n * Key-value storage that persists across page loads within the current checkout\n * session. Data is shared across all activated targets associated with\n * this extension.\n *\n * > Caution: Data persistence isn't guaranteed and storage is cleared when the\n * buyer starts a new checkout.\n */\n storage: Storage;\n\n /**\n * The renderer version being used for the extension.\n *\n * @example '2025-10'\n */\n version: Version;\n\n /**\n * Customer privacy consent settings and a flag denoting if consent has previously been collected.\n */\n customerPrivacy: SubscribableSignalLike;\n\n /**\n * Enables setting and updating customer privacy consent settings and tracking consent metafields.\n *\n * > Note: Requires the [`collect_buyer_consent` capability](/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent) to be set to `true`.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n applyTrackingConsentChange: ApplyTrackingConsentChangeType;\n\n /**\n * Additional region-specific fields required during checkout, such as tax identification numbers (Brazil's CPF/CNPJ) or customs credentials. The property is available only if the extension has access to protected customer data. The array is empty if the current checkout doesn't require any localized fields.\n */\n localizedFields?: SubscribableSignalLike;\n}" - } - }, - "Analytics": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "Analytics", - "description": "Tracks custom events and sends visitor information to [Web Pixels](https://shopify.dev/docs/apps/marketing). Use `publish()` to emit events and `visitor()` to submit buyer contact details.", - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "MethodSignature", - "name": "publish", - "value": "(name: string, data: Record) => Promise", - "description": "Publishes a custom event to [Web Pixels](https://shopify.dev/docs/apps/marketing). Returns `true` when the event is successfully dispatched.\n\nThe Promise resolves to `true` when the event was dispatched. The boolean indicates dispatch confirmation only. It doesn't indicate whether any specific web pixel processed the event." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "MethodSignature", - "name": "visitor", - "value": "(data: { email?: string; phone?: string; }) => Promise", - "description": "Submits buyer contact details for attribution and analytics purposes." - } - ], - "value": "export interface Analytics {\n /**\n * Publishes a custom event to [Web Pixels](https://shopify.dev/docs/apps/marketing).\n * Returns `true` when the event is successfully dispatched.\n *\n * The Promise resolves to `true` when the event was dispatched. The boolean\n * indicates dispatch confirmation only. It doesn't indicate whether any\n * specific web pixel processed the event.\n */\n publish(name: string, data: Record): Promise;\n\n /**\n * Submits buyer contact details for attribution and analytics purposes.\n */\n visitor(data: {email?: string; phone?: string}): Promise;\n}" - } - }, - "VisitorResult": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "VisitorResult", - "value": "VisitorSuccess | VisitorError", - "description": "Represents a visitor result.", - "isPublicDocs": true - } - }, - "VisitorSuccess": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "VisitorSuccess", - "description": "Represents a successful visitor result.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates that the visitor information was validated and submitted." - } - ], - "value": "export interface VisitorSuccess {\n /**\n * Indicates that the visitor information was validated and submitted.\n */\n type: 'success';\n}" - } - }, - "VisitorError": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "VisitorError", - "description": "Represents an unsuccessful visitor result.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates that the visitor information is invalid and wasn't submitted. Common causes include using the wrong data type or omitting a required property." - } - ], - "value": "export interface VisitorError {\n /**\n * Indicates that the visitor information is invalid and wasn't submitted.\n * Common causes include using the wrong data type or omitting a required property.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" - } - }, - "SubscribableSignalLike": { - "src/surfaces/checkout/shared.ts": { - "filePath": "src/surfaces/checkout/shared.ts", - "name": "SubscribableSignalLike", - "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern. This interface extends `ReadonlySignalLike` with deprecated fields that are still supported for backwards compatibility.", - "members": [ - { - "filePath": "src/surfaces/checkout/shared.ts", - "syntaxKind": "PropertySignature", - "name": "current", - "value": "T", - "description": "The current value of the signal. Equivalent to `.value`, accessing this property subscribes to changes when used in a reactive context.", - "deprecationMessage": "Use `.value` instead." - }, - { - "filePath": "src/surfaces/checkout/shared.ts", - "syntaxKind": "MethodSignature", - "name": "destroy", - "value": "() => Promise", - "description": "Cleans up the subscription and releases any resources held by this signal. After calling `destroy()`, the signal stops receiving updates from the main thread.", - "deprecationMessage": "No longer needed. Use [Preact Signals](https://preactjs.com/guide/v10/signals) to manage reactive state instead." - }, - { - "filePath": "src/surfaces/checkout/shared.ts", - "syntaxKind": "MethodSignature", - "name": "subscribe", - "value": "(fn: (value: T) => void) => () => void", - "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." }, { - "filePath": "src/surfaces/checkout/shared.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", "name": "value", - "value": "T", - "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." - } - ], - "value": "export interface SubscribableSignalLike extends ReadonlySignalLike {\n /**\n * The current value of the signal. Equivalent to `.value`, accessing this property\n * subscribes to changes when used in a reactive context.\n *\n * @deprecated Use `.value` instead.\n */\n readonly current: T;\n /**\n * Cleans up the subscription and releases any resources held by this signal. After calling\n * `destroy()`, the signal stops receiving updates from the main thread.\n *\n * @deprecated No longer needed. Use [Preact Signals](https://preactjs.com/guide/v10/signals) to manage reactive state instead.\n */\n destroy(): Promise;\n}" - } - }, - "AppliedGiftCard": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "AppliedGiftCard", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "amountUsed", - "value": "Money", - "description": "The amount of the applied gift card that's used when the checkout is completed. This might be less than `balance` if the order total is lower than the card's remaining balance." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "balance", - "value": "Money", - "description": "The current balance of the applied gift card before checkout completion. This reflects the full remaining value on the card, not just the amount being applied to this order." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "lastCharacters", "value": "string", - "description": "The last four characters of the applied gift card's code. The full code isn't exposed for security reasons. Use this value to display which card is applied." - } - ], - "value": "export interface AppliedGiftCard {\n /**\n * The last four characters of the applied gift card's code. The full code isn't exposed for security reasons. Use this value to display which card is applied.\n */\n lastCharacters: string;\n\n /**\n * The amount of the applied gift card that's used when the checkout is completed. This might be less than `balance` if the order total is lower than the card's remaining balance.\n */\n amountUsed: Money;\n\n /**\n * The current balance of the applied gift card before checkout completion. This reflects the full remaining value on the card, not just the amount being applied to this order.\n */\n balance: Money;\n}" - } - }, - "Money": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "Money", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "amount", - "value": "number", - "description": "The decimal amount of the price. For example, `29.99` represents twenty-nine dollars and ninety-nine cents." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "currencyCode", - "value": "CurrencyCode", - "description": "The three-letter currency code in [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) format.", + "description": "The value associated with the attribute key. This is a freeform string that can store any information the buyer or app provides.", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'CAD' for Canadian dollar", + "code": "'Please use red wrapping paper'", "title": "Example" } ] @@ -455,70 +121,22 @@ ] } ], - "value": "export interface Money {\n /**\n * The decimal amount of the price. For example, `29.99` represents twenty-nine dollars and ninety-nine cents.\n */\n amount: number;\n /**\n * The three-letter currency code in [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) format.\n *\n * @example 'CAD' for Canadian dollar\n */\n currencyCode: CurrencyCode;\n}" - } - }, - "CurrencyCode": { - "src/shared.ts": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CurrencyCode", - "value": "'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL'", - "description": "" - } - }, - "ApplyTrackingConsentChangeType": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "ApplyTrackingConsentChangeType", - "description": "", - "isPublicDocs": true, - "params": [ - { - "name": "visitorConsent", - "description": "", - "value": "VisitorConsentChange", - "filePath": "src/surfaces/checkout/api/standard/standard.ts" - } - ], - "returns": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "description": "", - "name": "Promise", - "value": "Promise" - }, - "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + "value": "export interface Attribute {\n /**\n * The identifier for the attribute. Each key must be unique within the\n * set of attributes on the cart or checkout. If you call\n * `applyAttributeChange()` with a key that already exists, then the\n * existing value is replaced.\n *\n * @example 'gift_wrapping'\n */\n key: string;\n\n /**\n * The value associated with the attribute key. This is a freeform string\n * that can store any information the buyer or app provides.\n *\n * @example 'Please use red wrapping paper'\n */\n value: string;\n}" } }, - "VisitorConsentChange": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "VisitorConsentChange", + "MailingAddress": { + "src/surfaces/checkout/api/shared.ts": { + "filePath": "src/surfaces/checkout/api/shared.ts", + "name": "MailingAddress", "description": "", "isPublicDocs": true, "members": [ { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "analytics", - "value": "boolean", - "description": "The visitor's consent for analytics tracking. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "marketing", - "value": "boolean", - "description": "The visitor's consent for marketing and targeted advertising. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "TrackingConsentMetafieldChange[]", - "description": "Tracking consent metafield data to be saved.\n\nIf the value is `null`, the metafield is deleted.", + "name": "address1", + "value": "string", + "description": "The first line of the street address, including the street number and name. The value is `undefined` if the buyer hasn't entered an address yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -526,7 +144,7 @@ "description": "", "tabs": [ { - "code": "`[{key: 'granularAnalytics', value: 'true'}, {key: 'granularMarketing', value: 'false'}]`", + "code": "'151 O'Connor Street'", "title": "Example" } ] @@ -534,281 +152,179 @@ ] }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "preferences", - "value": "boolean", - "description": "The visitor's consent for storing preferences such as language and currency. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "saleOfData", - "value": "boolean", - "description": "The visitor's consent for the sale or sharing of their personal data with third parties. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'changeVisitorConsent'", - "description": "Identifies this as a visitor consent change. This is the only supported change type for `applyTrackingConsentChange()`." - } - ], - "value": "export interface VisitorConsentChange extends VisitorConsent {\n /**\n * Tracking consent metafield data to be saved.\n *\n * If the value is `null`, the metafield is deleted.\n *\n * @example `[{key: 'granularAnalytics', value: 'true'}, {key: 'granularMarketing', value: 'false'}]`\n */\n metafields?: TrackingConsentMetafieldChange[];\n /**\n * Identifies this as a visitor consent change. This is the only supported change type for `applyTrackingConsentChange()`.\n */\n type: 'changeVisitorConsent';\n}" - } - }, - "TrackingConsentMetafieldChange": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "TrackingConsentMetafieldChange", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "key", + "name": "address2", "value": "string", - "description": "The identifier for the tracking consent metafield to update." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | null", - "description": "The new value to store in the metafield. Set to `null` to delete the metafield.\n\nConsent metafield values are strings, not booleans. Pass `null` to delete a tracking consent metafield." - } - ], - "value": "export interface TrackingConsentMetafieldChange {\n /**\n * The identifier for the tracking consent metafield to update.\n */\n key: string;\n /**\n * The new value to store in the metafield. Set to `null` to delete the metafield.\n *\n * Consent metafield values are strings, not booleans. Pass `null` to delete\n * a tracking consent metafield.\n */\n value: string | null;\n}" - } - }, - "VisitorConsent": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "VisitorConsent", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "analytics", - "value": "boolean", - "description": "The visitor's consent for analytics tracking. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "marketing", - "value": "boolean", - "description": "The visitor's consent for marketing and targeted advertising. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "preferences", - "value": "boolean", - "description": "The visitor's consent for storing preferences such as language and currency. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", - "isOptional": true + "description": "The second line of the buyer's address, such as apartment number, suite, or unit. The value is `undefined` if the buyer didn't provide a second address line.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'Ground floor'", + "title": "Example" + } + ] + } + ] }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "saleOfData", - "value": "boolean", - "description": "The visitor's consent for the sale or sharing of their personal data with third parties. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", - "isOptional": true - } - ], - "value": "export interface VisitorConsent {\n /**\n * The visitor's consent for analytics tracking. `true` means the visitor\n * actively granted consent, `false` means actively denied, and `undefined`\n * means no decision has been made yet.\n */\n analytics?: boolean;\n /**\n * The visitor's consent for marketing and targeted advertising. `true` means\n * the visitor actively granted consent, `false` means actively denied, and\n * `undefined` means no decision has been made yet.\n */\n marketing?: boolean;\n /**\n * The visitor's consent for storing preferences such as language and currency.\n * `true` means the visitor actively granted consent, `false` means actively\n * denied, and `undefined` means no decision has been made yet.\n */\n preferences?: boolean;\n /**\n * The visitor's consent for the sale or sharing of their personal data with\n * third parties. `true` means the visitor actively granted consent, `false`\n * means actively denied, and `undefined` means no decision has been made yet.\n */\n saleOfData?: boolean;\n}" - } - }, - "TrackingConsentChangeResult": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "TrackingConsentChangeResult", - "value": "TrackingConsentChangeResultSuccess | TrackingConsentChangeResultError", - "description": "", - "isPublicDocs": true - } - }, - "TrackingConsentChangeResultSuccess": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "TrackingConsentChangeResultSuccess", - "description": "The returned result of a successful tracking consent preference update.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates that the tracking consent update was applied successfully." - } - ], - "value": "export interface TrackingConsentChangeResultSuccess {\n /**\n * Indicates that the tracking consent update was applied successfully.\n */\n type: 'success';\n}" - } - }, - "TrackingConsentChangeResultError": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "TrackingConsentChangeResultError", - "description": "The returned result of an unsuccessful tracking consent preference update with a message detailing the type of error that occurred.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "message", + "name": "city", "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." + "description": "The city, town, or village of the address. The value is `undefined` if the buyer hasn't entered a city yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'Ottawa'", + "title": "Example" + } + ] + } + ] }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates that the tracking consent update couldn't be applied. Check the `message` property for details." - } - ], - "value": "export interface TrackingConsentChangeResultError {\n /**\n * Indicates that the tracking consent update couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" - } - }, - "AppMetafieldEntry": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "AppMetafieldEntry", - "description": "An entry that pairs a Shopify resource with one of its [metafields](https://shopify.dev/docs/apps/build/custom-data/metafields). Each entry contains a `target` identifying which resource the metafield belongs to and a `metafield` object with the actual data.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "metafield", - "value": "AppMetafield", - "description": "The metafield data, including the namespace, key, value, and content type. Use the `namespace` and `key` together to uniquely identify the metafield within its resource." + "name": "company", + "value": "string", + "description": "The buyer's company name. The value is `undefined` if the buyer didn't enter a company or the store doesn't collect company names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'Shopify'", + "title": "Example" + } + ] + } + ] }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "target", - "value": "AppMetafieldEntryTarget", - "description": "The Shopify resource that this metafield is attached to, including the resource type (such as `'product'` or `'customer'`) and its globally-unique ID.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`." - } - ], - "value": "export interface AppMetafieldEntry {\n /**\n * The Shopify resource that this metafield is attached to, including the resource type (such as `'product'` or `'customer'`) and its globally-unique ID.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.\n */\n target: AppMetafieldEntryTarget;\n\n /**\n * The metafield data, including the namespace, key, value, and content type. Use the `namespace` and `key` together to uniquely identify the metafield within its resource.\n */\n metafield: AppMetafield;\n}" - } - }, - "AppMetafield": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "AppMetafield", - "description": "Represents a custom [metafield](https://shopify.dev/docs/apps/build/custom-data/metafields) attached to a resource such as a product, variant, customer, or shop.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The identifier for the metafield within its namespace, such as `'ingredients'` or `'shipping_weight'`." + "name": "countryCode", + "value": "CountryCode", + "description": "The two-letter country code in [ISO 3166 Alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format. The value is `undefined` if the buyer hasn't selected a country yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'CA' for Canada.", + "title": "Example" + } + ] + } + ] }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "namespace", + "name": "firstName", "value": "string", - "description": "The namespace that the metafield belongs to. Namespaces group related metafields and prevent naming collisions between different apps.\n\nApp owned metafield namespaces are returned using the `$app` format. See [app owned metafields](https://shopify.dev/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information." + "description": "The buyer's first name. Use this alongside `lastName` when you need to display or process name parts separately. The value is `undefined` if the buyer didn't provide a first name or the store doesn't collect split names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'John'", + "title": "Example" + } + ] + } + ] }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "type", + "name": "lastName", "value": "string", - "description": "The metafield's [type name](https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types), such as `'single_line_text_field'` or `'json'`. This is the full type identifier, whereas `valueType` is a simplified category." + "description": "The buyer's last name. Use this alongside `firstName` when you need to display or process name parts separately. The value is `undefined` if the buyer didn't provide a last name or the store doesn't collect split names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'Doe'", + "title": "Example" + } + ] + } + ] }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "value", + "name": "name", "value": "string", - "description": "The value of a metafield, stored as a string regardless of the underlying type. For JSON metafields, parse the string to access structured data." + "description": "The buyer's full name, typically a combination of first and last name. The value is `undefined` if the buyer didn't provide a name.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'John Doe'", + "title": "Example" + } + ] + } + ] }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "'boolean' | 'float' | 'integer' | 'json_string' | 'string'", - "description": "The metafield's information type.\n\n- `'boolean'`: A true or false value.\n- `'float'`: A decimal number value.\n- `'integer'`: A whole number value.\n- `'json_string'`: A JSON-encoded string value.\n- `'string'`: A plain text value." - } - ], - "value": "export interface AppMetafield {\n /**\n * The identifier for the metafield within its namespace, such as `'ingredients'` or `'shipping_weight'`.\n */\n key: string;\n\n /**\n * The namespace that the metafield belongs to. Namespaces group related metafields and prevent naming collisions between different apps.\n *\n * App owned metafield namespaces are returned using the `$app` format. See [app owned metafields](https://shopify.dev/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n */\n namespace: string;\n\n /**\n * The value of a metafield, stored as a string regardless of the underlying type. For JSON metafields, parse the string to access structured data.\n */\n value: string;\n\n /**\n * The metafield's information type.\n *\n * - `'boolean'`: A true or false value.\n * - `'float'`: A decimal number value.\n * - `'integer'`: A whole number value.\n * - `'json_string'`: A JSON-encoded string value.\n * - `'string'`: A plain text value.\n */\n valueType: 'boolean' | 'float' | 'integer' | 'json_string' | 'string';\n\n /**\n * The metafield's [type name](https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types), such as `'single_line_text_field'` or `'json'`. This is the full type identifier, whereas `valueType` is a simplified category.\n */\n type: string;\n}" - } - }, - "AppMetafieldEntryTarget": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "AppMetafieldEntryTarget", - "description": "The Shopify resource that a metafield is attached to. Each entry identifies a specific resource by its type and globally-unique ID, so you can trace where the data comes from.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "id", + "name": "phone", "value": "string", - "description": "The globally-unique identifier of the Shopify resource, in [GID](https://shopify.dev/docs/api/usage/gids) format. Use this value to match the metafield to a specific resource in your extension or when querying the [Storefront API](https://shopify.dev/docs/api/storefront).", + "description": "The phone number associated with the address, typically in international format. The value is `undefined` if the buyer didn't provide a phone number or the store doesn't collect phone numbers.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'gid://shopify/Product/123'", + "code": "'+1 613 111 2222'", "title": "Example" } ] } ] }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "| 'customer'\n | 'product'\n | 'shop'\n | 'shopUser'\n | 'variant'\n | 'company'\n | 'companyLocation'\n | 'cart'", - "description": "The kind of Shopify resource this metafield belongs to:\n\n- `'customer'`: The customer who placed the order.\n- `'product'`: A product in the merchant's catalog.\n- `'shop'`: The merchant's shop.\n- `'shopUser'`: A staff member or collaborator account on the shop.\n- `'variant'`: A specific variant of a product.\n- `'company'`: A [B2B](https://shopify.dev/docs/apps/build/b2b) company associated with the order.\n- `'companyLocation'`: A location belonging to a [B2B](https://shopify.dev/docs/apps/build/b2b) company.\n- `'cart'`: The cart associated with the checkout.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`." - } - ], - "value": "export interface AppMetafieldEntryTarget {\n /**\n * The kind of Shopify resource this metafield belongs to:\n *\n * - `'customer'`: The customer who placed the order.\n * - `'product'`: A product in the merchant's catalog.\n * - `'shop'`: The merchant's shop.\n * - `'shopUser'`: A staff member or collaborator account on the shop.\n * - `'variant'`: A specific variant of a product.\n * - `'company'`: A [B2B](https://shopify.dev/docs/apps/build/b2b) company associated with the order.\n * - `'companyLocation'`: A location belonging to a [B2B](https://shopify.dev/docs/apps/build/b2b) company.\n * - `'cart'`: The cart associated with the checkout.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.\n */\n type:\n | 'customer'\n | 'product'\n | 'shop'\n | 'shopUser'\n | 'variant'\n | 'company'\n | 'companyLocation'\n | 'cart';\n\n /**\n * The globally-unique identifier of the Shopify resource, in [GID](https://shopify.dev/docs/api/usage/gids) format. Use this value to match the metafield to a specific resource in your extension or when querying the [Storefront API](https://shopify.dev/docs/api/storefront).\n *\n * @example 'gid://shopify/Product/123'\n */\n id: string;\n}" - } - }, - "Attribute": { - "src/surfaces/checkout/api/shared.ts": { - "filePath": "src/surfaces/checkout/api/shared.ts", - "name": "Attribute", - "description": "", - "isPublicDocs": true, - "members": [ { "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "key", + "name": "provinceCode", "value": "string", - "description": "The identifier for the attribute. Each key must be unique within the set of attributes on the cart or checkout. If you call `applyAttributeChange()` with a key that already exists, then the existing value is replaced.", + "description": "The province, state, prefecture, or region code of the address. The format varies by country. The value is `undefined` if the buyer hasn't selected one yet or the country doesn't have provinces.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'gift_wrapping'", + "code": "'ON' for Ontario.", "title": "Example" } ] @@ -818,16 +334,17 @@ { "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", - "name": "value", + "name": "zip", "value": "string", - "description": "The value associated with the attribute key. This is a freeform string that can store any information the buyer or app provides.\n\nAttribute values are always strings. To store structured data, serialize it to JSON and parse it when reading.", + "description": "The postal code or ZIP code of the address, used for mail sorting and delivery routing. The value is `undefined` if the buyer hasn't entered one yet or the country doesn't use postal codes.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'Please use red wrapping paper'", + "code": "'K2P 2L8'", "title": "Example" } ] @@ -835,38 +352,22 @@ ] } ], - "value": "export interface Attribute {\n /**\n * The identifier for the attribute. Each key must be unique within the\n * set of attributes on the cart or checkout. If you call\n * `applyAttributeChange()` with a key that already exists, then the\n * existing value is replaced.\n *\n * @example 'gift_wrapping'\n */\n key: string;\n\n /**\n * The value associated with the attribute key. This is a freeform string\n * that can store any information the buyer or app provides.\n *\n * Attribute values are always strings. To store structured data, serialize\n * it to JSON and parse it when reading.\n *\n * @example 'Please use red wrapping paper'\n */\n value: string;\n}" + "value": "export interface MailingAddress {\n /**\n * The buyer's full name, typically a combination of first and last name.\n * The value is `undefined` if the buyer didn't provide a name.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'John Doe'\n */\n name?: string;\n\n /**\n * The buyer's first name. Use this alongside `lastName` when you need to\n * display or process name parts separately. The value is `undefined` if\n * the buyer didn't provide a first name or the store doesn't collect\n * split names.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'John'\n */\n firstName?: string;\n\n /**\n * The buyer's last name. Use this alongside `firstName` when you need to\n * display or process name parts separately. The value is `undefined` if\n * the buyer didn't provide a last name or the store doesn't collect\n * split names.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'Doe'\n */\n lastName?: string;\n\n /**\n * The buyer's company name. The value is `undefined` if the buyer didn't\n * enter a company or the store doesn't collect company names.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'Shopify'\n */\n company?: string;\n\n /**\n * The first line of the street address, including the street number and\n * name. The value is `undefined` if the buyer hasn't entered an address yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example '151 O'Connor Street'\n */\n address1?: string;\n\n /**\n * The second line of the buyer's address, such as apartment number, suite,\n * or unit. The value is `undefined` if the buyer didn't provide a second\n * address line.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'Ground floor'\n */\n address2?: string;\n\n /**\n * The city, town, or village of the address. The value is `undefined` if\n * the buyer hasn't entered a city yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'Ottawa'\n */\n city?: string;\n\n /**\n * The postal code or ZIP code of the address, used for mail sorting and\n * delivery routing. The value is `undefined` if the buyer hasn't entered\n * one yet or the country doesn't use postal codes.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'K2P 2L8'\n */\n zip?: string;\n\n /**\n * The two-letter country code in [ISO 3166 Alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)\n * format. The value is `undefined` if the buyer hasn't selected a country\n * yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'CA' for Canada.\n */\n countryCode?: CountryCode;\n\n /**\n * The province, state, prefecture, or region code of the address. The\n * format varies by country. The value is `undefined` if the buyer hasn't\n * selected one yet or the country doesn't have provinces.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'ON' for Ontario.\n */\n provinceCode?: string;\n\n /**\n * The phone number associated with the address, typically in international\n * format. The value is `undefined` if the buyer didn't provide a phone\n * number or the store doesn't collect phone numbers.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example '+1 613 111 2222'\n */\n phone?: string;\n}" } }, - "PaymentOption": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "PaymentOption", - "description": "A payment option presented to the buyer.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "A session-scoped identifier for this payment option. This handle isn't globally unique; it's specific to the current checkout session or the shop." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "| 'creditCard'\n | 'deferred'\n | 'local'\n | 'manualPayment'\n | 'offsite'\n | 'other'\n | 'paymentOnDelivery'\n | 'redeemable'\n | 'wallet'\n | 'customOnsite'", - "description": "The type of the payment option.\n\nShops can be configured to support many different payment options. Some options are available only to buyers in specific regions.\n\n| Type | Description |\n|---|---|\n| `creditCard` | A vaulted or manually entered credit card. |\n| `deferred` | A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. |\n| `local` | A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market |\n| `manualPayment` | A manual payment option such as an in-person retail transaction. |\n| `offsite` | A payment processed outside of Shopify's checkout, excluding integrated wallets. |\n| `other` | Another type of payment not defined here. |\n| `paymentOnDelivery` | A payment collected on delivery. |\n| `redeemable` | A redeemable payment option such as a gift card or store credit. |\n| `wallet` | An integrated wallet such as PayPal, Google Pay, or Apple Pay. |\n| `customOnsite` | A custom payment option that's processed through a checkout extension with a payments app. |" - } - ], - "value": "export interface PaymentOption {\n /**\n * The type of the payment option.\n *\n * Shops can be configured to support many different payment options. Some options are available only to buyers in specific regions.\n *\n * | Type | Description |\n * |---|---|\n * | `creditCard` | A vaulted or manually entered credit card. |\n * | `deferred` | A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. |\n * | `local` | A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market |\n * | `manualPayment` | A manual payment option such as an in-person retail transaction. |\n * | `offsite` | A payment processed outside of Shopify's checkout, excluding integrated wallets. |\n * | `other` | Another type of payment not defined here. |\n * | `paymentOnDelivery` | A payment collected on delivery. |\n * | `redeemable` | A redeemable payment option such as a gift card or store credit. |\n * | `wallet` | An integrated wallet such as PayPal, Google Pay, or Apple Pay. |\n * | `customOnsite` | A custom payment option that's processed through a checkout extension with a payments app. |\n */\n type:\n | 'creditCard'\n | 'deferred'\n | 'local'\n | 'manualPayment'\n | 'offsite'\n | 'other'\n | 'paymentOnDelivery'\n | 'redeemable'\n | 'wallet'\n | 'customOnsite';\n\n /**\n * A session-scoped identifier for this payment option. This handle isn't globally unique; it's specific to the current checkout session or the shop.\n */\n handle: string;\n}" + "CountryCode": { + "src/shared.ts": { + "filePath": "src/shared.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CountryCode", + "value": "'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ'", + "description": "" } }, - "MailingAddress": { + "ShippingAddress": { "src/surfaces/checkout/api/shared.ts": { "filePath": "src/surfaces/checkout/api/shared.ts", - "name": "MailingAddress", + "name": "ShippingAddress", "description": "", "isPublicDocs": true, "members": [ @@ -875,7 +376,7 @@ "syntaxKind": "PropertySignature", "name": "address1", "value": "string", - "description": "The first line of the street address, including the street number and name. The value is `undefined` if the buyer hasn't entered an address yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The first line of the street address, including the street number and name. The value is `undefined` if the buyer hasn't entered an address yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -895,7 +396,7 @@ "syntaxKind": "PropertySignature", "name": "address2", "value": "string", - "description": "The second line of the buyer's address, such as apartment number, suite, or unit. The value is `undefined` if the buyer didn't provide a second address line.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The second line of the buyer's address, such as apartment number, suite, or unit. The value is `undefined` if the buyer didn't provide a second address line.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -915,7 +416,7 @@ "syntaxKind": "PropertySignature", "name": "city", "value": "string", - "description": "The city, town, or village of the address. The value is `undefined` if the buyer hasn't entered a city yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The city, town, or village of the address. The value is `undefined` if the buyer hasn't entered a city yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -935,7 +436,7 @@ "syntaxKind": "PropertySignature", "name": "company", "value": "string", - "description": "The buyer's company name. The value is `undefined` if the buyer didn't enter a company or the store doesn't collect company names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The buyer's company name. The value is `undefined` if the buyer didn't enter a company or the store doesn't collect company names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -955,7 +456,7 @@ "syntaxKind": "PropertySignature", "name": "countryCode", "value": "CountryCode", - "description": "The two-letter country code in [ISO 3166 Alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format. The value is `undefined` if the buyer hasn't selected a country yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The two-letter country code in [ISO 3166 Alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format. The value is `undefined` if the buyer hasn't selected a country yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -975,7 +476,7 @@ "syntaxKind": "PropertySignature", "name": "firstName", "value": "string", - "description": "The buyer's first name. Use this alongside `lastName` when you need to display or process name parts separately. The value is `undefined` if the buyer didn't provide a first name or the store doesn't collect split names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The buyer's first name. Use this alongside `lastName` when you need to display or process name parts separately. The value is `undefined` if the buyer didn't provide a first name or the store doesn't collect split names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -995,7 +496,7 @@ "syntaxKind": "PropertySignature", "name": "lastName", "value": "string", - "description": "The buyer's last name. Use this alongside `firstName` when you need to display or process name parts separately. The value is `undefined` if the buyer didn't provide a last name or the store doesn't collect split names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The buyer's last name. Use this alongside `firstName` when you need to display or process name parts separately. The value is `undefined` if the buyer didn't provide a last name or the store doesn't collect split names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -1015,7 +516,7 @@ "syntaxKind": "PropertySignature", "name": "name", "value": "string", - "description": "The buyer's full name, typically a combination of first and last name. The value is `undefined` if the buyer didn't provide a name.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The buyer's full name, typically a combination of first and last name. The value is `undefined` if the buyer didn't provide a name.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -1030,12 +531,20 @@ } ] }, + { + "filePath": "src/surfaces/checkout/api/shared.ts", + "syntaxKind": "PropertySignature", + "name": "oneTimeUse", + "value": "boolean", + "description": "Controls whether the address is saved to the buyer's account. When `true`, the address won't be saved and is only used for this checkout. When `false` or `undefined`, the address might be saved to the buyer's account for future use.", + "isOptional": true + }, { "filePath": "src/surfaces/checkout/api/shared.ts", "syntaxKind": "PropertySignature", "name": "phone", "value": "string", - "description": "The phone number associated with the address, typically in international format. The value is `undefined` if the buyer didn't provide a phone number or the store doesn't collect phone numbers.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The phone number associated with the address, typically in international format. The value is `undefined` if the buyer didn't provide a phone number or the store doesn't collect phone numbers.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -1055,7 +564,7 @@ "syntaxKind": "PropertySignature", "name": "provinceCode", "value": "string", - "description": "The province, state, prefecture, or region code of the address. The format varies by country. The value is `undefined` if the buyer hasn't selected one yet or the country doesn't have provinces.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The province, state, prefecture, or region code of the address. The format varies by country. The value is `undefined` if the buyer hasn't selected one yet or the country doesn't have provinces.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -1075,7 +584,7 @@ "syntaxKind": "PropertySignature", "name": "zip", "value": "string", - "description": "The postal code or ZIP code of the address, used for mail sorting and delivery routing. The value is `undefined` if the buyer hasn't entered one yet or the country doesn't use postal codes.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The postal code or ZIP code of the address, used for mail sorting and delivery routing. The value is `undefined` if the buyer hasn't entered one yet or the country doesn't use postal codes.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -1091,123 +600,205 @@ ] } ], - "value": "export interface MailingAddress {\n /**\n * The buyer's full name, typically a combination of first and last name.\n * The value is `undefined` if the buyer didn't provide a name.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'John Doe'\n */\n name?: string;\n\n /**\n * The buyer's first name. Use this alongside `lastName` when you need to\n * display or process name parts separately. The value is `undefined` if\n * the buyer didn't provide a first name or the store doesn't collect\n * split names.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'John'\n */\n firstName?: string;\n\n /**\n * The buyer's last name. Use this alongside `firstName` when you need to\n * display or process name parts separately. The value is `undefined` if\n * the buyer didn't provide a last name or the store doesn't collect\n * split names.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'Doe'\n */\n lastName?: string;\n\n /**\n * The buyer's company name. The value is `undefined` if the buyer didn't\n * enter a company or the store doesn't collect company names.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'Shopify'\n */\n company?: string;\n\n /**\n * The first line of the street address, including the street number and\n * name. The value is `undefined` if the buyer hasn't entered an address yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example '151 O'Connor Street'\n */\n address1?: string;\n\n /**\n * The second line of the buyer's address, such as apartment number, suite,\n * or unit. The value is `undefined` if the buyer didn't provide a second\n * address line.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'Ground floor'\n */\n address2?: string;\n\n /**\n * The city, town, or village of the address. The value is `undefined` if\n * the buyer hasn't entered a city yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'Ottawa'\n */\n city?: string;\n\n /**\n * The postal code or ZIP code of the address, used for mail sorting and\n * delivery routing. The value is `undefined` if the buyer hasn't entered\n * one yet or the country doesn't use postal codes.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'K2P 2L8'\n */\n zip?: string;\n\n /**\n * The two-letter country code in [ISO 3166 Alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2)\n * format. The value is `undefined` if the buyer hasn't selected a country\n * yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'CA' for Canada.\n */\n countryCode?: CountryCode;\n\n /**\n * The province, state, prefecture, or region code of the address. The\n * format varies by country. The value is `undefined` if the buyer hasn't\n * selected one yet or the country doesn't have provinces.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'ON' for Ontario.\n */\n provinceCode?: string;\n\n /**\n * The phone number associated with the address, typically in international\n * format. The value is `undefined` if the buyer didn't provide a phone\n * number or the store doesn't collect phone numbers.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example '+1 613 111 2222'\n */\n phone?: string;\n}" + "value": "export interface ShippingAddress extends MailingAddress {\n /**\n * Controls whether the address is saved to the buyer's account. When\n * `true`, the address won't be saved and is only used for this checkout.\n * When `false` or `undefined`, the address might be saved to the buyer's\n * account for future use.\n */\n oneTimeUse?: boolean;\n}" } }, - "CountryCode": { - "src/shared.ts": { - "filePath": "src/shared.ts", + "AnyComponent": { + "src/surfaces/checkout/shared.ts": { + "filePath": "src/surfaces/checkout/shared.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "CountryCode", - "value": "'AC' | 'AD' | 'AE' | 'AF' | 'AG' | 'AI' | 'AL' | 'AM' | 'AN' | 'AO' | 'AR' | 'AT' | 'AU' | 'AW' | 'AX' | 'AZ' | 'BA' | 'BB' | 'BD' | 'BE' | 'BF' | 'BG' | 'BH' | 'BI' | 'BJ' | 'BL' | 'BM' | 'BN' | 'BO' | 'BQ' | 'BR' | 'BS' | 'BT' | 'BV' | 'BW' | 'BY' | 'BZ' | 'CA' | 'CC' | 'CD' | 'CF' | 'CG' | 'CH' | 'CI' | 'CK' | 'CL' | 'CM' | 'CN' | 'CO' | 'CR' | 'CU' | 'CV' | 'CW' | 'CX' | 'CY' | 'CZ' | 'DE' | 'DJ' | 'DK' | 'DM' | 'DO' | 'DZ' | 'EC' | 'EE' | 'EG' | 'EH' | 'ER' | 'ES' | 'ET' | 'FI' | 'FJ' | 'FK' | 'FO' | 'FR' | 'GA' | 'GB' | 'GD' | 'GE' | 'GF' | 'GG' | 'GH' | 'GI' | 'GL' | 'GM' | 'GN' | 'GP' | 'GQ' | 'GR' | 'GS' | 'GT' | 'GW' | 'GY' | 'HK' | 'HM' | 'HN' | 'HR' | 'HT' | 'HU' | 'ID' | 'IE' | 'IL' | 'IM' | 'IN' | 'IO' | 'IQ' | 'IR' | 'IS' | 'IT' | 'JE' | 'JM' | 'JO' | 'JP' | 'KE' | 'KG' | 'KH' | 'KI' | 'KM' | 'KN' | 'KP' | 'KR' | 'KW' | 'KY' | 'KZ' | 'LA' | 'LB' | 'LC' | 'LI' | 'LK' | 'LR' | 'LS' | 'LT' | 'LU' | 'LV' | 'LY' | 'MA' | 'MC' | 'MD' | 'ME' | 'MF' | 'MG' | 'MK' | 'ML' | 'MM' | 'MN' | 'MO' | 'MQ' | 'MR' | 'MS' | 'MT' | 'MU' | 'MV' | 'MW' | 'MX' | 'MY' | 'MZ' | 'NA' | 'NC' | 'NE' | 'NF' | 'NG' | 'NI' | 'NL' | 'NO' | 'NP' | 'NR' | 'NU' | 'NZ' | 'OM' | 'PA' | 'PE' | 'PF' | 'PG' | 'PH' | 'PK' | 'PL' | 'PM' | 'PN' | 'PS' | 'PT' | 'PY' | 'QA' | 'RE' | 'RO' | 'RS' | 'RU' | 'RW' | 'SA' | 'SB' | 'SC' | 'SD' | 'SE' | 'SG' | 'SH' | 'SI' | 'SJ' | 'SK' | 'SL' | 'SM' | 'SN' | 'SO' | 'SR' | 'SS' | 'ST' | 'SV' | 'SX' | 'SY' | 'SZ' | 'TA' | 'TC' | 'TD' | 'TF' | 'TG' | 'TH' | 'TJ' | 'TK' | 'TL' | 'TM' | 'TN' | 'TO' | 'TR' | 'TT' | 'TV' | 'TW' | 'TZ' | 'UA' | 'UG' | 'UM' | 'US' | 'UY' | 'UZ' | 'VA' | 'VC' | 'VE' | 'VG' | 'VN' | 'VU' | 'WF' | 'WS' | 'XK' | 'YE' | 'YT' | 'ZA' | 'ZM' | 'ZW' | 'ZZ'", - "description": "" + "name": "AnyComponent", + "value": "'Abbreviation' | 'Announcement' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'Chat' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ClipboardItem' | 'ConsentCheckbox' | 'ConsentPhoneField' | 'DateField' | 'DatePicker' | 'Details' | 'Divider' | 'DropZone' | 'EmailField' | 'Form' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Map' | 'MapMarker' | 'Modal' | 'MoneyField' | 'NumberField' | 'Option' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'PaymentIcon' | 'PhoneField' | 'Popover' | 'PressButton' | 'ProductThumbnail' | 'Progress' | 'QueryContainer' | 'QRCode' | 'ScrollBox' | 'Section' | 'Select' | 'Sheet' | 'SkeletonParagraph' | 'Spinner' | 'Stack' | 'Summary' | 'Switch' | 'Text' | 'TextArea' | 'TextField' | 'Time' | 'Tooltip' | 'UnorderedList' | 'UrlField'", + "description": "", + "isPublicDocs": true } }, - "BuyerIdentity": { + "Announcement": { + "src/surfaces/checkout/api/announcement/announcement.ts": { + "filePath": "src/surfaces/checkout/api/announcement/announcement.ts", + "name": "Announcement", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/announcement/announcement.ts", + "syntaxKind": "PropertySignature", + "name": "announcement", + "value": "{ close(): void; addEventListener(type: \"close\", cb: () => void): void; removeEventListener(type: \"close\", cb: () => void): void; }", + "description": "" + } + ], + "value": "export interface Announcement {\n announcement: {\n close(): void;\n addEventListener(type: 'close', cb: () => void): void;\n removeEventListener(type: 'close', cb: () => void): void;\n };\n}" + } + }, + "Metafield": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "BuyerIdentity", - "description": "Information about the buyer who is completing the checkout.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data). The `customer` and `purchasingCompany` properties require level 1 access. The `email` and `phone` properties require level 2 access.", + "name": "Metafield", + "description": "Metadata associated with the checkout. See the [metafields documentation](/docs/apps/build/custom-data/metafields) for more information on how metafields work.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "customer", - "value": "SubscribableSignalLike", - "description": "The buyer's customer account, including their ID and whether they've accepted marketing. The value is `undefined` if the buyer isn't a known customer for this shop or if they haven't logged in yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "name": "key", + "value": "string", + "description": "The name of the metafield.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'delivery_instructions'", + "title": "Example" + } + ] + } + ] }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "email", - "value": "SubscribableSignalLike", - "description": "The email address the buyer provided during checkout. The value is `undefined` if the app doesn't have access to customer data.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "name": "namespace", + "value": "string", + "description": "A container for a set of metafields. You need to define a custom namespace for your metafields to distinguish them from the metafields used by other apps.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'my_app'", + "title": "Example" + } + ] + } + ] }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "phone", - "value": "SubscribableSignalLike", - "description": "The phone number the buyer provided during checkout. The value is `undefined` if no phone number was provided or the app doesn't have access to customer data.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "name": "value", + "value": "string | number", + "description": "The information to be stored as metadata." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "purchasingCompany", - "value": "SubscribableSignalLike", - "description": "The company and company location that a B2B (business-to-business) customer is purchasing on behalf of. Use this to identify the business context of the order. The value is `undefined` if the buyer isn't a B2B customer.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "name": "valueType", + "value": "'integer' | 'string' | 'json_string'", + "description": "The metafield's information type.\n\n- `'integer'`: A whole number value.\n- `'string'`: A plain text value.\n- `'json_string'`: A JSON-encoded string value." } ], - "value": "export interface BuyerIdentity {\n /**\n * The buyer's customer account, including their ID and whether they've accepted marketing. The value is `undefined` if the buyer isn't a\n * known customer for this shop or if they haven't logged in yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n customer: SubscribableSignalLike;\n\n /**\n * The email address the buyer provided during checkout. The value is `undefined` if the app doesn't have access to customer data.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n email: SubscribableSignalLike;\n\n /**\n * The phone number the buyer provided during checkout. The value is `undefined` if no phone number was provided or the app doesn't have access to customer data.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n phone: SubscribableSignalLike;\n\n /**\n * The company and company location that a B2B (business-to-business) customer is purchasing on behalf of. Use this to identify the business context of the order. The value is `undefined` if the buyer isn't a B2B customer.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n purchasingCompany: SubscribableSignalLike;\n}" + "value": "export interface Metafield {\n /**\n * The name of the metafield.\n *\n * @example 'delivery_instructions'\n */\n key: string;\n\n /**\n * A container for a set of metafields. You need to define a custom\n * namespace for your metafields to distinguish them from the metafields\n * used by other apps.\n *\n * @example 'my_app'\n */\n namespace: string;\n\n /**\n * The information to be stored as metadata.\n */\n value: string | number;\n\n /**\n * The metafield's information type.\n *\n * - `'integer'`: A whole number value.\n * - `'string'`: A plain text value.\n * - `'json_string'`: A JSON-encoded string value.\n */\n valueType: 'integer' | 'string' | 'json_string';\n}" } }, - "Customer": { + "AppMetafield": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "Customer", - "description": "Information about a customer who has previously purchased from this shop.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "name": "AppMetafield", + "description": "Represents a custom [metafield](/docs/apps/build/custom-data/metafields) attached to a resource such as a product, variant, customer, or shop.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "acceptsEmailMarketing", - "value": "boolean", - "description": "Whether the customer has opted in to email marketing.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "name": "key", + "value": "string", + "description": "The identifier for the metafield within its namespace, such as `'ingredients'` or `'shipping_weight'`." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "acceptsMarketing", - "value": "boolean", - "description": "Whether the customer has opted in to receiving marketing communications from the merchant, such as email campaigns and promotional offers.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n\n> Caution: This field is deprecated and will be removed in a future version. Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead.", - "deprecationMessage": "Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead." + "name": "namespace", + "value": "string", + "description": "The namespace that the metafield belongs to. Namespaces group related metafields and prevent naming collisions between different apps.\n\nApp owned metafield namespaces are returned using the `$app` format. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "acceptsSmsMarketing", - "value": "boolean", - "description": "Whether the customer has opted in to SMS marketing.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "name": "type", + "value": "string", + "description": "The metafield's [type name](/docs/apps/build/custom-data/metafields/list-of-data-types), such as `'single_line_text_field'` or `'json'`. This is the full type identifier, whereas `valueType` is a simplified category." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "email", + "name": "value", "value": "string", - "description": "The email address associated with the customer's account. The value is `undefined` if the app doesn't have the required access level.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true + "description": "The value of a metafield, stored as a string regardless of the underlying type. For JSON metafields, parse the string to access structured data." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "firstName", + "name": "valueType", + "value": "'boolean' | 'float' | 'integer' | 'json_string' | 'string'", + "description": "The metafield's information type.\n\n- `'boolean'`: A true or false value.\n- `'float'`: A decimal number value.\n- `'integer'`: A whole number value.\n- `'json_string'`: A JSON-encoded string value.\n- `'string'`: A plain text value." + } + ], + "value": "export interface AppMetafield {\n /**\n * The identifier for the metafield within its namespace, such as `'ingredients'` or `'shipping_weight'`.\n */\n key: string;\n\n /**\n * The namespace that the metafield belongs to. Namespaces group related metafields and prevent naming collisions between different apps.\n *\n * App owned metafield namespaces are returned using the `$app` format. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n */\n namespace: string;\n\n /**\n * The value of a metafield, stored as a string regardless of the underlying type. For JSON metafields, parse the string to access structured data.\n */\n value: string;\n\n /**\n * The metafield's information type.\n *\n * - `'boolean'`: A true or false value.\n * - `'float'`: A decimal number value.\n * - `'integer'`: A whole number value.\n * - `'json_string'`: A JSON-encoded string value.\n * - `'string'`: A plain text value.\n */\n valueType: 'boolean' | 'float' | 'integer' | 'json_string' | 'string';\n\n /**\n * The metafield's [type name](/docs/apps/build/custom-data/metafields/list-of-data-types), such as `'single_line_text_field'` or `'json'`. This is the full type identifier, whereas `valueType` is a simplified category.\n */\n type: string;\n}" + } + }, + "CartMetafield": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "CartMetafield", + "description": "Represents a custom metadata attached to the cart. Unlike `AppMetafield`, cart metafield values are always strings and don't include a `valueType` discriminator.\n\nCart [metafields](/docs/apps/build/custom-data/metafields) are set by extensions using `applyMetafieldChange()` and can be copied to order metafields at order creation time.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "key", "value": "string", - "description": "The customer's first name. The value is `undefined` if the app doesn't have the required access level.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true + "description": "The key name of a metafield, such as `'delivery_instructions'` or `'gift_message'`. Together with `namespace`, this uniquely identifies the metafield on the cart." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "fullName", + "name": "namespace", "value": "string", - "description": "The customer's full name, typically a combination of first and last name. The value is `undefined` if the app doesn't have the required access level.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true + "description": "The namespace for a metafield, such as `'custom'` or `'my_app'`. Together with `key`, this uniquely identifies the metafield on the cart." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "string", + "description": "The metafield's [type name](/docs/apps/build/custom-data/metafields/list-of-data-types), such as `'single_line_text_field'` or `'json'`." }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The string value stored in the cart metafield. Unlike `AppMetafield`, cart metafield values are always strings." + } + ], + "value": "export interface CartMetafield {\n /**\n * The key name of a metafield, such as `'delivery_instructions'` or `'gift_message'`. Together with `namespace`, this uniquely identifies the metafield on the cart.\n */\n key: string;\n\n /**\n * The namespace for a metafield, such as `'custom'` or `'my_app'`. Together with `key`, this uniquely identifies the metafield on the cart.\n */\n namespace: string;\n\n /**\n * The string value stored in the cart metafield. Unlike `AppMetafield`, cart metafield values are always strings.\n */\n value: string;\n\n /**\n * The metafield's [type name](/docs/apps/build/custom-data/metafields/list-of-data-types), such as `'single_line_text_field'` or `'json'`.\n */\n type: string;\n}" + } + }, + "AppMetafieldEntryTarget": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "AppMetafieldEntryTarget", + "description": "The Shopify resource that a metafield is attached to. Each entry identifies a specific resource by its type and globally-unique ID, so you can trace where the data comes from.", + "isPublicDocs": true, + "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "id", "value": "string", - "description": "An identifier for the customer in the format `gid://shopify/Customer/`. This value is unique per shop.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The globally-unique identifier of the Shopify resource, in [GID](/docs/api/usage/gids) format. Use this value to match the metafield to a specific resource in your extension or when querying the [Storefront API](/docs/api/storefront).", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'gid://shopify/Customer/123'", + "code": "'gid://shopify/Product/123'", "title": "Example" } ] @@ -1217,206 +808,156 @@ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "image", - "value": "ImageDetails", - "description": "The customer's profile image, such as a Gravatar avatar. Use this to personalize the extension UI for the logged-in buyer.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "lastName", - "value": "string", - "description": "The customer's last name. The value is `undefined` if the app doesn't have the required access level.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "ordersCount", - "value": "number", - "description": "The number of orders the customer has previously placed with this shop.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "phone", - "value": "string", - "description": "The phone number associated with the customer's account. The value is `undefined` if no phone number is on file or the app doesn't have the required access level.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "storeCreditAccounts", - "value": "StoreCreditAccount[]", - "description": "The store credit accounts owned by this customer that can be used as payment during checkout. Each account has a balance representing available store credit.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isPrivate": true + "name": "type", + "value": "| 'customer'\n | 'product'\n | 'shop'\n | 'shopUser'\n | 'variant'\n | 'company'\n | 'companyLocation'\n | 'cart'", + "description": "The kind of Shopify resource this metafield belongs to:\n\n- `'customer'`: The customer who placed the order.\n- `'product'`: A product in the merchant's catalog.\n- `'shop'`: The merchant's shop.\n- `'shopUser'`: A staff member or collaborator account on the shop.\n- `'variant'`: A specific variant of a product.\n- `'company'`: A [B2B](/docs/apps/build/b2b) company associated with the order.\n- `'companyLocation'`: A location belonging to a [B2B](/docs/apps/build/b2b) company.\n- `'cart'`: The cart associated with the checkout.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`." } ], - "value": "export interface Customer {\n /**\n * An identifier for the customer in the format `gid://shopify/Customer/`. This value is unique per shop.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'gid://shopify/Customer/123'\n */\n id: string;\n /**\n * The email address associated with the customer's account. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n email?: string;\n /**\n * The phone number associated with the customer's account. The value is `undefined` if no phone number is on file or the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n phone?: string;\n /**\n * The customer's full name, typically a combination of first and last name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n fullName?: string;\n /**\n * The customer's first name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n firstName?: string;\n /**\n * The customer's last name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n lastName?: string;\n /**\n * The customer's profile image, such as a Gravatar avatar. Use this to personalize the extension UI for the logged-in buyer.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n image: ImageDetails;\n /**\n * Whether the customer has opted in to receiving marketing communications from the merchant, such as email campaigns and promotional offers.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * > Caution: This field is deprecated and will be removed in a future version. Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead.\n *\n * @deprecated Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead.\n */\n acceptsMarketing: boolean;\n /**\n * Whether the customer has opted in to email marketing.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n acceptsEmailMarketing: boolean;\n /**\n * Whether the customer has opted in to SMS marketing.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n acceptsSmsMarketing: boolean;\n /**\n * The store credit accounts owned by this customer that can be used as payment during checkout. Each account has a balance representing available store credit.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @private\n */\n storeCreditAccounts: StoreCreditAccount[];\n /**\n * The number of orders the customer has previously placed with this shop.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n ordersCount: number;\n}" + "value": "export interface AppMetafieldEntryTarget {\n /**\n * The kind of Shopify resource this metafield belongs to:\n *\n * - `'customer'`: The customer who placed the order.\n * - `'product'`: A product in the merchant's catalog.\n * - `'shop'`: The merchant's shop.\n * - `'shopUser'`: A staff member or collaborator account on the shop.\n * - `'variant'`: A specific variant of a product.\n * - `'company'`: A [B2B](/docs/apps/build/b2b) company associated with the order.\n * - `'companyLocation'`: A location belonging to a [B2B](/docs/apps/build/b2b) company.\n * - `'cart'`: The cart associated with the checkout.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.\n */\n type:\n | 'customer'\n | 'product'\n | 'shop'\n | 'shopUser'\n | 'variant'\n | 'company'\n | 'companyLocation'\n | 'cart';\n\n /**\n * The globally-unique identifier of the Shopify resource, in [GID](/docs/api/usage/gids) format. Use this value to match the metafield to a specific resource in your extension or when querying the [Storefront API](/docs/api/storefront).\n *\n * @example 'gid://shopify/Product/123'\n */\n id: string;\n}" } }, - "ImageDetails": { + "AppMetafieldEntry": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "ImageDetails", - "description": "", + "name": "AppMetafieldEntry", + "description": "An entry that pairs a Shopify resource with one of its [metafields](/docs/apps/build/custom-data/metafields). Each entry contains a `target` identifying which resource the metafield belongs to and a `metafield` object with the actual data.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "altText", - "value": "string", - "description": "The alternative text for the image, used for accessibility. The value is `undefined` if the merchant hasn't provided alt text.", - "isOptional": true + "name": "metafield", + "value": "AppMetafield", + "description": "The metafield data, including the namespace, key, value, and content type. Use the `namespace` and `key` together to uniquely identify the metafield within its resource." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "url", - "value": "string", - "description": "The fully-qualified URL of the image. Use this to render the product or variant image in your extension." + "name": "target", + "value": "AppMetafieldEntryTarget", + "description": "The Shopify resource that this metafield is attached to, including the resource type (such as `'product'` or `'customer'`) and its globally-unique ID.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`." } ], - "value": "export interface ImageDetails {\n /**\n * The fully-qualified URL of the image. Use this to render the product or variant image in your extension.\n */\n url: string;\n\n /**\n * The alternative text for the image, used for accessibility. The value is `undefined` if the merchant hasn't provided alt text.\n */\n altText?: string;\n}" + "value": "export interface AppMetafieldEntry {\n /**\n * The Shopify resource that this metafield is attached to, including the resource type (such as `'product'` or `'customer'`) and its globally-unique ID.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when the type is `customer`, `company` or `companyLocation`.\n */\n target: AppMetafieldEntryTarget;\n\n /**\n * The metafield data, including the namespace, key, value, and content type. Use the `namespace` and `key` together to uniquely identify the metafield within its resource.\n */\n metafield: AppMetafield;\n}" } }, - "StoreCreditAccount": { + "Version": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "StoreCreditAccount", - "description": "A store credit account owned by the customer. Store credit is a form of payment that merchants can issue to customers for returns, refunds, or promotional purposes.", + "syntaxKind": "TypeAliasDeclaration", + "name": "Version", + "value": "string", + "description": "", + "isPublicDocs": true + } + }, + "CheckoutToken": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CheckoutToken", + "value": "string", + "description": "", + "isPublicDocs": true + } + }, + "Language": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "Language", + "description": "", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "balance", - "value": "Money", - "description": "The remaining balance available in this store credit account. This reflects the amount that can still be applied toward purchases." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "id", + "name": "isoCode", "value": "string", - "description": "A globally-unique identifier for the store credit account in the format `gid://shopify/StoreCreditAccount/`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'gid://shopify/StoreCreditAccount/1'", - "title": "Example" - } - ] - } - ] + "description": "The [BCP-47](https://en.wikipedia.org/wiki/IETF_language_tag) language tag that identifies the language. This is a standardized code that might include a base language and an optional region subtag separated by a dash. For example, `'en'` represents English and `'en-US'` represents English as used in the United States. The region subtag follows the [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) standard." } ], - "value": "export interface StoreCreditAccount {\n /**\n * A globally-unique identifier for the store credit account in the format `gid://shopify/StoreCreditAccount/`.\n *\n * @example 'gid://shopify/StoreCreditAccount/1'\n */\n id: string;\n /**\n * The remaining balance available in this store credit account. This reflects the amount that can still be applied toward purchases.\n */\n balance: Money;\n}" + "value": "export interface Language {\n /**\n * The [BCP-47](https://en.wikipedia.org/wiki/IETF_language_tag) language tag that identifies the language. This is a standardized code that might include a base language and an optional region subtag separated by a dash. For example, `'en'` represents English and `'en-US'` represents English as used in the United States. The region subtag follows the [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) standard.\n */\n isoCode: string;\n}" } }, - "PurchasingCompany": { + "Currency": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "PurchasingCompany", - "description": "The company and location that the [B2B](https://shopify.dev/docs/apps/build/b2b) customer is purchasing on behalf of. This is present only when the buyer is logged in as a business customer.", + "name": "Currency", + "description": "", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "company", - "value": "Company", - "description": "The company the B2B customer belongs to.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "location", - "value": "CompanyLocation", - "description": "The specific company location associated with this B2B purchase.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "name": "isoCode", + "value": "CurrencyCode", + "description": "The three-letter currency code in [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) format, such as `'USD'`, `'EUR'`, or `'CAD'`." } ], - "value": "export interface PurchasingCompany {\n /**\n * The company the B2B customer belongs to.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n company: Company;\n /**\n * The specific company location associated with this B2B purchase.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n location: CompanyLocation;\n}" + "value": "export interface Currency {\n /**\n * The three-letter currency code in [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) format, such as `'USD'`, `'EUR'`, or `'CAD'`.\n */\n isoCode: CurrencyCode;\n}" } }, - "Company": { + "CurrencyCode": { + "src/shared.ts": { + "filePath": "src/shared.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CurrencyCode", + "value": "'AED' | 'AFN' | 'ALL' | 'AMD' | 'ANG' | 'AOA' | 'ARS' | 'AUD' | 'AWG' | 'AZN' | 'BAM' | 'BBD' | 'BDT' | 'BGN' | 'BHD' | 'BIF' | 'BMD' | 'BND' | 'BOB' | 'BOV' | 'BRL' | 'BSD' | 'BTN' | 'BWP' | 'BYN' | 'BZD' | 'CAD' | 'CDF' | 'CHE' | 'CHF' | 'CHW' | 'CLF' | 'CLP' | 'CNY' | 'COP' | 'COU' | 'CRC' | 'CUC' | 'CUP' | 'CVE' | 'CZK' | 'DJF' | 'DKK' | 'DOP' | 'DZD' | 'EGP' | 'ERN' | 'ETB' | 'EUR' | 'FJD' | 'FKP' | 'GBP' | 'GEL' | 'GHS' | 'GIP' | 'GMD' | 'GNF' | 'GTQ' | 'GYD' | 'HKD' | 'HNL' | 'HRK' | 'HTG' | 'HUF' | 'IDR' | 'ILS' | 'INR' | 'IQD' | 'IRR' | 'ISK' | 'JMD' | 'JOD' | 'JPY' | 'KES' | 'KGS' | 'KHR' | 'KMF' | 'KPW' | 'KRW' | 'KWD' | 'KYD' | 'KZT' | 'LAK' | 'LBP' | 'LKR' | 'LRD' | 'LSL' | 'LYD' | 'MAD' | 'MDL' | 'MGA' | 'MKD' | 'MMK' | 'MNT' | 'MOP' | 'MRU' | 'MUR' | 'MVR' | 'MWK' | 'MXN' | 'MXV' | 'MYR' | 'MZN' | 'NAD' | 'NGN' | 'NIO' | 'NOK' | 'NPR' | 'NZD' | 'OMR' | 'PAB' | 'PEN' | 'PGK' | 'PHP' | 'PKR' | 'PLN' | 'PYG' | 'QAR' | 'RON' | 'RSD' | 'RUB' | 'RWF' | 'SAR' | 'SBD' | 'SCR' | 'SDG' | 'SEK' | 'SGD' | 'SHP' | 'SLL' | 'SOS' | 'SRD' | 'SSP' | 'STN' | 'SVC' | 'SYP' | 'SZL' | 'THB' | 'TJS' | 'TMT' | 'TND' | 'TOP' | 'TRY' | 'TTD' | 'TWD' | 'TZS' | 'UAH' | 'UGX' | 'USD' | 'USN' | 'UYI' | 'UYU' | 'UYW' | 'UZS' | 'VES' | 'VND' | 'VUV' | 'WST' | 'XAF' | 'XAG' | 'XAU' | 'XBA' | 'XBB' | 'XBC' | 'XBD' | 'XCD' | 'XDR' | 'XOF' | 'XPD' | 'XPF' | 'XPT' | 'XSU' | 'XTS' | 'XUA' | 'XXX' | 'YER' | 'ZAR' | 'ZMW' | 'ZWL'", + "description": "" + } + }, + "Market": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "Company", - "description": "", + "name": "Market", + "description": "A [Shopify Market](/docs/apps/build/markets) that represents a group of one or more regions for international selling.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "externalId", + "name": "handle", "value": "string", - "description": "A merchant-defined external identifier for the company. The value is `undefined` if the merchant hasn't set one.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true + "description": "The human-readable, shop-scoped identifier for the market, such as `'us'` or `'eu'`. Merchants define these handles when configuring [Shopify Markets](/docs/apps/build/markets)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "id", "value": "string", - "description": "A globally-unique identifier for the company in the format `gid://shopify/Company/`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'gid://shopify/Company/123'", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "name", - "value": "string", - "description": "The company's display name.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "description": "A globally-unique identifier for the market in the format `gid://shopify/Market/`." } ], - "value": "export interface Company {\n /**\n * A globally-unique identifier for the company in the format `gid://shopify/Company/`.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'gid://shopify/Company/123'\n */\n id: string;\n /**\n * The company's display name.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n name: string;\n /**\n * A merchant-defined external identifier for the company. The value is `undefined` if the merchant hasn't set one.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n externalId?: string;\n}" + "value": "export interface Market {\n /**\n * A globally-unique identifier for the market in the format `gid://shopify/Market/`.\n */\n id: string;\n\n /**\n * The human-readable, shop-scoped identifier for the market, such as `'us'` or `'eu'`. Merchants define these handles when configuring [Shopify Markets](/docs/apps/build/markets).\n */\n handle: string;\n}" } }, - "CompanyLocation": { + "LocalizedField": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "CompanyLocation", + "name": "LocalizedField", "description": "", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "externalId", - "value": "string", - "description": "A merchant-defined external identifier for the company location. The value is `undefined` if the merchant hasn't set one.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true + "name": "key", + "value": "LocalizedFieldKey", + "description": "The identifier for the localized field, indicating the type of information collected (for example, a tax credential or shipping credential for a specific country)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "id", + "name": "title", "value": "string", - "description": "A globally-unique identifier for the company location in the format `gid://shopify/CompanyLocation/`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The localized display label for the field, suitable for rendering in the UI.", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'gid://shopify/CompanyLocation/123'", + "code": "'CPF/CNPJ' for a Brazilian tax credential", "title": "Example" } ] @@ -1426,12 +967,21 @@ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "name", + "name": "value", "value": "string", - "description": "The display name of the company location.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "description": "The current value entered by the buyer for this field." } ], - "value": "export interface CompanyLocation {\n /**\n * A globally-unique identifier for the company location in the format `gid://shopify/CompanyLocation/`.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'gid://shopify/CompanyLocation/123'\n */\n id: string;\n /**\n * The display name of the company location.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n name: string;\n /**\n * A merchant-defined external identifier for the company location. The value is `undefined` if the merchant hasn't set one.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n externalId?: string;\n}" + "value": "export interface LocalizedField {\n /**\n * The identifier for the localized field, indicating the type of information\n * collected (for example, a tax credential or shipping credential for a\n * specific country).\n */\n key: LocalizedFieldKey;\n\n /**\n * The localized display label for the field, suitable for rendering in the UI.\n *\n * @example 'CPF/CNPJ' for a Brazilian tax credential\n */\n title: string;\n\n /**\n * The current value entered by the buyer for this field.\n */\n value: string;\n}" + } + }, + "LocalizedFieldKey": { + "src/shared.ts": { + "filePath": "src/shared.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "LocalizedFieldKey", + "value": "'SHIPPING_CREDENTIAL_BR' | 'SHIPPING_CREDENTIAL_CL' | 'SHIPPING_CREDENTIAL_CN' | 'SHIPPING_CREDENTIAL_CO' | 'SHIPPING_CREDENTIAL_CR' | 'SHIPPING_CREDENTIAL_EC' | 'SHIPPING_CREDENTIAL_ES' | 'SHIPPING_CREDENTIAL_GT' | 'SHIPPING_CREDENTIAL_ID' | 'SHIPPING_CREDENTIAL_KR' | 'SHIPPING_CREDENTIAL_MY' | 'SHIPPING_CREDENTIAL_MX' | 'SHIPPING_CREDENTIAL_PE' | 'SHIPPING_CREDENTIAL_PT' | 'SHIPPING_CREDENTIAL_PY' | 'SHIPPING_CREDENTIAL_TR' | 'SHIPPING_CREDENTIAL_TW' | 'SHIPPING_CREDENTIAL_TYPE_CO' | 'TAX_CREDENTIAL_BR' | 'TAX_CREDENTIAL_CL' | 'TAX_CREDENTIAL_CO' | 'TAX_CREDENTIAL_CR' | 'TAX_CREDENTIAL_EC' | 'TAX_CREDENTIAL_ES' | 'TAX_CREDENTIAL_GT' | 'TAX_CREDENTIAL_ID' | 'TAX_CREDENTIAL_IT' | 'TAX_CREDENTIAL_MX' | 'TAX_CREDENTIAL_MY' | 'TAX_CREDENTIAL_PE' | 'TAX_CREDENTIAL_PT' | 'TAX_CREDENTIAL_PY' | 'TAX_CREDENTIAL_TR' | 'TAX_CREDENTIAL_TYPE_CO' | 'TAX_CREDENTIAL_TYPE_MX' | 'TAX_CREDENTIAL_USE_MX' | 'TAX_EMAIL_IT'", + "description": "A union of keys for the localized fields that are required by certain countries." } }, "BuyerJourney": { @@ -1460,7 +1010,7 @@ "syntaxKind": "MethodSignature", "name": "intercept", "value": "(interceptor: Interceptor) => Promise<() => void>", - "description": "Installs a function for intercepting and preventing progress on checkout.\n\nThis returns a promise that resolves to a teardown function. Calling the teardown function removes the interceptor.\n\nTo block checkout progress, you must set the [block_progress](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#block-progress) capability in your extension's configuration.\n\nIf you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension.\n\nIf the merchant hasn't allowed your extension to block checkout progress, show a warning in the [checkout editor](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor)." + "description": "Installs a function for intercepting and preventing progress on checkout.\n\nThis returns a promise that resolves to a teardown function. Calling the teardown function removes the interceptor.\n\nTo block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#block-progress) capability in your extension's configuration.\n\nIf you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension.\n\nIf the merchant hasn't allowed your extension to block checkout progress, show a warning in the [checkout editor](/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -1470,7 +1020,47 @@ "description": "All possible steps the buyer can take to complete checkout. These steps vary depending on whether the checkout is one-page or three-page, and on the shop's configuration." } ], - "value": "export interface BuyerJourney {\n /**\n * Installs a function for intercepting and preventing progress on checkout.\n *\n * This returns a promise that resolves to a teardown function. Calling the\n * teardown function removes the interceptor.\n *\n * To block checkout progress, you must set the [block_progress](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#block-progress)\n * capability in your extension's configuration.\n *\n * If you do, then you're expected to inform the buyer why navigation was blocked,\n * either by passing validation errors to the checkout UI or rendering the errors in your extension.\n *\n * If the merchant hasn't allowed your extension to block checkout progress, show a warning in the [checkout editor](https://shopify.dev/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor).\n */\n intercept(interceptor: Interceptor): Promise<() => void>;\n\n /**\n * Whether the buyer has completed submitting their order. When `true`, the buyer is on the order status page after submitting payment. When `false`, the buyer is still in the checkout flow.\n */\n completed: SubscribableSignalLike;\n /**\n * All possible steps the buyer can take to complete checkout. These steps vary depending on whether the checkout is one-page or three-page, and on the shop's configuration.\n */\n steps: SubscribableSignalLike;\n /**\n * The step of checkout the buyer is currently on. The value is `undefined` if the current step can't be determined.\n */\n activeStep: SubscribableSignalLike;\n}" + "value": "export interface BuyerJourney {\n /**\n * Installs a function for intercepting and preventing progress on checkout.\n *\n * This returns a promise that resolves to a teardown function. Calling the\n * teardown function removes the interceptor.\n *\n * To block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#block-progress)\n * capability in your extension's configuration.\n *\n * If you do, then you're expected to inform the buyer why navigation was blocked,\n * either by passing validation errors to the checkout UI or rendering the errors in your extension.\n *\n * If the merchant hasn't allowed your extension to block checkout progress, show a warning in the [checkout editor](/docs/apps/build/checkout/test-checkout-ui-extensions#test-the-extension-in-the-checkout-editor).\n */\n intercept(interceptor: Interceptor): Promise<() => void>;\n\n /**\n * Whether the buyer has completed submitting their order. When `true`, the buyer is on the order status page after submitting payment. When `false`, the buyer is still in the checkout flow.\n */\n completed: SubscribableSignalLike;\n /**\n * All possible steps the buyer can take to complete checkout. These steps vary depending on whether the checkout is one-page or three-page, and on the shop's configuration.\n */\n steps: SubscribableSignalLike;\n /**\n * The step of checkout the buyer is currently on. The value is `undefined` if the current step can't be determined.\n */\n activeStep: SubscribableSignalLike;\n}" + } + }, + "SubscribableSignalLike": { + "src/surfaces/checkout/shared.ts": { + "filePath": "src/surfaces/checkout/shared.ts", + "name": "SubscribableSignalLike", + "description": "Represents a reactive signal interface that provides both immediate value access and subscription-based updates. Enables real-time synchronization with changing data through the observer pattern. This interface extends `ReadonlySignalLike` with deprecated fields that are still supported for backwards compatibility.", + "members": [ + { + "filePath": "src/surfaces/checkout/shared.ts", + "syntaxKind": "PropertySignature", + "name": "current", + "value": "T", + "description": "The current value of the signal. Equivalent to `.value`, accessing this property subscribes to changes when used in a reactive context.", + "deprecationMessage": "Use `.value` instead." + }, + { + "filePath": "src/surfaces/checkout/shared.ts", + "syntaxKind": "MethodSignature", + "name": "destroy", + "value": "() => Promise", + "description": "Cleans up the subscription and releases any resources held by this signal. After calling `destroy()`, the signal stops receiving updates from the main thread.", + "deprecationMessage": "No longer needed. Use [Preact Signals](https://preactjs.com/guide/v10/signals) to manage reactive state instead." + }, + { + "filePath": "src/surfaces/checkout/shared.ts", + "syntaxKind": "MethodSignature", + "name": "subscribe", + "value": "(fn: (value: T) => void) => () => void", + "description": "Subscribes to value changes and calls the provided function whenever the value updates. Returns an unsubscribe function to clean up the subscription. Use to automatically react to changes in the signal's value." + }, + { + "filePath": "src/surfaces/checkout/shared.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "T", + "description": "The current value of the signal. This property provides immediate access to the current value without requiring subscription setup. Use for one-time value checks or initial setup." + } + ], + "value": "export interface SubscribableSignalLike extends ReadonlySignalLike {\n /**\n * The current value of the signal. Equivalent to `.value`, accessing this property\n * subscribes to changes when used in a reactive context.\n *\n * @deprecated Use `.value` instead.\n */\n readonly current: T;\n /**\n * Cleans up the subscription and releases any resources held by this signal. After calling\n * `destroy()`, the signal stops receiving updates from the main thread.\n *\n * @deprecated No longer needed. Use [Preact Signals](https://preactjs.com/guide/v10/signals) to manage reactive state instead.\n */\n destroy(): Promise;\n}" } }, "BuyerJourneyStepReference": { @@ -1568,11 +1158,11 @@ "syntaxKind": "MethodSignature", "name": "perform", "value": "(result: InterceptorResult) => void | Promise", - "description": "This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.\n\nRuns after all intercept results are collected. Use it for local state updates such as setting an error flag. By the time it runs, the navigation decision is final, so blocking logic belongs in the intercept handler itself, not here.", + "description": "This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.", "isOptional": true } ], - "value": "interface InterceptorRequestAllow {\n /**\n * Indicates that the interceptor allows the buyer's journey to continue.\n */\n behavior: 'allow';\n\n /**\n * This callback is called when all interceptors finish. We recommend\n * setting errors or reasons for blocking at this stage, so that all the errors in\n * the UI show up at once.\n *\n * Runs after all intercept results are collected. Use it for local state\n * updates such as setting an error flag. By the time it runs, the navigation\n * decision is final, so blocking logic belongs in the intercept handler\n * itself, not here.\n * @param result InterceptorResult with behavior as either 'allow' or 'block'\n */\n perform?(result: InterceptorResult): void | Promise;\n}" + "value": "interface InterceptorRequestAllow {\n /**\n * Indicates that the interceptor allows the buyer's journey to continue.\n */\n behavior: 'allow';\n\n /**\n * This callback is called when all interceptors finish. We recommend\n * setting errors or reasons for blocking at this stage, so that all the errors in\n * the UI show up at once.\n * @param result InterceptorResult with behavior as either 'allow' or 'block'\n */\n perform?(result: InterceptorResult): void | Promise;\n}" } }, "InterceptorResult": { @@ -1644,7 +1234,7 @@ "syntaxKind": "MethodSignature", "name": "perform", "value": "(result: InterceptorResult) => void | Promise", - "description": "This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.\n\nRuns after all intercept results are collected. Use it for local state updates such as setting an error flag. By the time it runs, the navigation decision is final, so blocking logic belongs in the intercept handler itself, not here.", + "description": "This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.", "isOptional": true }, { @@ -1655,45 +1245,7 @@ "description": "The reason for blocking the interceptor request. This value isn't presented to the buyer, so it doesn't need to be localized. The value is used only for Shopify's own internal debugging and metrics." } ], - "value": "interface InterceptorRequestBlock {\n /**\n * Indicates that the interceptor blocks the buyer's journey from continuing.\n */\n behavior: 'block';\n\n /**\n * The reason for blocking the interceptor request. This value isn't presented to\n * the buyer, so it doesn't need to be localized. The value is used only for Shopify's\n * own internal debugging and metrics.\n */\n reason: string;\n\n /**\n * Used to pass errors to the checkout UI, outside your extension's UI boundaries.\n */\n errors?: ValidationError[];\n\n /**\n * This callback is called when all interceptors finish. We recommend\n * setting errors or reasons for blocking at this stage, so that all the errors in\n * the UI show up at once.\n *\n * Runs after all intercept results are collected. Use it for local state\n * updates such as setting an error flag. By the time it runs, the navigation\n * decision is final, so blocking logic belongs in the intercept handler\n * itself, not here.\n * @param result InterceptorResult with behavior as either 'allow' or 'block'\n */\n perform?(result: InterceptorResult): void | Promise;\n}" - } - }, - "ValidationError": { - "src/surfaces/checkout/api/shared.ts": { - "filePath": "src/surfaces/checkout/api/shared.ts", - "name": "ValidationError", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "The error message to display to the buyer. Use this to explain what went wrong and how to fix it." - }, - { - "filePath": "src/surfaces/checkout/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "target", - "value": "string", - "description": "The checkout UI field that the error is associated with. When provided, checkout highlights the matching field so the buyer knows where to fix the issue. The value is `undefined` if the error isn't tied to a specific field.", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'$.cart.deliveryGroups[0].deliveryAddress.countryCode'\n\nSee the [supported targets](https://shopify.dev/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets)\nfor more information.", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface ValidationError {\n /**\n * The error message to display to the buyer. Use this to explain what\n * went wrong and how to fix it.\n */\n message: string;\n /**\n * The checkout UI field that the error is associated with. When provided,\n * checkout highlights the matching field so the buyer knows where to fix\n * the issue. The value is `undefined` if the error isn't tied to a\n * specific field.\n *\n * @example '$.cart.deliveryGroups[0].deliveryAddress.countryCode'\n *\n * See the [supported targets](https://shopify.dev/docs/api/functions/reference/cart-checkout-validation/graphql#supported-targets)\n * for more information.\n */\n target?: string;\n}" + "value": "interface InterceptorRequestBlock {\n /**\n * Indicates that the interceptor blocks the buyer's journey from continuing.\n */\n behavior: 'block';\n\n /**\n * The reason for blocking the interceptor request. This value isn't presented to\n * the buyer, so it doesn't need to be localized. The value is used only for Shopify's\n * own internal debugging and metrics.\n */\n reason: string;\n\n /**\n * Used to pass errors to the checkout UI, outside your extension's UI boundaries.\n */\n errors?: ValidationError[];\n\n /**\n * This callback is called when all interceptors finish. We recommend\n * setting errors or reasons for blocking at this stage, so that all the errors in\n * the UI show up at once.\n * @param result InterceptorResult with behavior as either 'allow' or 'block'\n */\n perform?(result: InterceptorResult): void | Promise;\n}" } }, "BuyerJourneyStep": { @@ -1757,75 +1309,148 @@ "value": "export interface BuyerJourneyStep {\n /**\n * The handle that uniquely identifies the buyer journey step, such as `'information'`, `'shipping'`, or `'payment'`.\n */\n handle: BuyerJourneyStepHandle;\n /**\n * The localized label of the buyer journey step, suitable for rendering in navigation UI.\n */\n label: string;\n /**\n * The URL of the buyer journey step, using the `shopify:` protocol.\n *\n * @example 'shopify:cart'\n * @example 'shopify:checkout/information'\n */\n to: string;\n /**\n * Whether this step is disabled. When `true`, the buyer hasn't reached this step yet and can't navigate to it. When `false`, the step is accessible.\n *\n * For example, if the buyer hasn't reached the `shipping` step yet, then `shipping` is disabled.\n */\n disabled: boolean;\n}" } }, - "CheckoutSettings": { + "StandardApi": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "CheckoutSettings", - "description": "Settings describing the behavior of the buyer's checkout.", + "name": "StandardApi", + "description": "", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "orderSubmission", - "value": "'DRAFT_ORDER' | 'ORDER'", - "description": "The type of order created when the buyer completes checkout.\n\n- `'DRAFT_ORDER'`: The checkout creates a draft order that the merchant must manually confirm before fulfillment. Common for B2B checkouts with deferred payment terms.\n- `'ORDER'`: The checkout creates a confirmed order immediately upon completion." + "name": "analytics", + "value": "Analytics", + "description": "Tracks custom events and sends visitor information to [Web Pixels](/docs/apps/marketing). Use `publish()` to emit events and `visitor()` to submit buyer contact details." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "paymentTermsTemplate", - "value": "PaymentTermsTemplate", - "description": "The payment terms configured by the merchant for B2B orders, such as net-30 or net-60. The value is `undefined` if no payment terms are configured.", - "isOptional": true + "name": "appliedGiftCards", + "value": "SubscribableSignalLike", + "description": "The gift cards that have been applied to the checkout. Each entry includes the last four characters of the gift card code, the amount used at checkout, and the card's remaining balance." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "shippingAddress", - "value": "ShippingAddressSettings", - "description": "Settings that control how the shipping address behaves during checkout, such as whether the buyer can edit the address." - } - ], - "value": "export interface CheckoutSettings {\n /**\n * The type of order created when the buyer completes checkout.\n *\n * - `'DRAFT_ORDER'`: The checkout creates a draft order that the merchant must manually confirm before fulfillment. Common for B2B checkouts with deferred payment terms.\n * - `'ORDER'`: The checkout creates a confirmed order immediately upon completion.\n */\n orderSubmission: 'DRAFT_ORDER' | 'ORDER';\n /**\n * The payment terms configured by the merchant for B2B orders, such as net-30 or net-60. The value is `undefined` if no payment terms are configured.\n */\n paymentTermsTemplate?: PaymentTermsTemplate;\n /**\n * Settings that control how the shipping address behaves during checkout, such as whether the buyer can edit the address.\n */\n shippingAddress: ShippingAddressSettings;\n}" - } - }, - "PaymentTermsTemplate": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "PaymentTermsTemplate", - "description": "A payment terms template configured by the merchant, defining when payment is due for B2B orders. Common examples include \"Net 30\" (due in 30 days) or \"Due on receipt\".", - "isPublicDocs": true, - "members": [ + "name": "applyTrackingConsentChange", + "value": "ApplyTrackingConsentChangeType", + "description": "Enables setting and updating customer privacy consent settings and tracking consent metafields.\n\n> Note: Requires the [`customer_privacy` capability](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent) to be set to `true`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." + }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "dueDate", - "value": "string", - "description": "The due date for payment in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format (`YYYY-MM-DDTHH:mm:ss.sssZ`). The value is `undefined` if the payment terms don't have a fixed due date.", + "name": "appMetafields", + "value": "SubscribableSignalLike", + "description": "The metafields requested in the [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.\n\nApp owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` isn't supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "attributes", + "value": "SubscribableSignalLike", + "description": "The custom key-value attributes attached to the cart or checkout. These are set by the buyer or by an extension using `applyAttributeChange()`. The list is empty if no attributes have been added." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "availablePaymentOptions", + "value": "SubscribableSignalLike", + "description": "All payment options available to the buyer for this checkout, such as credit cards, wallets, and local payment methods. The list depends on the shop's payment configuration and the buyer's region." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "billingAddress", + "value": "SubscribableSignalLike", + "description": "The proposed customer billing address. The address updates when the field is committed (on change) rather than every keystroke. The property is available only if the extension has access to protected customer data. The subscribable value is `undefined` if the billing address hasn't been provided yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "dueInDays", - "value": "number", - "description": "The number of days the buyer has to pay after the order is placed, such as `30` for \"Net 30\" terms. The value is `undefined` if the payment terms aren't net-based.", + "name": "buyerIdentity", + "value": "BuyerIdentity", + "description": "Information about the buyer that's interacting with the checkout. The property is available only if the extension has access to protected customer data.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A globally-unique identifier for the payment terms template in the format `gid://shopify/PaymentTermsTemplate/`.", + "name": "buyerJourney", + "value": "BuyerJourney", + "description": "Provides details on the buyer's progression through the checkout and lets you intercept navigation to validate data before the buyer continues.\n\nRefer to [buyer journey](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/buyer-journey#examples) examples for more information." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "checkoutSettings", + "value": "SubscribableSignalLike", + "description": "Settings applied to the buyer's checkout." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "checkoutToken", + "value": "SubscribableSignalLike", + "description": "A stable ID that represents the current checkout.\n\nThe value is `undefined` when the checkout hasn't been created on the server yet.\n\nUse this to correlate checkout sessions across your extension, web pixels, and backend systems.\n\nThis matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data) and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object)." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "cost", + "value": "CartCost", + "description": "The cost breakdown for the current checkout, including subtotal, shipping, tax, and total amounts. These values update as the buyer progresses through checkout and costs like shipping and tax are calculated." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "customerPrivacy", + "value": "SubscribableSignalLike", + "description": "Customer privacy consent settings and a flag denoting if consent has previously been collected." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "deliveryGroups", + "value": "SubscribableSignalLike", + "description": "The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "discountAllocations", + "value": "SubscribableSignalLike", + "description": "The discount allocations applied to the entire cart, including automatic discounts, code-based discounts, and custom discounts from [Shopify Functions](/docs/apps/build/functions). Each allocation indicates how much was discounted and how the discount was triggered." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "discountCodes", + "value": "SubscribableSignalLike", + "description": "The discount codes currently applied to the checkout. The list is empty if no discount codes have been applied. Use `applyDiscountCodeChange()` to add or remove codes." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "extension", + "value": "Extension", + "description": "Metadata about the running extension, including the current target, API version, capabilities, and editor context. Use this to conditionally render content based on where the extension is running." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "extensionPoint", + "value": "Target", + "description": "The identifier that specifies where in Shopify's UI your code is being injected. This is one of the targets you've included in your extension's configuration file.", + "deprecationMessage": "Deprecated as of version `2023-07`, use `extension.target` instead.", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'gid://shopify/PaymentTermsTemplate/1'", + "code": "'purchase.checkout.block.render'", "title": "Example" } ] @@ -1835,120 +1460,317 @@ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "name", - "value": "string", - "description": "The name of the payment terms translated to the buyer's current language, such as \"Net 30\" or \"Due on receipt\"." + "name": "i18n", + "value": "I18n", + "description": "Utilities for translating strings, formatting currencies, numbers, and dates according to the buyer's locale. Use alongside [`localization`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization) to build fully localized extensions." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "instructions", + "value": "SubscribableSignalLike", + "description": "The cart instructions used to create the checkout and possibly limit extension capabilities.\n\nThese instructions should be checked before performing any actions that might be affected by them.\n\nFor example, if you intend to add a discount code via the `applyDiscountCodeChange` method, check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout.\n\n> Caution: As of version `2024-07`, UI extension code must check for instructions before calling select APIs in case those APIs aren't available. See the [update guide](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#examples) for more information." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "lines", + "value": "SubscribableSignalLike", + "description": "The list of line items the buyer intends to purchase. Each entry includes the merchandise, quantity, cost, and any custom attributes. Use `applyCartLinesChange()` to add, remove, or update line items." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "localization", + "value": "Localization", + "description": "The buyer's language, country, currency, and timezone context. For formatting and translation helpers, use the [`i18n`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization#standardapi-propertydetail-i18n) object instead." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "localizedFields", + "value": "SubscribableSignalLike", + "description": "Additional region-specific fields required during checkout, such as tax identification numbers (Brazil's CPF/CNPJ) or customs credentials. The property is available only if the extension has access to protected customer data. The array is empty if the current checkout doesn't require any localized fields.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "note", + "value": "SubscribableSignalLike", + "description": "A note left by the customer to the merchant, either in their cart or during checkout.\n\nThe value is `undefined` if the buyer hasn't entered a note. Use this to display or react to order-level instructions such as delivery preferences or gift messages." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "query", + "value": ">(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", + "description": "The method used to query the Storefront GraphQL API with a prefetched token.\n\nRefer to [Storefront API access examples](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/storefront-api) for more information." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "selectedPaymentOptions", + "value": "SubscribableSignalLike", + "description": "The payment options the buyer has currently selected. This updates as the buyer changes their payment method. The array can contain multiple entries when the buyer splits payment across methods (for example, a gift card and a credit card)." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "sessionToken", + "value": "SessionToken", + "description": "The session token providing a set of claims as a signed JSON Web Token (JWT).\n\nThe token has a TTL of five minutes.\n\nIf the previous token expires, this value reflects a new session token with a new signature and expiry.\n\nLearn more about [session tokens](/docs/apps/build/authentication-authorization/session-tokens)." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "settings", + "value": "SubscribableSignalLike", + "description": "The settings matching the settings definition written in the [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n\n Refer to [settings examples](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/settings#examples) for more information.\n\n> Note: When an extension is being installed in the editor, the settings are empty until a merchant sets a value. In that case, this object updates in real time as a merchant fills in the settings." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "shippingAddress", + "value": "SubscribableSignalLike", + "description": "The proposed customer shipping address. During the information step, the address updates when the field is committed (on change) rather than every keystroke. The property is available only if the extension has access to protected customer data. When available, the subscribable value is `undefined` if delivery isn't required.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "shop", + "value": "Shop", + "description": "The store where the checkout is taking place, including the shop name, storefront URL, `.myshopify.com` subdomain, and a globally-unique ID." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "storage", + "value": "Storage", + "description": "Key-value storage that persists across page loads within the current checkout session. Data is shared across all activated extension targets of this extension.\n\n> Caution: Data persistence isn't guaranteed and storage is cleared when the buyer starts a new checkout." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "version", + "value": "Version", + "description": "The renderer version being used for the extension.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'2025-10'", + "title": "Example" + } + ] + } + ] } ], - "value": "export interface PaymentTermsTemplate {\n /**\n * A globally-unique identifier for the payment terms template in the format `gid://shopify/PaymentTermsTemplate/`.\n *\n * @example 'gid://shopify/PaymentTermsTemplate/1'\n */\n id: string;\n /**\n * The name of the payment terms translated to the buyer's current language, such as \"Net 30\" or \"Due on receipt\".\n */\n name: string;\n /**\n * The due date for payment in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format (`YYYY-MM-DDTHH:mm:ss.sssZ`). The value is `undefined` if the payment terms don't have a fixed due date.\n */\n dueDate?: string;\n /**\n * The number of days the buyer has to pay after the order is placed, such as `30` for \"Net 30\" terms. The value is `undefined` if the payment terms aren't net-based.\n */\n dueInDays?: number;\n}" + "value": "export interface StandardApi {\n /**\n * Tracks custom events and sends visitor information to\n * [Web Pixels](/docs/apps/marketing). Use `publish()` to emit events\n * and `visitor()` to submit buyer contact details.\n */\n analytics: Analytics;\n\n /**\n * The gift cards that have been applied to the checkout. Each entry includes\n * the last four characters of the gift card code, the amount used at\n * checkout, and the card's remaining balance.\n */\n appliedGiftCards: SubscribableSignalLike;\n\n /**\n * The cart instructions used to create the checkout and possibly limit extension capabilities.\n *\n * These instructions should be checked before performing any actions that might be affected by them.\n *\n * For example, if you intend to add a discount code via the `applyDiscountCodeChange` method,\n * check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout.\n *\n * > Caution: As of version `2024-07`, UI extension code must check for instructions before calling select APIs in case those APIs aren't available.\n * See the [update guide](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#examples) for more information.\n *\n */\n instructions: SubscribableSignalLike;\n\n /**\n * The metafields requested in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration)\n * file. These metafields are updated when there's a change in the merchandise items\n * being purchased by the customer.\n *\n * App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` isn't supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n appMetafields: SubscribableSignalLike;\n\n /**\n * The custom key-value attributes attached to the cart or checkout. These are set by the buyer or by an extension using `applyAttributeChange()`. The list is empty if no attributes have been added.\n */\n attributes: SubscribableSignalLike;\n\n /**\n * All payment options available to the buyer for this checkout, such as credit cards, wallets, and local payment methods. The list depends on the shop's payment configuration and the buyer's region.\n */\n availablePaymentOptions: SubscribableSignalLike;\n\n /**\n * Information about the buyer that's interacting with the checkout. The property is available only if the extension has access to protected customer data.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n buyerIdentity?: BuyerIdentity;\n\n /**\n * Provides details on the buyer's progression through the checkout and lets you intercept navigation to validate data before the buyer continues.\n *\n * Refer to [buyer journey](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/buyer-journey#examples)\n * examples for more information.\n */\n buyerJourney: BuyerJourney;\n\n /**\n * Settings applied to the buyer's checkout.\n */\n checkoutSettings: SubscribableSignalLike;\n\n /**\n * A stable ID that represents the current checkout.\n *\n * The value is `undefined` when the checkout hasn't been created on the server yet.\n *\n * Use this to correlate checkout sessions across your extension, web pixels, and backend systems.\n *\n * This matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data)\n * and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object).\n */\n checkoutToken: SubscribableSignalLike;\n\n /**\n * The cost breakdown for the current checkout, including subtotal, shipping, tax, and total amounts. These values update as the buyer progresses through checkout and costs like shipping and tax are calculated.\n */\n cost: CartCost;\n\n /**\n * The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items.\n */\n deliveryGroups: SubscribableSignalLike;\n\n /**\n * The discount codes currently applied to the checkout. The list is empty if no discount codes have been applied. Use `applyDiscountCodeChange()` to add or remove codes.\n */\n discountCodes: SubscribableSignalLike;\n\n /**\n * The discount allocations applied to the entire cart, including automatic discounts, code-based discounts, and custom discounts from [Shopify Functions](/docs/apps/build/functions). Each allocation indicates how much was discounted and how the discount was triggered.\n */\n discountAllocations: SubscribableSignalLike;\n\n /**\n * Metadata about the running extension, including the current target, API version,\n * capabilities, and editor context. Use this to conditionally render content\n * based on where the extension is running.\n */\n extension: Extension;\n\n /**\n * The identifier that specifies where in Shopify's UI your code is being\n * injected. This is one of the targets you've included in your\n * extension's configuration file.\n *\n * @example 'purchase.checkout.block.render'\n * @see /docs/api/checkout-ui-extensions/{API_VERSION}/extension-targets-overview\n * @see /docs/apps/app-extensions/configuration#targets\n *\n * @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.\n */\n extensionPoint: Target;\n\n /**\n * Utilities for translating strings, formatting currencies, numbers, and dates\n * according to the buyer's locale. Use alongside\n * [`localization`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization)\n * to build fully localized extensions.\n */\n i18n: I18n;\n\n /**\n * The list of line items the buyer intends to purchase. Each entry includes the merchandise, quantity, cost, and any custom attributes. Use `applyCartLinesChange()` to add, remove, or update line items.\n */\n lines: SubscribableSignalLike;\n\n /**\n * The buyer's language, country, currency, and timezone context. For\n * formatting and translation helpers, use the\n * [`i18n`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization#standardapi-propertydetail-i18n)\n * object instead.\n */\n localization: Localization;\n\n /**\n * A note left by the customer to the merchant, either in their cart or during checkout.\n *\n * The value is `undefined` if the buyer hasn't entered a note. Use this to display or react to order-level instructions such as delivery preferences or gift messages.\n */\n note: SubscribableSignalLike;\n\n /**\n * The method used to query the Storefront GraphQL API with a prefetched token.\n *\n * Refer to [Storefront API access examples](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/storefront-api) for more information.\n */\n query: >(\n query: string,\n options?: {variables?: Variables; version?: StorefrontApiVersion},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n\n /**\n * The payment options the buyer has currently selected. This updates as the buyer changes their payment method. The array can contain multiple entries when the buyer splits payment across methods (for example, a gift card and a credit card).\n */\n selectedPaymentOptions: SubscribableSignalLike;\n\n /**\n * The session token providing a set of claims as a signed JSON Web Token (JWT).\n *\n * The token has a TTL of five minutes.\n *\n * If the previous token expires, this value reflects a new session token with a new signature and expiry.\n *\n * Learn more about [session tokens](/docs/apps/build/authentication-authorization/session-tokens).\n */\n sessionToken: SessionToken;\n\n /**\n * The settings matching the settings definition written in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n *\n * Refer to [settings examples](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/settings#examples) for more information.\n *\n * > Note: When an extension is being installed in the editor, the settings are empty until\n * a merchant sets a value. In that case, this object updates in real time as a merchant fills in the settings.\n */\n settings: SubscribableSignalLike;\n\n /**\n * The proposed customer shipping address. During the information step, the address\n * updates when the field is committed (on change) rather than every keystroke.\n * The property is available only if the extension has access to protected customer\n * data. When available, the subscribable value is `undefined` if delivery isn't required.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n shippingAddress?: SubscribableSignalLike;\n\n /**\n * The proposed customer billing address. The address updates when the field is\n * committed (on change) rather than every keystroke. The property is available only\n * if the extension has access to protected customer data. The subscribable value is\n * `undefined` if the billing address hasn't been provided yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n billingAddress?: SubscribableSignalLike;\n\n /**\n * The store where the checkout is taking place, including the shop name,\n * storefront URL, `.myshopify.com` subdomain, and a globally-unique ID.\n */\n shop: Shop;\n\n /**\n * Key-value storage that persists across page loads within the current checkout\n * session. Data is shared across all activated extension targets of this\n * extension.\n *\n * > Caution: Data persistence isn't guaranteed and storage is cleared when the\n * buyer starts a new checkout.\n */\n storage: Storage;\n\n /**\n * The renderer version being used for the extension.\n *\n * @example '2025-10'\n */\n version: Version;\n\n /**\n * Customer privacy consent settings and a flag denoting if consent has previously been collected.\n */\n customerPrivacy: SubscribableSignalLike;\n\n /**\n * Enables setting and updating customer privacy consent settings and tracking consent metafields.\n *\n * > Note: Requires the [`customer_privacy` capability](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent) to be set to `true`.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n applyTrackingConsentChange: ApplyTrackingConsentChangeType;\n\n /**\n * Additional region-specific fields required during checkout, such as tax identification numbers (Brazil's CPF/CNPJ) or customs credentials. The property is available only if the extension has access to protected customer data. The array is empty if the current checkout doesn't require any localized fields.\n */\n localizedFields?: SubscribableSignalLike;\n}" } }, - "ShippingAddressSettings": { + "Analytics": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "ShippingAddressSettings", - "description": "Settings describing the behavior of the shipping address.", - "isPublicDocs": true, + "name": "Analytics", + "description": "Tracks custom events and sends visitor information to [Web Pixels](/docs/apps/marketing). Use `publish()` to emit events and `visitor()` to submit buyer contact details.", "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "isEditable", - "value": "boolean", - "description": "Whether the buyer is allowed to edit the shipping address during checkout. When `false`, the shipping address is locked and can't be changed, which is common for B2B orders with a predefined ship-to address." + "syntaxKind": "MethodSignature", + "name": "publish", + "value": "(name: string, data: Record) => Promise", + "description": "Publishes a custom event to [Web Pixels](/docs/apps/marketing). Returns `true` when the event is successfully dispatched." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "MethodSignature", + "name": "visitor", + "value": "(data: { email?: string; phone?: string; }) => Promise", + "description": "Submits buyer contact details for attribution and analytics purposes." } ], - "value": "export interface ShippingAddressSettings {\n /**\n * Whether the buyer is allowed to edit the shipping address during checkout. When `false`, the shipping address is locked and can't be changed, which is common for B2B orders with a predefined ship-to address.\n */\n isEditable: boolean;\n}" + "value": "export interface Analytics {\n /**\n * Publishes a custom event to [Web Pixels](/docs/apps/marketing).\n * Returns `true` when the event is successfully dispatched.\n */\n publish(name: string, data: Record): Promise;\n\n /**\n * Submits buyer contact details for attribution and analytics purposes.\n */\n visitor(data: {email?: string; phone?: string}): Promise;\n}" } }, - "CheckoutToken": { + "VisitorResult": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "CheckoutToken", - "value": "string", - "description": "", + "name": "VisitorResult", + "value": "VisitorSuccess | VisitorError", + "description": "Represents a visitor result.", "isPublicDocs": true } }, - "CartCost": { + "VisitorSuccess": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "CartCost", - "description": "", + "name": "VisitorSuccess", + "description": "Represents a successful visitor result.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "subtotalAmount", - "value": "SubscribableSignalLike", - "description": "The sum of all line item prices at the current step of checkout, before shipping and taxes are applied. Use this value to display the base cost of the items the buyer purchased." + "name": "type", + "value": "'success'", + "description": "Indicates that the visitor information was validated and submitted." + } + ], + "value": "export interface VisitorSuccess {\n /**\n * Indicates that the visitor information was validated and submitted.\n */\n type: 'success';\n}" + } + }, + "VisitorError": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "VisitorError", + "description": "Represents an unsuccessful visitor result.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "message", + "value": "string", + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "totalAmount", - "value": "SubscribableSignalLike", - "description": "The minimum total at the current step of checkout. Costs not yet calculated, such as shipping on the information step, aren't included. Gift cards and store credits are excluded from this total." + "name": "type", + "value": "'error'", + "description": "Indicates that the visitor information is invalid and wasn't submitted. Common causes include using the wrong data type or omitting a required property." + } + ], + "value": "export interface VisitorError {\n /**\n * Indicates that the visitor information is invalid and wasn't submitted.\n * Common causes include using the wrong data type or omitting a required property.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" + } + }, + "AppliedGiftCard": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "AppliedGiftCard", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "amountUsed", + "value": "Money", + "description": "The amount of the applied gift card that's used when the checkout is completed. This might be less than `balance` if the order total is lower than the card's remaining balance." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "totalShippingAmount", - "value": "SubscribableSignalLike", - "description": "The total shipping cost after shipping discounts have been applied. The value is `undefined` if shipping hasn't been calculated yet, such as when the buyer is still on the information step.\n\n`undefined` until the buyer selects a shipping method (typically after the information step)." + "name": "balance", + "value": "Money", + "description": "The current balance of the applied gift card before checkout completion. This reflects the full remaining value on the card, not just the amount being applied to this order." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "totalTaxAmount", - "value": "SubscribableSignalLike", - "description": "The total tax the buyer can expect to pay, or the total tax already included in product and shipping prices (for tax-inclusive regions). The value is `undefined` if taxes haven't been calculated yet.\n\n`undefined` when taxes haven't been calculated or aren't available for the buyer's region." + "name": "lastCharacters", + "value": "string", + "description": "The last four characters of the applied gift card's code. The full code isn't exposed for security reasons. Use this value to display which card is applied." } ], - "value": "export interface CartCost {\n /**\n * The sum of all line item prices at the current step of checkout, before shipping and taxes are applied. Use this value to display the base cost of the items the buyer purchased.\n */\n subtotalAmount: SubscribableSignalLike;\n\n /**\n * The total shipping cost after shipping discounts have been applied. The value is `undefined` if shipping hasn't been calculated yet, such as when the buyer is still on the information step.\n *\n * `undefined` until the buyer selects a shipping method (typically after the\n * information step).\n */\n totalShippingAmount: SubscribableSignalLike;\n\n /**\n * The total tax the buyer can expect to pay, or the total tax already included in product and shipping prices (for tax-inclusive regions). The value is `undefined` if taxes haven't been calculated yet.\n *\n * `undefined` when taxes haven't been calculated or aren't available for the\n * buyer's region.\n */\n totalTaxAmount: SubscribableSignalLike;\n\n /**\n * The minimum total at the current step of checkout. Costs not yet calculated, such as shipping on the information step, aren't included. Gift cards and store credits are excluded from this total.\n */\n totalAmount: SubscribableSignalLike;\n}" + "value": "export interface AppliedGiftCard {\n /**\n * The last four characters of the applied gift card's code. The full code isn't exposed for security reasons. Use this value to display which card is applied.\n */\n lastCharacters: string;\n\n /**\n * The amount of the applied gift card that's used when the checkout is completed. This might be less than `balance` if the order total is lower than the card's remaining balance.\n */\n amountUsed: Money;\n\n /**\n * The current balance of the applied gift card before checkout completion. This reflects the full remaining value on the card, not just the amount being applied to this order.\n */\n balance: Money;\n}" } }, - "CustomerPrivacy": { + "Money": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "CustomerPrivacy", + "name": "Money", "description": "", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "allowedProcessing", - "value": "AllowedProcessing", - "description": "Flags indicating whether each type of data processing is permitted, based on the visitor's consent, the merchant's privacy configuration, and the visitor's geographic location." + "name": "amount", + "value": "number", + "description": "The decimal amount of the price. For example, `29.99` represents twenty-nine dollars and ninety-nine cents." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "TrackingConsentMetafield[]", - "description": "The tracking consent metafields that have been stored for this visitor. These contain app-specific consent data beyond the standard categories.", + "name": "currencyCode", + "value": "CurrencyCode", + "description": "The three-letter currency code in [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) format.", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "`[{key: 'analyticsType', value: 'granular'}, {key: 'marketingType', value: 'granular'}]`, or `[]`", + "code": "'CAD' for Canadian dollar", "title": "Example" } ] } ] + } + ], + "value": "export interface Money {\n /**\n * The decimal amount of the price. For example, `29.99` represents twenty-nine dollars and ninety-nine cents.\n */\n amount: number;\n /**\n * The three-letter currency code in [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) format.\n *\n * @example 'CAD' for Canadian dollar\n */\n currencyCode: CurrencyCode;\n}" + } + }, + "ApplyTrackingConsentChangeType": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "ApplyTrackingConsentChangeType", + "description": "", + "isPublicDocs": true, + "params": [ + { + "name": "visitorConsent", + "description": "", + "value": "VisitorConsentChange", + "filePath": "src/surfaces/checkout/api/standard/standard.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "description": "", + "name": "Promise", + "value": "Promise" + }, + "value": "(\n visitorConsent: VisitorConsentChange,\n) => Promise" + } + }, + "VisitorConsentChange": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "VisitorConsentChange", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "analytics", + "value": "boolean", + "description": "The visitor's consent for analytics tracking. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "region", - "value": "CustomerPrivacyRegion", - "description": "The visitor's geographic location, used to determine whether more granular consent controls should be displayed based on regional privacy regulations.", + "name": "marketing", + "value": "boolean", + "description": "The visitor's consent for marketing and targeted advertising. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "metafields", + "value": "TrackingConsentMetafieldChange[]", + "description": "Tracking consent metafield data to be saved.\n\nIf the value is `null`, the metafield is deleted.", "isOptional": true, "examples": [ { @@ -1956,7 +1778,7 @@ "description": "", "tabs": [ { - "code": "`{countryCode: 'CA', provinceCode: 'ON'}` for a visitor in Ontario, Canada; `{countryCode: 'US', provinceCode: undefined}` for a visitor in the United States if geolocation fails to detect the state; or `undefined` if neither country nor province is detected or geolocation fails.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "code": "`[{key: 'granularAnalytics', value: 'true'}, {key: 'granularMarketing', value: 'false'}]`", "title": "Example" } ] @@ -1966,32 +1788,59 @@ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "saleOfDataRegion", + "name": "preferences", "value": "boolean", - "description": "Whether the visitor is located in a region that requires an explicit opt-out option for the sale or sharing of personal data, such as California (CCPA) or other jurisdictions with similar regulations." + "description": "The visitor's consent for storing preferences such as language and currency. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "shouldShowBanner", + "name": "saleOfData", "value": "boolean", - "description": "Whether a consent banner should be displayed by default when the page loads. Use this as the initial open/expanded state of the consent banner.\n\nThis is determined by the visitor's current privacy consent, the shop's [region visibility configuration](https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located." + "description": "The visitor's consent for the sale or sharing of their personal data with third parties. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "visitorConsent", - "value": "VisitorConsent", - "description": "The visitor's current privacy consent settings. Each property represents a consent category and is `true` (actively granted), `false` (actively denied), or `undefined` (no decision made yet)." + "name": "type", + "value": "'changeVisitorConsent'", + "description": "Identifies this as a visitor consent change. This is the only supported change type for `applyTrackingConsentChange()`." } ], - "value": "export interface CustomerPrivacy {\n /**\n * Flags indicating whether each type of data processing is permitted, based on the visitor's consent, the merchant's privacy configuration, and the visitor's geographic location.\n */\n allowedProcessing: AllowedProcessing;\n /**\n * The tracking consent metafields that have been stored for this visitor. These contain app-specific consent data beyond the standard categories.\n *\n * @example `[{key: 'analyticsType', value: 'granular'}, {key: 'marketingType', value: 'granular'}]`, or `[]`\n */\n metafields: TrackingConsentMetafield[];\n /**\n * The visitor's current privacy consent settings. Each property represents a consent category and is `true` (actively granted), `false` (actively denied), or `undefined` (no decision made yet).\n */\n visitorConsent: VisitorConsent;\n /**\n * Whether a consent banner should be displayed by default when the page loads. Use this as the initial open/expanded state of the consent banner.\n *\n * This is determined by the visitor's current privacy consent, the shop's [region visibility configuration](https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located.\n */\n shouldShowBanner: boolean;\n /**\n * Whether the visitor is located in a region that requires an explicit opt-out option for the sale or sharing of personal data, such as California (CCPA) or other jurisdictions with similar regulations.\n */\n saleOfDataRegion: boolean;\n /**\n * The visitor's geographic location, used to determine whether more granular consent controls should be displayed based on regional privacy regulations.\n *\n * @example `{countryCode: 'CA', provinceCode: 'ON'}` for a visitor in Ontario, Canada; `{countryCode: 'US', provinceCode: undefined}` for a visitor in the United States if geolocation fails to detect the state; or `undefined` if neither country nor province is detected or geolocation fails.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n region?: CustomerPrivacyRegion;\n}" + "value": "export interface VisitorConsentChange extends VisitorConsent {\n /**\n * Tracking consent metafield data to be saved.\n *\n * If the value is `null`, the metafield is deleted.\n *\n * @example `[{key: 'granularAnalytics', value: 'true'}, {key: 'granularMarketing', value: 'false'}]`\n */\n metafields?: TrackingConsentMetafieldChange[];\n /**\n * Identifies this as a visitor consent change. This is the only supported change type for `applyTrackingConsentChange()`.\n */\n type: 'changeVisitorConsent';\n}" } }, - "AllowedProcessing": { + "TrackingConsentMetafieldChange": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "AllowedProcessing", + "name": "TrackingConsentMetafieldChange", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "key", + "value": "string", + "description": "The identifier for the tracking consent metafield to update." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string | null", + "description": "The new value to store in the metafield. Set to `null` to delete the metafield." + } + ], + "value": "export interface TrackingConsentMetafieldChange {\n /**\n * The identifier for the tracking consent metafield to update.\n */\n key: string;\n /**\n * The new value to store in the metafield. Set to `null` to delete the metafield.\n */\n value: string | null;\n}" + } + }, + "VisitorConsent": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "VisitorConsent", "description": "", "isPublicDocs": true, "members": [ @@ -2000,361 +1849,384 @@ "syntaxKind": "PropertySignature", "name": "analytics", "value": "boolean", - "description": "Whether analytics data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Analytics data includes how the shop was used and what interactions occurred.\n\nWhether analytics data can be collected right now. Combines the buyer's consent, the merchant's privacy configuration, and the buyer's region into a single boolean. Check this flag, not `visitorConsent.analytics`, before calling `shopify.analytics.publish()`." + "description": "The visitor's consent for analytics tracking. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "marketing", "value": "boolean", - "description": "Whether marketing data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Marketing data includes attribution and targeted advertising preferences.\n\nWhether marketing data can be collected right now. Combines the buyer's consent, the merchant's privacy configuration, and the buyer's region into a single boolean. Check this flag, not `visitorConsent.marketing`, before performing marketing-related data collection." + "description": "The visitor's consent for marketing and targeted advertising. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "preferences", "value": "boolean", - "description": "Whether preference data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Preference data includes language, currency, and sizing choices.\n\nWhether preference data can be collected right now. Combines the buyer's consent, the merchant's privacy configuration, and the buyer's region into a single boolean. Check this flag, not `visitorConsent.preferences`, before storing or reading buyer preference data." + "description": "The visitor's consent for storing preferences such as language and currency. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "saleOfData", "value": "boolean", - "description": "Whether data can be shared with third parties based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. This typically applies to behavioral advertising data.\n\nWhether buyer data can be shared with or sold to third parties right now. Combines the buyer's consent, the merchant's privacy configuration, and the buyer's region into a single boolean. Check this flag, not `visitorConsent.saleOfData`, before sharing or selling buyer data with third parties." + "description": "The visitor's consent for the sale or sharing of their personal data with third parties. `true` means the visitor actively granted consent, `false` means actively denied, and `undefined` means no decision has been made yet.", + "isOptional": true } ], - "value": "export interface AllowedProcessing {\n /**\n * Whether analytics data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Analytics\n * data includes how the shop was used and what interactions occurred.\n *\n * Whether analytics data can be collected right now. Combines the buyer's\n * consent, the merchant's privacy configuration, and the buyer's region into\n * a single boolean. Check this flag, not `visitorConsent.analytics`, before\n * calling `shopify.analytics.publish()`.\n */\n analytics: boolean;\n /**\n * Whether marketing data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Marketing\n * data includes attribution and targeted advertising preferences.\n *\n * Whether marketing data can be collected right now. Combines the buyer's\n * consent, the merchant's privacy configuration, and the buyer's region into\n * a single boolean. Check this flag, not `visitorConsent.marketing`, before\n * performing marketing-related data collection.\n */\n marketing: boolean;\n /**\n * Whether preference data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Preference\n * data includes language, currency, and sizing choices.\n *\n * Whether preference data can be collected right now. Combines the buyer's\n * consent, the merchant's privacy configuration, and the buyer's region into\n * a single boolean. Check this flag, not `visitorConsent.preferences`,\n * before storing or reading buyer preference data.\n */\n preferences: boolean;\n /**\n * Whether data can be shared with third parties based on the visitor's\n * consent, the merchant's privacy configuration, and the visitor's region.\n * This typically applies to behavioral advertising data.\n *\n * Whether buyer data can be shared with or sold to third parties right now.\n * Combines the buyer's consent, the merchant's privacy configuration, and\n * the buyer's region into a single boolean. Check this flag, not\n * `visitorConsent.saleOfData`, before sharing or selling buyer data with\n * third parties.\n */\n saleOfData: boolean;\n}" + "value": "export interface VisitorConsent {\n /**\n * The visitor's consent for analytics tracking. `true` means the visitor\n * actively granted consent, `false` means actively denied, and `undefined`\n * means no decision has been made yet.\n */\n analytics?: boolean;\n /**\n * The visitor's consent for marketing and targeted advertising. `true` means\n * the visitor actively granted consent, `false` means actively denied, and\n * `undefined` means no decision has been made yet.\n */\n marketing?: boolean;\n /**\n * The visitor's consent for storing preferences such as language and currency.\n * `true` means the visitor actively granted consent, `false` means actively\n * denied, and `undefined` means no decision has been made yet.\n */\n preferences?: boolean;\n /**\n * The visitor's consent for the sale or sharing of their personal data with\n * third parties. `true` means the visitor actively granted consent, `false`\n * means actively denied, and `undefined` means no decision has been made yet.\n */\n saleOfData?: boolean;\n}" } }, - "TrackingConsentMetafield": { + "TrackingConsentChangeResult": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "TrackingConsentMetafield", + "syntaxKind": "TypeAliasDeclaration", + "name": "TrackingConsentChangeResult", + "value": "TrackingConsentChangeResultSuccess | TrackingConsentChangeResultError", "description": "", + "isPublicDocs": true + } + }, + "TrackingConsentChangeResultSuccess": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "TrackingConsentChangeResultSuccess", + "description": "The returned result of a successful tracking consent preference update.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The identifier for the tracking consent metafield, such as `'analyticsType'` or `'marketingType'`." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The value stored in the tracking consent metafield, such as `'granular'` or a stringified JSON object." + "name": "type", + "value": "'success'", + "description": "Indicates that the tracking consent update was applied successfully." } ], - "value": "export interface TrackingConsentMetafield {\n /**\n * The identifier for the tracking consent metafield, such as `'analyticsType'` or `'marketingType'`.\n */\n key: string;\n /**\n * The value stored in the tracking consent metafield, such as `'granular'` or a stringified JSON object.\n */\n value: string;\n}" + "value": "export interface TrackingConsentChangeResultSuccess {\n /**\n * Indicates that the tracking consent update was applied successfully.\n */\n type: 'success';\n}" } }, - "CustomerPrivacyRegion": { + "TrackingConsentChangeResultError": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "CustomerPrivacyRegion", - "description": "", + "name": "TrackingConsentChangeResultError", + "description": "The returned result of an unsuccessful tracking consent preference update with a message detailing the type of error that occurred.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "countryCode", - "value": "CountryCode", - "description": "The buyer's country code in [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format. The value is `undefined` if geolocation failed.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'CA' for Canada, 'US' for United States, 'GB' for Great Britain", - "title": "Example" - } - ] - } - ] + "name": "message", + "value": "string", + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "provinceCode", - "value": "string", - "description": "The buyer's province, state, or region code in [ISO 3166-2](https://en.wikipedia.org/wiki/ISO_3166-2) format. The value is `undefined` if geolocation failed or only the country was detected.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'ON' for Ontario, 'ENG' for England, 'CA' for California", - "title": "Example" - } - ] - } - ] + "name": "type", + "value": "'error'", + "description": "Indicates that the tracking consent update couldn't be applied. Check the `message` property for details." } ], - "value": "export interface CustomerPrivacyRegion {\n /**\n * The buyer's country code in [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format. The value is `undefined` if geolocation failed.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'CA' for Canada, 'US' for United States, 'GB' for Great Britain\n */\n countryCode?: CountryCode;\n /**\n * The buyer's province, state, or region code in [ISO 3166-2](https://en.wikipedia.org/wiki/ISO_3166-2) format. The value is `undefined` if geolocation failed or only the country was detected.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'ON' for Ontario, 'ENG' for England, 'CA' for California\n */\n provinceCode?: string;\n}" + "value": "export interface TrackingConsentChangeResultError {\n /**\n * Indicates that the tracking consent update couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" } }, - "DeliveryGroup": { + "PaymentOption": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "DeliveryGroup", - "description": "A group of cart lines that share the same set of delivery options. For example, physical items might form one delivery group while digital items form another.", + "name": "PaymentOption", + "description": "A payment option presented to the buyer.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "deliveryOptions", - "value": "DeliveryOption[]", - "description": "The delivery options available for this group, including shipping, pickup point, and pickup location options. The buyer selects one of these to determine how their items are delivered." + "name": "handle", + "value": "string", + "description": "A session-scoped identifier for this payment option. This handle isn't globally unique; it's specific to the current checkout session or the shop." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "groupType", - "value": "DeliveryGroupType", - "description": "Whether this group contains items for a one-time purchase or a subscription. Subscription delivery groups might have different shipping options. See `DeliveryGroupType` for possible values." - }, + "name": "type", + "value": "| 'creditCard'\n | 'deferred'\n | 'local'\n | 'manualPayment'\n | 'offsite'\n | 'other'\n | 'paymentOnDelivery'\n | 'redeemable'\n | 'wallet'\n | 'customOnsite'", + "description": "The type of the payment option.\n\nShops can be configured to support many different payment options. Some options are available only to buyers in specific regions.\n\n| Type | Description |\n|---|---|\n| `creditCard` | A vaulted or manually entered credit card. |\n| `deferred` | A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. |\n| `local` | A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market |\n| `manualPayment` | A manual payment option such as an in-person retail transaction. |\n| `offsite` | A payment processed outside of Shopify's checkout, excluding integrated wallets. |\n| `other` | Another type of payment not defined here. |\n| `paymentOnDelivery` | A payment collected on delivery. |\n| `redeemable` | A redeemable payment option such as a gift card or store credit. |\n| `wallet` | An integrated wallet such as PayPal, Google Pay, or Apple Pay. |\n| `customOnsite` | A custom payment option that's processed through a checkout extension with a payments app. |" + } + ], + "value": "export interface PaymentOption {\n /**\n * The type of the payment option.\n *\n * Shops can be configured to support many different payment options. Some options are available only to buyers in specific regions.\n *\n * | Type | Description |\n * |---|---|\n * | `creditCard` | A vaulted or manually entered credit card. |\n * | `deferred` | A [deferred payment](https://help.shopify.com/en/manual/orders/deferred-payments), such as invoicing the buyer and collecting payment at a later time. |\n * | `local` | A [local payment option](https://help.shopify.com/en/manual/payments/shopify-payments/local-payment-methods) specific to the current region or market |\n * | `manualPayment` | A manual payment option such as an in-person retail transaction. |\n * | `offsite` | A payment processed outside of Shopify's checkout, excluding integrated wallets. |\n * | `other` | Another type of payment not defined here. |\n * | `paymentOnDelivery` | A payment collected on delivery. |\n * | `redeemable` | A redeemable payment option such as a gift card or store credit. |\n * | `wallet` | An integrated wallet such as PayPal, Google Pay, or Apple Pay. |\n * | `customOnsite` | A custom payment option that's processed through a checkout extension with a payments app. |\n */\n type:\n | 'creditCard'\n | 'deferred'\n | 'local'\n | 'manualPayment'\n | 'offsite'\n | 'other'\n | 'paymentOnDelivery'\n | 'redeemable'\n | 'wallet'\n | 'customOnsite';\n\n /**\n * A session-scoped identifier for this payment option. This handle isn't globally unique; it's specific to the current checkout session or the shop.\n */\n handle: string;\n}" + } + }, + "BuyerIdentity": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "BuyerIdentity", + "description": "Information about the buyer who is completing the checkout.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data). The `customer` and `purchasingCompany` properties require level 1 access. The `email` and `phone` properties require level 2 access.", + "isPublicDocs": true, + "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the delivery group. The value is `undefined` if the underlying delivery line doesn't have an ID assigned.", - "isOptional": true + "name": "customer", + "value": "SubscribableSignalLike", + "description": "The buyer's customer account, including their ID and whether they've accepted marketing. The value is `undefined` if the buyer isn't a known customer for this shop or if they haven't logged in yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "isDeliveryRequired", - "value": "boolean", - "description": "Whether physical delivery is required for the items in this group. Digital-only groups don't require delivery." + "name": "email", + "value": "SubscribableSignalLike", + "description": "The email address the buyer provided during checkout. The value is `undefined` if the app doesn't have access to customer data.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "selectedDeliveryOption", - "value": "DeliveryOptionReference", - "description": "The delivery option the buyer has selected for this group. The value is `undefined` if the buyer hasn't selected a delivery option yet. Contains a `handle` you can match against `deliveryOptions` entries.", - "isOptional": true + "name": "phone", + "value": "SubscribableSignalLike", + "description": "The phone number the buyer provided during checkout. The value is `undefined` if no phone number was provided or the app doesn't have access to customer data.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "targetedCartLines", - "value": "CartLineReference[]", - "description": "The cart lines that belong to this delivery group. Each reference contains the cart line's `id`, which you can match against `lines` to get the full cart line details." + "name": "purchasingCompany", + "value": "SubscribableSignalLike", + "description": "The company and company location that a B2B (business-to-business) customer is purchasing on behalf of. Use this to identify the business context of the order. The value is `undefined` if the buyer isn't a B2B customer.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." } ], - "value": "export interface DeliveryGroup {\n /**\n * A unique identifier for the delivery group. The value is `undefined` if the underlying delivery line doesn't have an ID assigned.\n */\n id?: string;\n /**\n * The cart lines that belong to this delivery group. Each reference contains the cart line's `id`, which you can match against `lines` to get the full cart line details.\n */\n targetedCartLines: CartLineReference[];\n\n /**\n * The delivery options available for this group, including shipping, pickup point, and pickup location options. The buyer selects one of these to determine how their items are delivered.\n */\n deliveryOptions: DeliveryOption[];\n\n /**\n * The delivery option the buyer has selected for this group. The value is `undefined` if the buyer hasn't selected a delivery option yet. Contains a `handle` you can match against `deliveryOptions` entries.\n */\n selectedDeliveryOption?: DeliveryOptionReference;\n\n /**\n * Whether this group contains items for a one-time purchase or a subscription.\n * Subscription delivery groups might have different shipping options. See `DeliveryGroupType` for possible values.\n */\n groupType: DeliveryGroupType;\n\n /**\n * Whether physical delivery is required for the items in this group.\n * Digital-only groups don't require delivery.\n */\n isDeliveryRequired: boolean;\n}" - } - }, - "DeliveryOption": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "DeliveryOption", - "value": "ShippingOption | PickupPointOption | PickupLocationOption", - "description": "A delivery option available to the buyer. Use the `type` property to determine which kind of option it is:\n\n- `ShippingOption` (`type: 'shipping' | 'local'`): Items shipped by a carrier or delivered locally by the merchant.\n- `PickupPointOption` (`type: 'pickupPoint'`): Items shipped to a third-party collection point for the buyer to pick up.\n- `PickupLocationOption` (`type: 'pickup'`): Items picked up directly from a merchant's store or warehouse.", - "isPublicDocs": true + "value": "export interface BuyerIdentity {\n /**\n * The buyer's customer account, including their ID and whether they've accepted marketing. The value is `undefined` if the buyer isn't a\n * known customer for this shop or if they haven't logged in yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n customer: SubscribableSignalLike;\n\n /**\n * The email address the buyer provided during checkout. The value is `undefined` if the app doesn't have access to customer data.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n email: SubscribableSignalLike;\n\n /**\n * The phone number the buyer provided during checkout. The value is `undefined` if no phone number was provided or the app doesn't have access to customer data.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n phone: SubscribableSignalLike;\n\n /**\n * The company and company location that a B2B (business-to-business) customer is purchasing on behalf of. Use this to identify the business context of the order. The value is `undefined` if the buyer isn't a B2B customer.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n purchasingCompany: SubscribableSignalLike;\n}" } }, - "ShippingOption": { + "Customer": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "ShippingOption", - "description": "Represents a delivery option that's a shipping option.", + "name": "Customer", + "description": "Information about a customer who has previously purchased from this shop.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "carrier", - "value": "ShippingOptionCarrier", - "description": "Information about the carrier providing this shipping option, including the carrier's display name." + "name": "acceptsEmailMarketing", + "value": "boolean", + "description": "Whether the customer has opted in to email marketing.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "The carrier service code or rate identifier for this delivery option." + "name": "acceptsMarketing", + "value": "boolean", + "description": "Whether the customer has opted in to receiving marketing communications from the merchant, such as email campaigns and promotional offers.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n\n> Caution: This field is deprecated and will be removed in a future version. Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead.", + "deprecationMessage": "Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "cost", - "value": "Money", - "description": "The cost of this delivery option before any shipping discounts are applied. Compare with `costAfterDiscounts` to show savings." + "name": "acceptsSmsMarketing", + "value": "boolean", + "description": "Whether the customer has opted in to SMS marketing.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "costAfterDiscounts", - "value": "Money", - "description": "The cost of this delivery option after shipping discounts have been applied. This is the price the buyer actually pays for shipping." + "name": "email", + "value": "string", + "description": "The email address associated with the customer's account. The value is `undefined` if the app doesn't have the required access level.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "deliveryEstimate", - "value": "DeliveryEstimate", - "description": "The estimated delivery time for this shipping option. Use the `timeInTransit` range to display an estimated arrival window to the buyer." + "name": "firstName", + "value": "string", + "description": "The customer's first name. The value is `undefined` if the app doesn't have the required access level.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "description", + "name": "fullName", "value": "string", - "description": "Additional details about the delivery option provided by the carrier or merchant, such as estimated delivery windows or service level notes.", + "description": "The customer's full name, typically a combination of first and last name. The value is `undefined` if the app doesn't have the required access level.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "handle", + "name": "id", "value": "string", - "description": "The unique identifier of the delivery option. Use this to match against `DeliveryOptionReference.handle` or `DeliverySelectionGroup` entries." + "description": "A globally-unique identifier for the customer in the format `gid://shopify/Customer/`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'gid://shopify/Customer/123'", + "title": "Example" + } + ] + } + ] }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "Custom [metafields](https://shopify.dev/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a [Shopify Function](https://shopify.dev/docs/apps/build/functions). Use these to display additional information about the option." + "name": "image", + "value": "ImageDetails", + "description": "The customer's profile image, such as a Gravatar avatar. Use this to personalize the extension UI for the logged-in buyer.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "title", + "name": "lastName", "value": "string", - "description": "The merchant-facing or carrier-provided display name for the delivery option, such as \"Standard Shipping\" or \"Express\".", + "description": "The customer's last name. The value is `undefined` if the app doesn't have the required access level.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "type", - "value": "'shipping' | 'local'", - "description": "Identifies the delivery method. `'shipping'` means items are shipped by a carrier. `'local'` means the merchant handles delivery themselves, for example same-day local delivery." + "name": "ordersCount", + "value": "number", + "description": "The number of orders the customer has previously placed with this shop.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "phone", + "value": "string", + "description": "The phone number associated with the customer's account. The value is `undefined` if no phone number is on file or the app doesn't have the required access level.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "storeCreditAccounts", + "value": "StoreCreditAccount[]", + "description": "The store credit accounts owned by this customer that can be used as payment during checkout. Each account has a balance representing available store credit.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isPrivate": true } ], - "value": "export interface ShippingOption extends DeliveryOptionBase {\n /**\n * Identifies the delivery method. `'shipping'` means items are shipped by a carrier. `'local'` means the merchant handles delivery themselves, for example same-day local delivery.\n */\n type: 'shipping' | 'local';\n\n /**\n * Information about the carrier providing this shipping option, including the carrier's display name.\n */\n carrier: ShippingOptionCarrier;\n\n /**\n * The cost of this delivery option before any shipping discounts are applied. Compare with `costAfterDiscounts` to show savings.\n */\n cost: Money;\n\n /**\n * The cost of this delivery option after shipping discounts have been applied. This is the price the buyer actually pays for shipping.\n */\n costAfterDiscounts: Money;\n\n /**\n * The estimated delivery time for this shipping option. Use the `timeInTransit` range to display an estimated arrival window to the buyer.\n */\n deliveryEstimate: DeliveryEstimate;\n}" + "value": "export interface Customer {\n /**\n * A globally-unique identifier for the customer in the format `gid://shopify/Customer/`.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'gid://shopify/Customer/123'\n */\n id: string;\n /**\n * The email address associated with the customer's account. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n email?: string;\n /**\n * The phone number associated with the customer's account. The value is `undefined` if no phone number is on file or the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n phone?: string;\n /**\n * The customer's full name, typically a combination of first and last name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n fullName?: string;\n /**\n * The customer's first name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n firstName?: string;\n /**\n * The customer's last name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n lastName?: string;\n /**\n * The customer's profile image, such as a Gravatar avatar. Use this to personalize the extension UI for the logged-in buyer.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n image: ImageDetails;\n /**\n * Whether the customer has opted in to receiving marketing communications from the merchant, such as email campaigns and promotional offers.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * > Caution: This field is deprecated and will be removed in a future version. Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead.\n *\n * @deprecated Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead.\n */\n acceptsMarketing: boolean;\n /**\n * Whether the customer has opted in to email marketing.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n acceptsEmailMarketing: boolean;\n /**\n * Whether the customer has opted in to SMS marketing.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n acceptsSmsMarketing: boolean;\n /**\n * The store credit accounts owned by this customer that can be used as payment during checkout. Each account has a balance representing available store credit.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @private\n */\n storeCreditAccounts: StoreCreditAccount[];\n /**\n * The number of orders the customer has previously placed with this shop.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n ordersCount: number;\n}" } }, - "ShippingOptionCarrier": { + "ImageDetails": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "ShippingOptionCarrier", + "name": "ImageDetails", "description": "", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "name", + "name": "altText", "value": "string", - "description": "The display name of the shipping carrier, such as \"Canada Post\" or \"UPS\". The value is `undefined` if the carrier name isn't available.", + "description": "The alternative text for the image, used for accessibility. The value is `undefined` if the merchant hasn't provided alt text.", "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "url", + "value": "string", + "description": "The fully-qualified URL of the image. Use this to render the product or variant image in your extension." } ], - "value": "export interface ShippingOptionCarrier {\n /**\n * The display name of the shipping carrier, such as \"Canada Post\" or \"UPS\". The value is `undefined` if the carrier name isn't available.\n */\n name?: string;\n}" + "value": "export interface ImageDetails {\n /**\n * The fully-qualified URL of the image. Use this to render the product or variant image in your extension.\n */\n url: string;\n\n /**\n * The alternative text for the image, used for accessibility. The value is `undefined` if the merchant hasn't provided alt text.\n */\n altText?: string;\n}" } }, - "DeliveryEstimate": { + "StoreCreditAccount": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "DeliveryEstimate", - "description": "", + "name": "StoreCreditAccount", + "description": "A store credit account owned by the customer. Store credit is a form of payment that merchants can issue to customers for returns, refunds, or promotional purposes.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "timeInTransit", - "value": "NumberRange", - "description": "The estimated time in transit for the delivery, expressed as a range in seconds. Undefined when the carrier doesn't provide an estimate. When present, either the lower or upper bound of the range might still be omitted.", - "isOptional": true + "name": "balance", + "value": "Money", + "description": "The remaining balance available in this store credit account. This reflects the amount that can still be applied toward purchases." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A globally-unique identifier for the store credit account in the format `gid://shopify/StoreCreditAccount/`.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'gid://shopify/StoreCreditAccount/1'", + "title": "Example" + } + ] + } + ] } ], - "value": "export interface DeliveryEstimate {\n /**\n * The estimated time in transit for the delivery, expressed as a range\n * in seconds. Undefined when the carrier doesn't provide an estimate.\n * When present, either the lower or upper bound of the range might still\n * be omitted.\n */\n timeInTransit?: NumberRange;\n}" + "value": "export interface StoreCreditAccount {\n /**\n * A globally-unique identifier for the store credit account in the format `gid://shopify/StoreCreditAccount/`.\n *\n * @example 'gid://shopify/StoreCreditAccount/1'\n */\n id: string;\n /**\n * The remaining balance available in this store credit account. This reflects the amount that can still be applied toward purchases.\n */\n balance: Money;\n}" } }, - "NumberRange": { + "PurchasingCompany": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "NumberRange", - "description": "", + "name": "PurchasingCompany", + "description": "The company and location that the [B2B](/docs/apps/build/b2b) customer is purchasing on behalf of. This is present only when the buyer is logged in as a business customer.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "lower", - "value": "number", - "description": "The lower bound of the range. Undefined if only an upper bound is provided.", - "isOptional": true + "name": "company", + "value": "Company", + "description": "The company the B2B customer belongs to.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "upper", - "value": "number", - "description": "The upper bound of the range. Undefined if only a lower bound is provided.", - "isOptional": true + "name": "location", + "value": "CompanyLocation", + "description": "The specific company location associated with this B2B purchase.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." } ], - "value": "export interface NumberRange {\n /**\n * The lower bound of the range. Undefined if only an upper bound is\n * provided.\n */\n lower?: number;\n\n /**\n * The upper bound of the range. Undefined if only a lower bound is\n * provided.\n */\n upper?: number;\n}" + "value": "export interface PurchasingCompany {\n /**\n * The company the B2B customer belongs to.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n company: Company;\n /**\n * The specific company location associated with this B2B purchase.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n location: CompanyLocation;\n}" } }, - "Metafield": { + "Company": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "Metafield", - "description": "Metadata associated with the checkout. See the [metafields documentation](https://shopify.dev/docs/apps/build/custom-data/metafields) for more information on how metafields work.", + "name": "Company", + "description": "", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "key", + "name": "externalId", "value": "string", - "description": "The name of the metafield.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'delivery_instructions'", - "title": "Example" - } - ] - } - ] + "description": "A merchant-defined external identifier for the company. The value is `undefined` if the merchant hasn't set one.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "namespace", + "name": "id", "value": "string", - "description": "A container for a set of metafields. You need to define a custom namespace for your metafields to distinguish them from the metafields used by other apps.", + "description": "A globally-unique identifier for the company in the format `gid://shopify/Company/`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'my_app'", + "code": "'gid://shopify/Company/123'", "title": "Example" } ] @@ -2364,22 +2236,609 @@ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "value", - "value": "string | number", - "description": "The information to be stored as metadata." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "valueType", - "value": "'integer' | 'string' | 'json_string'", - "description": "The metafield's information type.\n\n- `'integer'`: A whole number value.\n- `'string'`: A plain text value.\n- `'json_string'`: A JSON-encoded string value." + "name": "name", + "value": "string", + "description": "The company's display name.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." } ], - "value": "export interface Metafield {\n /**\n * The name of the metafield.\n *\n * @example 'delivery_instructions'\n */\n key: string;\n\n /**\n * A container for a set of metafields. You need to define a custom\n * namespace for your metafields to distinguish them from the metafields\n * used by other apps.\n *\n * @example 'my_app'\n */\n namespace: string;\n\n /**\n * The information to be stored as metadata.\n */\n value: string | number;\n\n /**\n * The metafield's information type.\n *\n * - `'integer'`: A whole number value.\n * - `'string'`: A plain text value.\n * - `'json_string'`: A JSON-encoded string value.\n */\n valueType: 'integer' | 'string' | 'json_string';\n}" + "value": "export interface Company {\n /**\n * A globally-unique identifier for the company in the format `gid://shopify/Company/`.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'gid://shopify/Company/123'\n */\n id: string;\n /**\n * The company's display name.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n name: string;\n /**\n * A merchant-defined external identifier for the company. The value is `undefined` if the merchant hasn't set one.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n externalId?: string;\n}" } }, - "PickupPointOption": { + "CompanyLocation": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "CompanyLocation", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "externalId", + "value": "string", + "description": "A merchant-defined external identifier for the company location. The value is `undefined` if the merchant hasn't set one.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A globally-unique identifier for the company location in the format `gid://shopify/CompanyLocation/`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'gid://shopify/CompanyLocation/123'", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "The display name of the company location.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." + } + ], + "value": "export interface CompanyLocation {\n /**\n * A globally-unique identifier for the company location in the format `gid://shopify/CompanyLocation/`.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'gid://shopify/CompanyLocation/123'\n */\n id: string;\n /**\n * The display name of the company location.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n name: string;\n /**\n * A merchant-defined external identifier for the company location. The value is `undefined` if the merchant hasn't set one.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n externalId?: string;\n}" + } + }, + "CheckoutSettings": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "CheckoutSettings", + "description": "Settings describing the behavior of the buyer's checkout.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "orderSubmission", + "value": "'DRAFT_ORDER' | 'ORDER'", + "description": "The type of order created when the buyer completes checkout.\n\n- `'DRAFT_ORDER'`: The checkout creates a draft order that the merchant must manually confirm before fulfillment. Common for B2B checkouts with deferred payment terms.\n- `'ORDER'`: The checkout creates a confirmed order immediately upon completion." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "paymentTermsTemplate", + "value": "PaymentTermsTemplate", + "description": "The payment terms configured by the merchant for B2B orders, such as net-30 or net-60. The value is `undefined` if no payment terms are configured.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "shippingAddress", + "value": "ShippingAddressSettings", + "description": "Settings that control how the shipping address behaves during checkout, such as whether the buyer can edit the address." + } + ], + "value": "export interface CheckoutSettings {\n /**\n * The type of order created when the buyer completes checkout.\n *\n * - `'DRAFT_ORDER'`: The checkout creates a draft order that the merchant must manually confirm before fulfillment. Common for B2B checkouts with deferred payment terms.\n * - `'ORDER'`: The checkout creates a confirmed order immediately upon completion.\n */\n orderSubmission: 'DRAFT_ORDER' | 'ORDER';\n /**\n * The payment terms configured by the merchant for B2B orders, such as net-30 or net-60. The value is `undefined` if no payment terms are configured.\n */\n paymentTermsTemplate?: PaymentTermsTemplate;\n /**\n * Settings that control how the shipping address behaves during checkout, such as whether the buyer can edit the address.\n */\n shippingAddress: ShippingAddressSettings;\n}" + } + }, + "PaymentTermsTemplate": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "PaymentTermsTemplate", + "description": "A payment terms template configured by the merchant, defining when payment is due for B2B orders. Common examples include \"Net 30\" (due in 30 days) or \"Due on receipt\".", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "dueDate", + "value": "string", + "description": "The due date for payment in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format (`YYYY-MM-DDTHH:mm:ss.sssZ`). The value is `undefined` if the payment terms don't have a fixed due date.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "dueInDays", + "value": "number", + "description": "The number of days the buyer has to pay after the order is placed, such as `30` for \"Net 30\" terms. The value is `undefined` if the payment terms aren't net-based.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A globally-unique identifier for the payment terms template in the format `gid://shopify/PaymentTermsTemplate/`.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'gid://shopify/PaymentTermsTemplate/1'", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "The name of the payment terms translated to the buyer's current language, such as \"Net 30\" or \"Due on receipt\"." + } + ], + "value": "export interface PaymentTermsTemplate {\n /**\n * A globally-unique identifier for the payment terms template in the format `gid://shopify/PaymentTermsTemplate/`.\n *\n * @example 'gid://shopify/PaymentTermsTemplate/1'\n */\n id: string;\n /**\n * The name of the payment terms translated to the buyer's current language, such as \"Net 30\" or \"Due on receipt\".\n */\n name: string;\n /**\n * The due date for payment in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format (`YYYY-MM-DDTHH:mm:ss.sssZ`). The value is `undefined` if the payment terms don't have a fixed due date.\n */\n dueDate?: string;\n /**\n * The number of days the buyer has to pay after the order is placed, such as `30` for \"Net 30\" terms. The value is `undefined` if the payment terms aren't net-based.\n */\n dueInDays?: number;\n}" + } + }, + "ShippingAddressSettings": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "ShippingAddressSettings", + "description": "Settings describing the behavior of the shipping address.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "isEditable", + "value": "boolean", + "description": "Whether the buyer is allowed to edit the shipping address during checkout. When `false`, the shipping address is locked and can't be changed, which is common for B2B orders with a predefined ship-to address." + } + ], + "value": "export interface ShippingAddressSettings {\n /**\n * Whether the buyer is allowed to edit the shipping address during checkout. When `false`, the shipping address is locked and can't be changed, which is common for B2B orders with a predefined ship-to address.\n */\n isEditable: boolean;\n}" + } + }, + "CartCost": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "CartCost", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "subtotalAmount", + "value": "SubscribableSignalLike", + "description": "The sum of all line item prices at the current step of checkout, before shipping and taxes are applied. Use this value to display the base cost of the items the buyer purchased." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "totalAmount", + "value": "SubscribableSignalLike", + "description": "The minimum total at the current step of checkout. Costs not yet calculated, such as shipping on the information step, aren't included. Gift cards and store credits are excluded from this total." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "totalShippingAmount", + "value": "SubscribableSignalLike", + "description": "The total shipping cost after shipping discounts have been applied. The value is `undefined` if shipping hasn't been calculated yet, such as when the buyer is still on the information step." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "totalTaxAmount", + "value": "SubscribableSignalLike", + "description": "The total tax the buyer can expect to pay, or the total tax already included in product and shipping prices (for tax-inclusive regions). The value is `undefined` if taxes haven't been calculated yet." + } + ], + "value": "export interface CartCost {\n /**\n * The sum of all line item prices at the current step of checkout, before shipping and taxes are applied. Use this value to display the base cost of the items the buyer purchased.\n */\n subtotalAmount: SubscribableSignalLike;\n\n /**\n * The total shipping cost after shipping discounts have been applied. The value is `undefined` if shipping hasn't been calculated yet, such as when the buyer is still on the information step.\n */\n totalShippingAmount: SubscribableSignalLike;\n\n /**\n * The total tax the buyer can expect to pay, or the total tax already included in product and shipping prices (for tax-inclusive regions). The value is `undefined` if taxes haven't been calculated yet.\n */\n totalTaxAmount: SubscribableSignalLike;\n\n /**\n * The minimum total at the current step of checkout. Costs not yet calculated, such as shipping on the information step, aren't included. Gift cards and store credits are excluded from this total.\n */\n totalAmount: SubscribableSignalLike;\n}" + } + }, + "CustomerPrivacy": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "CustomerPrivacy", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "allowedProcessing", + "value": "AllowedProcessing", + "description": "Flags indicating whether each type of data processing is permitted, based on the visitor's consent, the merchant's privacy configuration, and the visitor's geographic location." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "metafields", + "value": "TrackingConsentMetafield[]", + "description": "The tracking consent metafields that have been stored for this visitor. These contain app-specific consent data beyond the standard categories.", + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "`[{key: 'analyticsType', value: 'granular'}, {key: 'marketingType', value: 'granular'}]`, or `[]`", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "region", + "value": "CustomerPrivacyRegion", + "description": "The visitor's geographic location, used to determine whether more granular consent controls should be displayed based on regional privacy regulations.", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "`{countryCode: 'CA', provinceCode: 'ON'}` for a visitor in Ontario, Canada; `{countryCode: 'US', provinceCode: undefined}` for a visitor in the United States if geolocation fails to detect the state; or `undefined` if neither country nor province is detected or geolocation fails.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "saleOfDataRegion", + "value": "boolean", + "description": "Whether the visitor is located in a region that requires an explicit opt-out option for the sale or sharing of personal data, such as California (CCPA) or other jurisdictions with similar regulations." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "shouldShowBanner", + "value": "boolean", + "description": "Whether a consent banner should be displayed by default when the page loads. Use this as the initial open/expanded state of the consent banner.\n\nThis is determined by the visitor's current privacy consent, the shop's [region visibility configuration](https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "visitorConsent", + "value": "VisitorConsent", + "description": "The visitor's current privacy consent settings. Each property represents a consent category and is `true` (actively granted), `false` (actively denied), or `undefined` (no decision made yet)." + } + ], + "value": "export interface CustomerPrivacy {\n /**\n * Flags indicating whether each type of data processing is permitted, based on the visitor's consent, the merchant's privacy configuration, and the visitor's geographic location.\n */\n allowedProcessing: AllowedProcessing;\n /**\n * The tracking consent metafields that have been stored for this visitor. These contain app-specific consent data beyond the standard categories.\n *\n * @example `[{key: 'analyticsType', value: 'granular'}, {key: 'marketingType', value: 'granular'}]`, or `[]`\n */\n metafields: TrackingConsentMetafield[];\n /**\n * The visitor's current privacy consent settings. Each property represents a consent category and is `true` (actively granted), `false` (actively denied), or `undefined` (no decision made yet).\n */\n visitorConsent: VisitorConsent;\n /**\n * Whether a consent banner should be displayed by default when the page loads. Use this as the initial open/expanded state of the consent banner.\n *\n * This is determined by the visitor's current privacy consent, the shop's [region visibility configuration](https://help.shopify.com/en/manual/privacy-and-security/privacy/customer-privacy-settings/privacy-settings#add-a-cookie-banner) settings, and the region in which the visitor is located.\n */\n shouldShowBanner: boolean;\n /**\n * Whether the visitor is located in a region that requires an explicit opt-out option for the sale or sharing of personal data, such as California (CCPA) or other jurisdictions with similar regulations.\n */\n saleOfDataRegion: boolean;\n /**\n * The visitor's geographic location, used to determine whether more granular consent controls should be displayed based on regional privacy regulations.\n *\n * @example `{countryCode: 'CA', provinceCode: 'ON'}` for a visitor in Ontario, Canada; `{countryCode: 'US', provinceCode: undefined}` for a visitor in the United States if geolocation fails to detect the state; or `undefined` if neither country nor province is detected or geolocation fails.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n region?: CustomerPrivacyRegion;\n}" + } + }, + "AllowedProcessing": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "AllowedProcessing", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "analytics", + "value": "boolean", + "description": "Whether analytics data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Analytics data includes how the shop was used and what interactions occurred." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "marketing", + "value": "boolean", + "description": "Whether marketing data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Marketing data includes attribution and targeted advertising preferences." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "preferences", + "value": "boolean", + "description": "Whether preference data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Preference data includes language, currency, and sizing choices." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "saleOfData", + "value": "boolean", + "description": "Whether data can be shared with third parties based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. This typically applies to behavioral advertising data." + } + ], + "value": "export interface AllowedProcessing {\n /**\n * Whether analytics data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Analytics\n * data includes how the shop was used and what interactions occurred.\n */\n analytics: boolean;\n /**\n * Whether marketing data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Marketing\n * data includes attribution and targeted advertising preferences.\n */\n marketing: boolean;\n /**\n * Whether preference data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Preference\n * data includes language, currency, and sizing choices.\n */\n preferences: boolean;\n /**\n * Whether data can be shared with third parties based on the visitor's\n * consent, the merchant's privacy configuration, and the visitor's region.\n * This typically applies to behavioral advertising data.\n */\n saleOfData: boolean;\n}" + } + }, + "TrackingConsentMetafield": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "TrackingConsentMetafield", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "key", + "value": "string", + "description": "The identifier for the tracking consent metafield, such as `'analyticsType'` or `'marketingType'`." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The value stored in the tracking consent metafield, such as `'granular'` or a stringified JSON object." + } + ], + "value": "export interface TrackingConsentMetafield {\n /**\n * The identifier for the tracking consent metafield, such as `'analyticsType'` or `'marketingType'`.\n */\n key: string;\n /**\n * The value stored in the tracking consent metafield, such as `'granular'` or a stringified JSON object.\n */\n value: string;\n}" + } + }, + "CustomerPrivacyRegion": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "CustomerPrivacyRegion", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "countryCode", + "value": "CountryCode", + "description": "The buyer's country code in [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format. The value is `undefined` if geolocation failed.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'CA' for Canada, 'US' for United States, 'GB' for Great Britain", + "title": "Example" + } + ] + } + ] + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "provinceCode", + "value": "string", + "description": "The buyer's province, state, or region code in [ISO 3166-2](https://en.wikipedia.org/wiki/ISO_3166-2) format. The value is `undefined` if geolocation failed or only the country was detected.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "isOptional": true, + "examples": [ + { + "title": "Example", + "description": "", + "tabs": [ + { + "code": "'ON' for Ontario, 'ENG' for England, 'CA' for California", + "title": "Example" + } + ] + } + ] + } + ], + "value": "export interface CustomerPrivacyRegion {\n /**\n * The buyer's country code in [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format. The value is `undefined` if geolocation failed.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'CA' for Canada, 'US' for United States, 'GB' for Great Britain\n */\n countryCode?: CountryCode;\n /**\n * The buyer's province, state, or region code in [ISO 3166-2](https://en.wikipedia.org/wiki/ISO_3166-2) format. The value is `undefined` if geolocation failed or only the country was detected.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'ON' for Ontario, 'ENG' for England, 'CA' for California\n */\n provinceCode?: string;\n}" + } + }, + "DeliveryGroup": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "DeliveryGroup", + "description": "A group of cart lines that share the same set of delivery options. For example, physical items might form one delivery group while digital items form another.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "deliveryOptions", + "value": "DeliveryOption[]", + "description": "The delivery options available for this group, including shipping, pickup point, and pickup location options. The buyer selects one of these to determine how their items are delivered." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "groupType", + "value": "DeliveryGroupType", + "description": "Whether this group contains items for a one-time purchase or a subscription. Subscription delivery groups might have different shipping options. See `DeliveryGroupType` for possible values." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the delivery group. The value is `undefined` if the underlying delivery line doesn't have an ID assigned.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "isDeliveryRequired", + "value": "boolean", + "description": "Whether physical delivery is required for the items in this group. Digital-only groups don't require delivery." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "selectedDeliveryOption", + "value": "DeliveryOptionReference", + "description": "The delivery option the buyer has selected for this group. The value is `undefined` if the buyer hasn't selected a delivery option yet. Contains a `handle` you can match against `deliveryOptions` entries.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "targetedCartLines", + "value": "CartLineReference[]", + "description": "The cart lines that belong to this delivery group. Each reference contains the cart line's `id`, which you can match against `lines` to get the full cart line details." + } + ], + "value": "export interface DeliveryGroup {\n /**\n * A unique identifier for the delivery group. The value is `undefined` if the underlying delivery line doesn't have an ID assigned.\n */\n id?: string;\n /**\n * The cart lines that belong to this delivery group. Each reference contains the cart line's `id`, which you can match against `lines` to get the full cart line details.\n */\n targetedCartLines: CartLineReference[];\n\n /**\n * The delivery options available for this group, including shipping, pickup point, and pickup location options. The buyer selects one of these to determine how their items are delivered.\n */\n deliveryOptions: DeliveryOption[];\n\n /**\n * The delivery option the buyer has selected for this group. The value is `undefined` if the buyer hasn't selected a delivery option yet. Contains a `handle` you can match against `deliveryOptions` entries.\n */\n selectedDeliveryOption?: DeliveryOptionReference;\n\n /**\n * Whether this group contains items for a one-time purchase or a subscription.\n * Subscription delivery groups might have different shipping options. See `DeliveryGroupType` for possible values.\n */\n groupType: DeliveryGroupType;\n\n /**\n * Whether physical delivery is required for the items in this group.\n * Digital-only groups don't require delivery.\n */\n isDeliveryRequired: boolean;\n}" + } + }, + "DeliveryOption": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "DeliveryOption", + "value": "ShippingOption | PickupPointOption | PickupLocationOption", + "description": "A delivery option available to the buyer. Use the `type` property to determine which kind of option it is:\n\n- `ShippingOption` (`type: 'shipping' | 'local'`): Items shipped by a carrier or delivered locally by the merchant.\n- `PickupPointOption` (`type: 'pickupPoint'`): Items shipped to a third-party collection point for the buyer to pick up.\n- `PickupLocationOption` (`type: 'pickup'`): Items picked up directly from a merchant's store or warehouse.", + "isPublicDocs": true + } + }, + "ShippingOption": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "ShippingOption", + "description": "Represents a delivery option that's a shipping option.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "carrier", + "value": "ShippingOptionCarrier", + "description": "Information about the carrier providing this shipping option, including the carrier's display name." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "code", + "value": "string", + "description": "The carrier service code or rate identifier for this delivery option." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "cost", + "value": "Money", + "description": "The cost of this delivery option before any shipping discounts are applied. Compare with `costAfterDiscounts` to show savings." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "costAfterDiscounts", + "value": "Money", + "description": "The cost of this delivery option after shipping discounts have been applied. This is the price the buyer actually pays for shipping." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "deliveryEstimate", + "value": "DeliveryEstimate", + "description": "The estimated delivery time for this shipping option. Use the `timeInTransit` range to display an estimated arrival window to the buyer." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "description", + "value": "string", + "description": "Additional details about the delivery option provided by the carrier or merchant, such as estimated delivery windows or service level notes.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "handle", + "value": "string", + "description": "The unique identifier of the delivery option. Use this to match against `DeliveryOptionReference.handle` or `DeliverySelectionGroup` entries." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "metafields", + "value": "Metafield[]", + "description": "Custom [metafields](/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a [Shopify Function](/docs/apps/build/functions). Use these to display additional information about the option." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "string", + "description": "The merchant-facing or carrier-provided display name for the delivery option, such as \"Standard Shipping\" or \"Express\".", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'shipping' | 'local'", + "description": "Identifies the delivery method. `'shipping'` means items are shipped by a carrier. `'local'` means the merchant handles delivery themselves, for example same-day local delivery." + } + ], + "value": "export interface ShippingOption extends DeliveryOptionBase {\n /**\n * Identifies the delivery method. `'shipping'` means items are shipped by a carrier. `'local'` means the merchant handles delivery themselves, for example same-day local delivery.\n */\n type: 'shipping' | 'local';\n\n /**\n * Information about the carrier providing this shipping option, including the carrier's display name.\n */\n carrier: ShippingOptionCarrier;\n\n /**\n * The cost of this delivery option before any shipping discounts are applied. Compare with `costAfterDiscounts` to show savings.\n */\n cost: Money;\n\n /**\n * The cost of this delivery option after shipping discounts have been applied. This is the price the buyer actually pays for shipping.\n */\n costAfterDiscounts: Money;\n\n /**\n * The estimated delivery time for this shipping option. Use the `timeInTransit` range to display an estimated arrival window to the buyer.\n */\n deliveryEstimate: DeliveryEstimate;\n}" + } + }, + "ShippingOptionCarrier": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "ShippingOptionCarrier", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "The display name of the shipping carrier, such as \"Canada Post\" or \"UPS\". The value is `undefined` if the carrier name isn't available.", + "isOptional": true + } + ], + "value": "export interface ShippingOptionCarrier {\n /**\n * The display name of the shipping carrier, such as \"Canada Post\" or \"UPS\". The value is `undefined` if the carrier name isn't available.\n */\n name?: string;\n}" + } + }, + "DeliveryEstimate": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "DeliveryEstimate", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "timeInTransit", + "value": "NumberRange", + "description": "The estimated time in transit for the delivery, expressed as a range in seconds. Undefined when the carrier doesn't provide an estimate. When present, either the lower or upper bound of the range might still be omitted.", + "isOptional": true + } + ], + "value": "export interface DeliveryEstimate {\n /**\n * The estimated time in transit for the delivery, expressed as a range\n * in seconds. Undefined when the carrier doesn't provide an estimate.\n * When present, either the lower or upper bound of the range might still\n * be omitted.\n */\n timeInTransit?: NumberRange;\n}" + } + }, + "NumberRange": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "NumberRange", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "lower", + "value": "number", + "description": "The lower bound of the range. Undefined if only an upper bound is provided.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "upper", + "value": "number", + "description": "The upper bound of the range. Undefined if only a lower bound is provided.", + "isOptional": true + } + ], + "value": "export interface NumberRange {\n /**\n * The lower bound of the range. Undefined if only an upper bound is\n * provided.\n */\n lower?: number;\n\n /**\n * The upper bound of the range. Undefined if only a lower bound is\n * provided.\n */\n upper?: number;\n}" + } + }, + "PickupPointOption": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "name": "PickupPointOption", @@ -2441,7 +2900,7 @@ "syntaxKind": "PropertySignature", "name": "metafields", "value": "Metafield[]", - "description": "Custom [metafields](https://shopify.dev/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a [Shopify Function](https://shopify.dev/docs/apps/build/functions). Use these to display additional information about the option." + "description": "Custom [metafields](/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a [Shopify Function](/docs/apps/build/functions). Use these to display additional information about the option." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -2561,7 +3020,7 @@ "syntaxKind": "PropertySignature", "name": "metafields", "value": "Metafield[]", - "description": "Custom [metafields](https://shopify.dev/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a [Shopify Function](https://shopify.dev/docs/apps/build/functions). Use these to display additional information about the option." + "description": "Custom [metafields](/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a [Shopify Function](/docs/apps/build/functions). Use these to display additional information about the option." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -2613,7 +3072,7 @@ "syntaxKind": "TypeAliasDeclaration", "name": "DeliveryGroupType", "value": "'oneTimePurchase' | 'subscription'", - "description": "The possible types of a delivery group.\n\n- `'oneTimePurchase'`: Items bought as a single, non-recurring purchase.\n- `'subscription'`: Items bought through a [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) that results in recurring deliveries.", + "description": "The possible types of a delivery group.\n\n- `'oneTimePurchase'`: Items bought as a single, non-recurring purchase.\n- `'subscription'`: Items bought through a [selling plan](/docs/apps/build/purchase-options/subscriptions) that results in recurring deliveries.", "isPublicDocs": true } }, @@ -2659,7 +3118,7 @@ "syntaxKind": "TypeAliasDeclaration", "name": "CartDiscountAllocation", "value": "CartCodeDiscountAllocation | CartAutomaticDiscountAllocation | CartCustomDiscountAllocation", - "description": "A discount allocation applied to the cart. Use the `type` property to determine how the discount was triggered:\n\n- `CartCodeDiscountAllocation` (`type: 'code'`): Triggered by a discount code the buyer entered.\n- `CartAutomaticDiscountAllocation` (`type: 'automatic'`): Applied automatically based on merchant-configured rules.\n- `CartCustomDiscountAllocation` (`type: 'custom'`): Applied by a [Shopify Function](https://shopify.dev/docs/api/functions/latest/discount).", + "description": "A discount allocation applied to the cart. Use the `type` property to determine how the discount was triggered:\n\n- `CartCodeDiscountAllocation` (`type: 'code'`): Triggered by a discount code the buyer entered.\n- `CartAutomaticDiscountAllocation` (`type: 'automatic'`): Applied automatically based on merchant-configured rules.\n- `CartCustomDiscountAllocation` (`type: 'custom'`): Applied by a [Shopify Function](/docs/api/functions/latest/discount).", "isPublicDocs": true } }, @@ -2746,17 +3205,17 @@ "syntaxKind": "PropertySignature", "name": "title", "value": "string", - "description": "The title of the custom discount, typically applied by a [Shopify Function](https://shopify.dev/docs/api/functions/latest/discount)." + "description": "The title of the custom discount, typically applied by a [Shopify Function](/docs/api/functions/latest/discount)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "type", "value": "'custom'", - "description": "Identifies this as a custom discount applied by a [Shopify Function](https://shopify.dev/docs/api/functions/latest/discount)." + "description": "Identifies this as a custom discount applied by a [Shopify Function](/docs/api/functions/latest/discount)." } ], - "value": "export interface CartCustomDiscountAllocation\n extends CartDiscountAllocationBase {\n /**\n * The title of the custom discount, typically applied by a [Shopify Function](https://shopify.dev/docs/api/functions/latest/discount).\n */\n title: string;\n\n /**\n * Identifies this as a custom discount applied by a [Shopify Function](https://shopify.dev/docs/api/functions/latest/discount).\n */\n type: 'custom';\n}" + "value": "export interface CartCustomDiscountAllocation\n extends CartDiscountAllocationBase {\n /**\n * The title of the custom discount, typically applied by a [Shopify Function](/docs/api/functions/latest/discount).\n */\n title: string;\n\n /**\n * Identifies this as a custom discount applied by a [Shopify Function](/docs/api/functions/latest/discount).\n */\n type: 'custom';\n}" } }, "CartDiscountCode": { @@ -2807,7 +3266,7 @@ "syntaxKind": "PropertySignature", "name": "capabilities", "value": "SubscribableSignalLike", - "description": "The allowed capabilities of the extension, defined in your [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file." + "description": "The allowed capabilities of the extension, defined in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n\n* [`api_access`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#api-access): the extension can access the Storefront API.\n\n* [`network_access`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access): the extension can make external network calls.\n\n* [`block_progress`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#block-progress): the extension can block a customer's progress and the merchant has allowed this blocking behavior.\n\n* [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent): the extension can collect customer consent for SMS marketing.\n\n* [`collect_buyer_consent.customer_privacy`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent): the extension can register customer consent decisions that are honored on Shopify-managed services.\n\n* [`iframe.sources`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#iframe): the extension can embed an external URL in an iframe." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -2855,7 +3314,7 @@ "syntaxKind": "PropertySignature", "name": "version", "value": "string", - "description": "The published version of the running extension target.\n\nFor unpublished extensions, the value is `undefined`.\n\nDon't use this property as a stable identifier in development environments. It becomes available only after the extension is published.", + "description": "The published version of the running extension target.\n\nFor unpublished extensions, the value is `undefined`.", "isOptional": true, "examples": [ { @@ -2871,7 +3330,7 @@ ] } ], - "value": "export interface Extension {\n /**\n * The API version that was set in the extension config file.\n *\n * @example '2024-10', '2025-01', '2025-04', '2025-07', '2025-10'\n */\n apiVersion: ApiVersion;\n\n /**\n * The allowed capabilities of the extension, defined in your\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n */\n capabilities: SubscribableSignalLike;\n\n /**\n * Information about the editor where the extension is being rendered.\n *\n * If the value is undefined, then the extension isn't running in an editor.\n */\n editor?: Editor;\n\n /**\n * A Boolean to show whether your extension is currently rendered to the screen.\n *\n * Shopify might render your extension before it's visible in the UI,\n * typically to pre-render extensions that appear on a later step of the\n * checkout.\n *\n * Your extension might also continue to run after the customer has navigated away\n * from where it was rendered. The extension continues running so that\n * your extension is immediately available to render if the customer navigates back.\n */\n rendered: SubscribableSignalLike;\n\n /**\n * The URL to the script that started the extension target.\n */\n scriptUrl: string;\n\n /**\n * The identifier that specifies where in Shopify's UI your code is being\n * injected. This is one of the targets you've included in your\n * extension's configuration file.\n *\n * @example 'purchase.checkout.block.render'\n * @see https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/extension-targets-overview\n * @see https://shopify.dev/docs/apps/app-extensions/configuration#targets\n */\n target: Target;\n\n /**\n * The published version of the running extension target.\n *\n * For unpublished extensions, the value is `undefined`.\n *\n * Don't use this property as a stable identifier in development environments.\n * It becomes available only after the extension is published.\n *\n * @example 3.0.10\n */\n version?: string;\n}" + "value": "export interface Extension {\n /**\n * The API version that was set in the extension config file.\n *\n * @example '2024-10', '2025-01', '2025-04', '2025-07', '2025-10'\n */\n apiVersion: ApiVersion;\n\n /**\n * The allowed capabilities of the extension, defined\n * in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n *\n * * [`api_access`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#api-access): the extension can access the Storefront API.\n *\n * * [`network_access`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access): the extension can make external network calls.\n *\n * * [`block_progress`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#block-progress): the extension can block a customer's progress and the merchant has allowed this blocking behavior.\n *\n * * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent): the extension can collect customer consent for SMS marketing.\n *\n * * [`collect_buyer_consent.customer_privacy`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent): the extension can register customer consent decisions that are honored on Shopify-managed services.\n *\n * * [`iframe.sources`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#iframe): the extension can embed an external URL in an iframe.\n */\n capabilities: SubscribableSignalLike;\n\n /**\n * Information about the editor where the extension is being rendered.\n *\n * If the value is undefined, then the extension isn't running in an editor.\n */\n editor?: Editor;\n\n /**\n * A Boolean to show whether your extension is currently rendered to the screen.\n *\n * Shopify might render your extension before it's visible in the UI,\n * typically to pre-render extensions that appear on a later step of the\n * checkout.\n *\n * Your extension might also continue to run after the customer has navigated away\n * from where it was rendered. The extension continues running so that\n * your extension is immediately available to render if the customer navigates back.\n */\n rendered: SubscribableSignalLike;\n\n /**\n * The URL to the script that started the extension target.\n */\n scriptUrl: string;\n\n /**\n * The identifier that specifies where in Shopify's UI your code is being\n * injected. This is one of the targets you've included in your\n * extension's configuration file.\n *\n * @example 'purchase.checkout.block.render'\n * @see /docs/api/checkout-ui-extensions/{API_VERSION}/extension-targets-overview\n * @see /docs/apps/app-extensions/configuration#targets\n */\n target: Target;\n\n /**\n * The published version of the running extension target.\n *\n * For unpublished extensions, the value is `undefined`.\n *\n * @example 3.0.10\n */\n version?: string;\n}" } }, "ApiVersion": { @@ -2903,10 +3362,10 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'checkout'", - "description": "Indicates whether the extension is rendering in the [checkout editor](https://shopify.dev/docs/apps/checkout). Always `'checkout'`." + "description": "Indicates whether the extension is rendering in the [checkout editor](/docs/apps/checkout). Always `'checkout'`." } ], - "value": "export interface Editor {\n /**\n * Indicates whether the extension is rendering in the [checkout editor](https://shopify.dev/docs/apps/checkout). Always `'checkout'`.\n */\n type: 'checkout';\n}" + "value": "export interface Editor {\n /**\n * Indicates whether the extension is rendering in the [checkout editor](/docs/apps/checkout). Always `'checkout'`.\n */\n type: 'checkout';\n}" } }, "I18n": { @@ -3190,7 +3649,7 @@ "syntaxKind": "PropertySignature", "name": "lineComponents", "value": "CartBundleLineComponent[]", - "description": "The individual components of a [bundle](https://shopify.dev/docs/apps/build/product-merchandising/bundles) line item. Each component represents a separate product within the bundle. Returns an empty array if the line item isn't a bundle." + "description": "The individual components of a [bundle](/docs/apps/build/product-merchandising/bundles) line item. Each component represents a separate product within the bundle. Returns an empty array if the line item isn't a bundle." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -3214,7 +3673,7 @@ "description": "The number of units of this merchandise that the buyer purchased." } ], - "value": "export interface CartLine {\n /**\n * A unique identifier for the cart line in the format `gid://shopify/CartLine/`. This ID isn't stable and can change after any cart operation, so avoid persisting it. Always look up the current ID before calling `applyCartLinesChange()`, because you'll need it to create a `CartLineChange` object.\n *\n * @example 'gid://shopify/CartLine/123'\n */\n id: string;\n\n /**\n * The product variant or other merchandise associated with this line item. Use this to access product details such as the title, image, SKU, and selected options.\n */\n merchandise: Merchandise;\n\n /**\n * The number of units of this merchandise that the buyer purchased.\n */\n quantity: number;\n\n /**\n * The cost breakdown for this line item, including the total price after any line-level discounts have been applied.\n */\n cost: CartLineCost;\n\n /**\n * Custom key-value attributes attached to this cart line, such as gift messages or engraving text. Use `applyCartLinesChange()` to update these values.\n */\n attributes: Attribute[];\n\n /**\n * Discounts applied to this cart line, including code-based, automatic, and custom discounts. Each allocation shows the discounted amount and how the discount was triggered.\n */\n discountAllocations: CartDiscountAllocation[];\n\n /**\n * The individual components of a [bundle](https://shopify.dev/docs/apps/build/product-merchandising/bundles) line item. Each component represents a separate product within the bundle. Returns an empty array if the line item isn't a bundle.\n */\n lineComponents: CartLineComponentType[];\n\n /**\n * The parent line item that this line belongs to, or `null` if this is a\n * top-level line item. Used to identify lines added as children of a bundle\n * or other grouped product.\n */\n parentRelationship: CartLineParentRelationship | null;\n}" + "value": "export interface CartLine {\n /**\n * A unique identifier for the cart line in the format `gid://shopify/CartLine/`. This ID isn't stable and can change after any cart operation, so avoid persisting it. Always look up the current ID before calling `applyCartLinesChange()`, because you'll need it to create a `CartLineChange` object.\n *\n * @example 'gid://shopify/CartLine/123'\n */\n id: string;\n\n /**\n * The product variant or other merchandise associated with this line item. Use this to access product details such as the title, image, SKU, and selected options.\n */\n merchandise: Merchandise;\n\n /**\n * The number of units of this merchandise that the buyer purchased.\n */\n quantity: number;\n\n /**\n * The cost breakdown for this line item, including the total price after any line-level discounts have been applied.\n */\n cost: CartLineCost;\n\n /**\n * Custom key-value attributes attached to this cart line, such as gift messages or engraving text. Use `applyCartLinesChange()` to update these values.\n */\n attributes: Attribute[];\n\n /**\n * Discounts applied to this cart line, including code-based, automatic, and custom discounts. Each allocation shows the discounted amount and how the discount was triggered.\n */\n discountAllocations: CartDiscountAllocation[];\n\n /**\n * The individual components of a [bundle](/docs/apps/build/product-merchandising/bundles) line item. Each component represents a separate product within the bundle. Returns an empty array if the line item isn't a bundle.\n */\n lineComponents: CartLineComponentType[];\n\n /**\n * The parent line item that this line belongs to, or `null` if this is a\n * top-level line item. Used to identify lines added as children of a bundle\n * or other grouped product.\n */\n parentRelationship: CartLineParentRelationship | null;\n}" } }, "CartLineCost": { @@ -3374,7 +3833,7 @@ "syntaxKind": "PropertySignature", "name": "sellingPlan", "value": "SellingPlan", - "description": "The [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) associated with this variant, such as a subscription or pre-order plan. The value is `undefined` if the item isn't being purchased through a selling plan.", + "description": "The [selling plan](/docs/apps/build/purchase-options/subscriptions) associated with this variant, such as a subscription or pre-order plan. The value is `undefined` if the item isn't being purchased through a selling plan.", "isOptional": true }, { @@ -3503,43 +3962,6 @@ "value": "export interface SelectedOption {\n /**\n * The name of the product option, such as \"Color\" or \"Size\".\n *\n * @example 'Size'\n */\n name: string;\n\n /**\n * The selected value for the product option, such as \"Red\" or \"Large\".\n *\n * @example 'Large'\n */\n value: string;\n}" } }, - "SellingPlan": { - "src/surfaces/checkout/api/shared.ts": { - "filePath": "src/surfaces/checkout/api/shared.ts", - "name": "SellingPlan", - "description": "A [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) represents a recurring or deferred purchasing option for a product, such as a subscription, pre-order, or try-before-you-buy plan. The merchant configures selling plans to define how and when the buyer is charged.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A globally-unique identifier for the selling plan in the format `gid://shopify/SellingPlan/`. Use this to reference the specific selling plan associated with a line item.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'gid://shopify/SellingPlan/1'", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/checkout/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "recurringDeliveries", - "value": "boolean", - "description": "Whether purchasing through this selling plan results in multiple deliveries. `true` for subscription plans with recurring fulfillment, `false` for one-time pre-orders or try-before-you-buy plans." - } - ], - "value": "export interface SellingPlan {\n /**\n * A globally-unique identifier for the selling plan in the format\n * `gid://shopify/SellingPlan/`. Use this to reference the specific\n * selling plan associated with a line item.\n *\n * @example 'gid://shopify/SellingPlan/1'\n */\n id: string;\n\n /**\n * Whether purchasing through this selling plan results in multiple\n * deliveries. `true` for subscription plans with recurring fulfillment,\n * `false` for one-time pre-orders or try-before-you-buy plans.\n */\n recurringDeliveries: boolean;\n}" - } - }, "CartLineParentRelationship": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -3569,7 +3991,7 @@ "syntaxKind": "PropertySignature", "name": "country", "value": "SubscribableSignalLike", - "description": "The country context of the checkout, carried over from the cart. It updates when the buyer changes their shipping address country. Use this value to display region-specific content such as local support information or regional policies. The value is `undefined` if the buyer's country is unknown.\n\nDerived from the buyer's shipping address. Returns `undefined` until the buyer enters a shipping address." + "description": "The country context of the checkout, carried over from the cart. It updates when the buyer changes their shipping address country. Use this value to display region-specific content such as local support information or regional policies. The value is `undefined` if the buyer's country is unknown." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -3597,8 +4019,8 @@ "syntaxKind": "PropertySignature", "name": "market", "value": "SubscribableSignalLike", - "description": "The [market](/docs/apps/build/markets) context of the checkout, carried over from the cart context. Markets group countries and regions with shared pricing, languages, and domains. The market context updates when the buyer changes the country of their shipping address. The value is `undefined` if the market is unknown.", - "deprecationMessage": "Merchants now manage which extensions load for each\nmarket, so extensions no longer need to check this value." + "description": "The [market](/docs/apps/build/markets) context of the checkout, carried over from the cart context. Markets group countries and regions with shared pricing, languages, and domains. It updates when the buyer changes the country of their shipping address. The value is `undefined` if the market is unknown.\n\n> Caution: Deprecated as of version `2025-04`. Merchants now manage which extensions load for each market, so extensions no longer need to check this value.", + "deprecationMessage": "Deprecated as of version `2025-04`" }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -3608,7 +4030,7 @@ "description": "The buyer's time zone, based on their browser or account settings. Use this value to format dates and times relative to the buyer's local time." } ], - "value": "export interface Localization {\n /**\n * The currency that the buyer sees for money amounts in the checkout. Use this value to format prices and totals in the buyer's expected currency.\n */\n currency: SubscribableSignalLike;\n\n /**\n * The buyer's time zone, based on their browser or account settings. Use this value to format dates and times relative to the buyer's local time.\n */\n timezone: SubscribableSignalLike;\n\n /**\n * The language the buyer sees in the checkout. This reflects the language selected by the buyer or determined by their browser settings, and might differ from the languages your extension supports.\n */\n language: SubscribableSignalLike;\n\n /**\n * The best available language match for your extension based on the buyer's language. If the buyer's language is `'fr-CA'` but your extension supports only `'fr'`, this returns `'fr'`. If your extension doesn't support any variant of the buyer's language, this falls back to your extension's default locale (the `.default.json` translation file). Use this value to load the correct translation file for your extension.\n */\n extensionLanguage: SubscribableSignalLike;\n\n /**\n * The country context of the checkout, carried over from the cart. It updates when the buyer changes their shipping address country. Use this value to display region-specific content such as local support information or regional policies. The value is `undefined` if the buyer's country is unknown.\n *\n * Derived from the buyer's shipping address. Returns `undefined` until the\n * buyer enters a shipping address.\n */\n country: SubscribableSignalLike;\n\n /**\n * The [market](/docs/apps/build/markets) context of the checkout,\n * carried over from the cart context. Markets group countries and\n * regions with shared pricing, languages, and domains. The market\n * context updates when the buyer changes the country of their\n * shipping address. The value is `undefined` if the market is unknown.\n *\n * @deprecated Merchants now manage which extensions load for each\n * market, so extensions no longer need to check this value.\n */\n market: SubscribableSignalLike;\n}" + "value": "export interface Localization {\n /**\n * The currency that the buyer sees for money amounts in the checkout. Use this value to format prices and totals in the buyer's expected currency.\n */\n currency: SubscribableSignalLike;\n\n /**\n * The buyer's time zone, based on their browser or account settings. Use this value to format dates and times relative to the buyer's local time.\n */\n timezone: SubscribableSignalLike;\n\n /**\n * The language the buyer sees in the checkout. This reflects the language selected by the buyer or determined by their browser settings, and might differ from the languages your extension supports.\n */\n language: SubscribableSignalLike;\n\n /**\n * The best available language match for your extension based on the buyer's language. If the buyer's language is `'fr-CA'` but your extension supports only `'fr'`, this returns `'fr'`. If your extension doesn't support any variant of the buyer's language, this falls back to your extension's default locale (the `.default.json` translation file). Use this value to load the correct translation file for your extension.\n */\n extensionLanguage: SubscribableSignalLike;\n\n /**\n * The country context of the checkout, carried over from the cart. It updates when the buyer changes their shipping address country. Use this value to display region-specific content such as local support information or regional policies. The value is `undefined` if the buyer's country is unknown.\n */\n country: SubscribableSignalLike;\n\n /**\n * The [market](/docs/apps/build/markets) context of the checkout, carried over from the cart context. Markets group countries and regions with shared pricing, languages, and domains. It updates when the buyer changes the country of their shipping address. The value is `undefined` if the market is unknown.\n *\n * > Caution: Deprecated as of version `2025-04`. Merchants now manage which extensions load for each market, so extensions no longer need to check this value.\n *\n * @deprecated Deprecated as of version `2025-04`\n */\n market: SubscribableSignalLike;\n}" } }, "Country": { @@ -3650,67 +4072,6 @@ "value": "export interface Country {\n /**\n * The two-letter country code in [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format.\n *\n * @example 'CA' for Canada, 'US' for United States.\n */\n isoCode: CountryCode;\n}" } }, - "Currency": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "Currency", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "isoCode", - "value": "CurrencyCode", - "description": "The three-letter currency code in [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) format, such as `'USD'`, `'EUR'`, or `'CAD'`." - } - ], - "value": "export interface Currency {\n /**\n * The three-letter currency code in [ISO 4217](https://en.wikipedia.org/wiki/ISO_4217) format, such as `'USD'`, `'EUR'`, or `'CAD'`.\n */\n isoCode: CurrencyCode;\n}" - } - }, - "Language": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "Language", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "isoCode", - "value": "string", - "description": "The [BCP-47](https://en.wikipedia.org/wiki/IETF_language_tag) language tag that identifies the language. This is a standardized code that might include a base language and an optional region subtag separated by a dash. For example, `'en'` represents English and `'en-US'` represents English as used in the United States. The region subtag follows the [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) standard." - } - ], - "value": "export interface Language {\n /**\n * The [BCP-47](https://en.wikipedia.org/wiki/IETF_language_tag) language tag that identifies the language. This is a standardized code that might include a base language and an optional region subtag separated by a dash. For example, `'en'` represents English and `'en-US'` represents English as used in the United States. The region subtag follows the [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) standard.\n */\n isoCode: string;\n}" - } - }, - "Market": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "Market", - "description": "A [Shopify Market](https://shopify.dev/docs/apps/build/markets) that represents a group of one or more regions for international selling.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The human-readable, shop-scoped identifier for the market, such as `'us'` or `'eu'`. Merchants define these handles when configuring [Shopify Markets](https://shopify.dev/docs/apps/build/markets)." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A globally-unique identifier for the market in the format `gid://shopify/Market/`." - } - ], - "value": "export interface Market {\n /**\n * A globally-unique identifier for the market in the format `gid://shopify/Market/`.\n */\n id: string;\n\n /**\n * The human-readable, shop-scoped identifier for the market, such as `'us'` or `'eu'`. Merchants define these handles when configuring [Shopify Markets](https://shopify.dev/docs/apps/build/markets).\n */\n handle: string;\n}" - } - }, "Timezone": { "src/shared.ts": { "filePath": "src/shared.ts", @@ -3720,59 +4081,6 @@ "description": "" } }, - "LocalizedField": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "LocalizedField", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "LocalizedFieldKey", - "description": "The identifier for the localized field, indicating the type of information collected (for example, a tax credential or shipping credential for a specific country)." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The localized display label for the field, suitable for rendering in the UI.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'CPF/CNPJ' for a Brazilian tax credential", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The current value entered by the buyer for this field." - } - ], - "value": "export interface LocalizedField {\n /**\n * The identifier for the localized field, indicating the type of information\n * collected (for example, a tax credential or shipping credential for a\n * specific country).\n */\n key: LocalizedFieldKey;\n\n /**\n * The localized display label for the field, suitable for rendering in the UI.\n *\n * @example 'CPF/CNPJ' for a Brazilian tax credential\n */\n title: string;\n\n /**\n * The current value entered by the buyer for this field.\n */\n value: string;\n}" - } - }, - "LocalizedFieldKey": { - "src/shared.ts": { - "filePath": "src/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "LocalizedFieldKey", - "value": "'SHIPPING_CREDENTIAL_BR' | 'SHIPPING_CREDENTIAL_CL' | 'SHIPPING_CREDENTIAL_CN' | 'SHIPPING_CREDENTIAL_CO' | 'SHIPPING_CREDENTIAL_CR' | 'SHIPPING_CREDENTIAL_EC' | 'SHIPPING_CREDENTIAL_ES' | 'SHIPPING_CREDENTIAL_GT' | 'SHIPPING_CREDENTIAL_ID' | 'SHIPPING_CREDENTIAL_KR' | 'SHIPPING_CREDENTIAL_MY' | 'SHIPPING_CREDENTIAL_MX' | 'SHIPPING_CREDENTIAL_PE' | 'SHIPPING_CREDENTIAL_PT' | 'SHIPPING_CREDENTIAL_PY' | 'SHIPPING_CREDENTIAL_TR' | 'SHIPPING_CREDENTIAL_TW' | 'SHIPPING_CREDENTIAL_TYPE_CO' | 'TAX_CREDENTIAL_BR' | 'TAX_CREDENTIAL_CL' | 'TAX_CREDENTIAL_CO' | 'TAX_CREDENTIAL_CR' | 'TAX_CREDENTIAL_EC' | 'TAX_CREDENTIAL_ES' | 'TAX_CREDENTIAL_GT' | 'TAX_CREDENTIAL_ID' | 'TAX_CREDENTIAL_IT' | 'TAX_CREDENTIAL_MX' | 'TAX_CREDENTIAL_MY' | 'TAX_CREDENTIAL_PE' | 'TAX_CREDENTIAL_PT' | 'TAX_CREDENTIAL_PY' | 'TAX_CREDENTIAL_TR' | 'TAX_CREDENTIAL_TYPE_CO' | 'TAX_CREDENTIAL_TYPE_MX' | 'TAX_CREDENTIAL_USE_MX' | 'TAX_EMAIL_IT'", - "description": "A union of keys for the localized fields that are required by certain countries." - } - }, "StorefrontApiVersion": { "src/shared.ts": { "filePath": "src/shared.ts", @@ -3836,7 +4144,7 @@ "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "name": "SessionToken", - "description": "Authenticates requests between your extension and your app backend. Use session tokens to verify the identity of the buyer and the shop context when making server-side API calls. The token is a signed JWT that contains claims such as the customer ID, shop domain, and expiration.\n\nThe `sub` claim in the decoded token is present only when the buyer is logged in and the app has permission to read customer accounts. Absent for anonymous buyers.", + "description": "Authenticates requests between your extension and your app backend. Use session tokens to verify the identity of the buyer and the shop context when making server-side API calls. The token is a signed JWT that contains claims such as the customer ID, shop domain, and expiration.", "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -3860,27 +4168,25 @@ "members": [] } }, - "ShippingAddress": { - "src/surfaces/checkout/api/shared.ts": { - "filePath": "src/surfaces/checkout/api/shared.ts", - "name": "ShippingAddress", - "description": "", - "isPublicDocs": true, + "Shop": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "Shop", + "description": "Metadata about the merchant's store, including its name, storefront URL, `.myshopify.com` subdomain, and a globally-unique ID.", "members": [ { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "address1", + "name": "id", "value": "string", - "description": "The first line of the street address, including the street number and name. The value is `undefined` if the buyer hasn't entered an address yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, + "description": "A globally-unique identifier for the shop in the format `gid://shopify/Shop/`.", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'151 O'Connor Street'", + "code": "'gid://shopify/Shop/123'", "title": "Example" } ] @@ -3888,119 +4194,112 @@ ] }, { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "address2", + "name": "myshopifyDomain", "value": "string", - "description": "The second line of the buyer's address, such as apartment number, suite, or unit. The value is `undefined` if the buyer didn't provide a second address line.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'Ground floor'", - "title": "Example" - } - ] - } - ] + "description": "The shop's unique `.myshopify.com` subdomain, such as `'example.myshopify.com'`. This domain is permanent and doesn't change even if the merchant adds a custom domain." }, { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "city", + "name": "name", "value": "string", - "description": "The city, town, or village of the address. The value is `undefined` if the buyer hasn't entered a city yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'Ottawa'", - "title": "Example" - } - ] - } - ] + "description": "The display name of the shop as configured by the merchant in Shopify admin." }, { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "company", + "name": "storefrontUrl", "value": "string", - "description": "The buyer's company name. The value is `undefined` if the buyer didn't enter a company or the store doesn't collect company names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'Shopify'", - "title": "Example" - } - ] - } - ] + "description": "The primary storefront URL for the shop, such as `'https://example.myshopify.com'`. Use this to build links back to the merchant's online store.", + "isOptional": true + } + ], + "value": "export interface Shop {\n /**\n * A globally-unique identifier for the shop in the format `gid://shopify/Shop/`.\n *\n * @example 'gid://shopify/Shop/123'\n */\n id: string;\n /**\n * The display name of the shop as configured by the merchant in Shopify admin.\n */\n name: string;\n /**\n * The primary storefront URL for the shop, such as `'https://example.myshopify.com'`. Use this to build links back to the merchant's online store.\n */\n storefrontUrl?: string;\n /**\n * The shop's unique `.myshopify.com` subdomain, such as `'example.myshopify.com'`. This domain is permanent and doesn't change even if the merchant adds a custom domain.\n */\n myshopifyDomain: string;\n}" + } + }, + "Storage": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "Storage", + "description": "Key-value storage for a specific extension. Use storage to save preferences or cached data that should survive page reloads without requiring a backend call. Stored data is only available to this specific extension. The storage backend is implemented with `localStorage` and data persistence isn't guaranteed.", + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "MethodSignature", + "name": "delete", + "value": "(key: string) => Promise", + "description": "Deletes a previously stored value by key." }, { - "filePath": "src/surfaces/checkout/api/shared.ts", - "syntaxKind": "PropertySignature", - "name": "countryCode", - "value": "CountryCode", - "description": "The two-letter country code in [ISO 3166 Alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format. The value is `undefined` if the buyer hasn't selected a country yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'CA' for Canada.", - "title": "Example" - } - ] - } - ] + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "MethodSignature", + "name": "read", + "value": "(key: string) => Promise", + "description": "Read and return a stored value by key.\n\nThe stored data is deserialized from JSON and returned as its original type.\n\nReturns `null` if no stored data exists." }, { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "MethodSignature", + "name": "write", + "value": "(key: string, data: any) => Promise", + "description": "Write stored data for this key.\n\nThe data must be serializable to JSON." + } + ], + "value": "export interface Storage {\n /**\n * Read and return a stored value by key.\n *\n * The stored data is deserialized from JSON and returned as\n * its original type.\n *\n * Returns `null` if no stored data exists.\n */\n read(key: string): Promise;\n\n /**\n * Write stored data for this key.\n *\n * The data must be serializable to JSON.\n */\n write(key: string, data: any): Promise;\n\n /**\n * Deletes a previously stored value by key.\n */\n delete(key: string): Promise;\n}" + } + }, + "BaseMerchandise": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "BaseMerchandise", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "firstName", + "name": "id", "value": "string", - "description": "The buyer's first name. Use this alongside `lastName` when you need to display or process name parts separately. The value is `undefined` if the buyer didn't provide a first name or the store doesn't collect split names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, + "description": "A globally unique identifier for the merchandise.", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'John'", + "code": "'gid://shopify/ProductVariant/123'", "title": "Example" } ] } ] - }, + } + ], + "value": "export interface BaseMerchandise {\n /**\n * A globally unique identifier for the merchandise.\n *\n * @example 'gid://shopify/ProductVariant/123'\n */\n id: string;\n}" + } + }, + "ProductVariant": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "ProductVariant", + "description": "", + "isPublicDocs": true, + "members": [ { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "lastName", + "name": "id", "value": "string", - "description": "The buyer's last name. Use this alongside `firstName` when you need to display or process name parts separately. The value is `undefined` if the buyer didn't provide a last name or the store doesn't collect split names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, + "description": "A globally-unique identifier for the product variant in the format `gid://shopify/ProductVariant/`.", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'Doe'", + "code": "'gid://shopify/ProductVariant/123'", "title": "Example" } ] @@ -4008,267 +4307,461 @@ ] }, { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "name", - "value": "string", - "description": "The buyer's full name, typically a combination of first and last name. The value is `undefined` if the buyer didn't provide a name.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'John Doe'", - "title": "Example" - } - ] - } - ] + "name": "image", + "value": "ImageDetails", + "description": "The image associated with the product variant. Falls back to the product image if the variant doesn't have its own. The value is `undefined` if neither the variant nor the product has an image.", + "isOptional": true }, { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "oneTimeUse", + "name": "product", + "value": "Product", + "description": "The parent product that this variant belongs to. Use this to access the product's ID, vendor, and type." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "requiresShipping", "value": "boolean", - "description": "Controls whether the address is saved to the buyer's account. When `true`, the address won't be saved and is only used for this checkout. When `false` or `undefined`, the address might be saved to the buyer's account for future use.", + "description": "Whether this product variant requires physical shipping. When `true`, the buyer must provide a shipping address. Returns `false` for digital products, gift cards, and services." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "selectedOptions", + "value": "SelectedOption[]", + "description": "The product options applied to this variant, such as size, color, or material. Each entry contains the option name and the selected value." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "sellingPlan", + "value": "SellingPlan", + "description": "The [selling plan](/docs/apps/build/purchase-options/subscriptions) associated with this variant, such as a subscription or pre-order plan. The value is `undefined` if the item isn't being purchased through a selling plan.", "isOptional": true }, { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "phone", + "name": "sku", "value": "string", - "description": "The phone number associated with the address, typically in international format. The value is `undefined` if the buyer didn't provide a phone number or the store doesn't collect phone numbers.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'+1 613 111 2222'", - "title": "Example" - } - ] - } - ] + "description": "The stock keeping unit (SKU) assigned to this variant by the merchant, used for inventory tracking. The value is `undefined` if no SKU has been set.", + "isOptional": true }, { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "provinceCode", + "name": "subtitle", "value": "string", - "description": "The province, state, prefecture, or region code of the address. The format varies by country. The value is `undefined` if the buyer hasn't selected one yet or the country doesn't have provinces.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'ON' for Ontario.", - "title": "Example" - } - ] - } - ] + "description": "A secondary description for the variant that provides additional context, such as a color or size combination. The value is `undefined` if no subtitle is available.", + "isOptional": true }, { - "filePath": "src/surfaces/checkout/api/shared.ts", + "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "zip", + "name": "title", "value": "string", - "description": "The postal code or ZIP code of the address, used for mail sorting and delivery routing. The value is `undefined` if the buyer hasn't entered one yet or the country doesn't use postal codes.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true, - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'K2P 2L8'", - "title": "Example" - } - ] - } - ] + "description": "The display title of the product variant, such as \"Small\" or \"Red / Large\". This is the variant-specific label, not the parent product title." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'variant'", + "description": "Identifies the merchandise as a product variant. This is currently the only merchandise type in checkout." } ], - "value": "export interface ShippingAddress extends MailingAddress {\n /**\n * Controls whether the address is saved to the buyer's account. When\n * `true`, the address won't be saved and is only used for this checkout.\n * When `false` or `undefined`, the address might be saved to the buyer's\n * account for future use.\n */\n oneTimeUse?: boolean;\n}" + "value": "export interface ProductVariant extends BaseMerchandise {\n /**\n * Identifies the merchandise as a product variant. This is currently the only merchandise type in checkout.\n */\n type: 'variant';\n\n /**\n * A globally-unique identifier for the product variant in the format `gid://shopify/ProductVariant/`.\n *\n * @example 'gid://shopify/ProductVariant/123'\n */\n id: string;\n\n /**\n * The display title of the product variant, such as \"Small\" or \"Red / Large\". This is the variant-specific label, not the parent product title.\n */\n title: string;\n\n /**\n * A secondary description for the variant that provides additional context, such as a color or size combination. The value is `undefined` if no subtitle is available.\n */\n subtitle?: string;\n\n /**\n * The image associated with the product variant. Falls back to the product image if the variant doesn't have its own. The value is `undefined` if neither the variant nor the product has an image.\n */\n image?: ImageDetails;\n\n /**\n * The product options applied to this variant, such as size, color, or material. Each entry contains the option name and the selected value.\n */\n selectedOptions: SelectedOption[];\n\n /**\n * The parent product that this variant belongs to. Use this to access the product's ID, vendor, and type.\n */\n product: Product;\n\n /**\n * Whether this product variant requires physical shipping. When `true`, the buyer must provide a shipping address. Returns `false` for digital products, gift cards, and services.\n */\n requiresShipping: boolean;\n\n /**\n * The [selling plan](/docs/apps/build/purchase-options/subscriptions) associated with this variant, such as a subscription or pre-order plan. The value is `undefined` if the item isn't being purchased through a selling plan.\n */\n sellingPlan?: SellingPlan;\n\n /**\n * The stock keeping unit (SKU) assigned to this variant by the merchant, used for inventory tracking. The value is `undefined` if no SKU has been set.\n */\n sku?: string;\n}" } }, - "Shop": { + "CartDiscountAllocationBase": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "Shop", - "description": "Metadata about the merchant's store, including its name, storefront URL, `.myshopify.com` subdomain, and a globally-unique ID.", + "name": "CartDiscountAllocationBase", + "description": "", + "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "id", + "name": "discountedAmount", + "value": "Money", + "description": "The monetary value that was deducted from the line item or order total by this discount allocation." + } + ], + "value": "export interface CartDiscountAllocationBase {\n /**\n * The monetary value that was deducted from the line item or order total by this discount allocation.\n */\n discountedAmount: Money;\n}" + } + }, + "DeliveryOptionBase": { + "src/surfaces/checkout/api/standard/standard.ts": { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "name": "DeliveryOptionBase", + "description": "Represents a base interface for a single delivery option.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "code", "value": "string", - "description": "A globally-unique identifier for the shop in the format `gid://shopify/Shop/`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'gid://shopify/Shop/123'", - "title": "Example" - } - ] - } - ] + "description": "The carrier service code or rate identifier for this delivery option." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "myshopifyDomain", + "name": "description", "value": "string", - "description": "The shop's unique `.myshopify.com` subdomain, such as `'example.myshopify.com'`. This domain is permanent and doesn't change even if the merchant adds a custom domain." + "description": "Additional details about the delivery option provided by the carrier or merchant, such as estimated delivery windows or service level notes.", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "name", + "name": "handle", "value": "string", - "description": "The display name of the shop as configured by the merchant in Shopify admin." + "description": "The unique identifier of the delivery option. Use this to match against `DeliveryOptionReference.handle` or `DeliverySelectionGroup` entries." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", - "name": "storefrontUrl", + "name": "metafields", + "value": "Metafield[]", + "description": "Custom [metafields](/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a [Shopify Function](/docs/apps/build/functions). Use these to display additional information about the option." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "title", "value": "string", - "description": "The primary storefront URL for the shop, such as `'https://example.myshopify.com'`. Use this to build links back to the merchant's online store.", + "description": "The merchant-facing or carrier-provided display name for the delivery option, such as \"Standard Shipping\" or \"Express\".", "isOptional": true } ], - "value": "export interface Shop {\n /**\n * A globally-unique identifier for the shop in the format `gid://shopify/Shop/`.\n *\n * @example 'gid://shopify/Shop/123'\n */\n id: string;\n /**\n * The display name of the shop as configured by the merchant in Shopify admin.\n */\n name: string;\n /**\n * The primary storefront URL for the shop, such as `'https://example.myshopify.com'`. Use this to build links back to the merchant's online store.\n */\n storefrontUrl?: string;\n /**\n * The shop's unique `.myshopify.com` subdomain, such as `'example.myshopify.com'`. This domain is permanent and doesn't change even if the merchant adds a custom domain.\n */\n myshopifyDomain: string;\n}" + "value": "export interface DeliveryOptionBase {\n /**\n * The unique identifier of the delivery option. Use this to match against `DeliveryOptionReference.handle` or `DeliverySelectionGroup` entries.\n */\n handle: string;\n\n /**\n * The merchant-facing or carrier-provided display name for the delivery\n * option, such as \"Standard Shipping\" or \"Express\".\n */\n title?: string;\n\n /**\n * Additional details about the delivery option provided by the carrier\n * or merchant, such as estimated delivery windows or service level notes.\n */\n description?: string;\n\n /**\n * The carrier service code or rate identifier for this delivery option.\n */\n code: string;\n\n /**\n * Custom [metafields](/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a [Shopify Function](/docs/apps/build/functions). Use these to display additional information about the option.\n */\n metafields: Metafield[];\n}" } }, - "Storage": { + "DeliveryGroupDetails": { "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "Storage", - "description": "Key-value storage for a specific extension. Use storage to save preferences or cached data that should survive page reloads without requiring a backend call. Stored data is only available to this specific extension. The storage backend is implemented with `localStorage` and data persistence isn't guaranteed.", + "name": "DeliveryGroupDetails", + "description": "Represents a DeliveryGroup with expanded reference fields and full details.", + "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "MethodSignature", - "name": "delete", - "value": "(key: string) => Promise", - "description": "Deletes a previously stored value by key." + "syntaxKind": "PropertySignature", + "name": "deliveryOptions", + "value": "DeliveryOption[]", + "description": "The delivery options available for this group, including shipping, pickup point, and pickup location options. The buyer selects one of these to determine how their items are delivered." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "MethodSignature", - "name": "read", - "value": "(key: string) => Promise", - "description": "Read and return a stored value by key.\n\nThe stored data is deserialized from JSON and returned as its original type.\n\nReturns the stored value for the given key, or `null` when no value exists. Doesn't throw on a missing key." + "syntaxKind": "PropertySignature", + "name": "groupType", + "value": "DeliveryGroupType", + "description": "Whether this group contains items for a one-time purchase or a subscription. Subscription delivery groups might have different shipping options. See `DeliveryGroupType` for possible values." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "MethodSignature", - "name": "write", - "value": "(key: string, data: any) => Promise", - "description": "Write stored data for this key.\n\nThe data must be serializable to JSON." + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the delivery group. The value is `undefined` if the underlying delivery line doesn't have an ID assigned.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "isDeliveryRequired", + "value": "boolean", + "description": "Whether physical delivery is required for the items in this group. Digital-only groups don't require delivery." + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "selectedDeliveryOption", + "value": "DeliveryOption", + "description": "The full delivery option the buyer has selected for this group, with all cost and carrier details included. The value is `undefined` if the buyer hasn't selected an option yet. Unlike `DeliveryGroup.selectedDeliveryOption`, which is a reference, this contains the complete `DeliveryOption` object.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "syntaxKind": "PropertySignature", + "name": "targetedCartLines", + "value": "CartLine[]", + "description": "The full cart line objects associated with this delivery group, with all merchandise and cost details included. Unlike `DeliveryGroup.targetedCartLines`, which contains references, this contains the complete `CartLine` objects." } ], - "value": "export interface Storage {\n /**\n * Read and return a stored value by key.\n *\n * The stored data is deserialized from JSON and returned as\n * its original type.\n *\n * Returns the stored value for the given key, or `null` when no value\n * exists. Doesn't throw on a missing key.\n */\n read(key: string): Promise;\n\n /**\n * Write stored data for this key.\n *\n * The data must be serializable to JSON.\n */\n write(key: string, data: any): Promise;\n\n /**\n * Deletes a previously stored value by key.\n */\n delete(key: string): Promise;\n}" + "value": "export interface DeliveryGroupDetails extends DeliveryGroup {\n /**\n * The full delivery option the buyer has selected for this group, with all cost and carrier details included. The value is `undefined` if the buyer hasn't selected an option yet. Unlike `DeliveryGroup.selectedDeliveryOption`, which is a reference, this contains the complete `DeliveryOption` object.\n */\n selectedDeliveryOption?: DeliveryOption;\n\n /**\n * The full cart line objects associated with this delivery group, with all merchandise and cost details included. Unlike `DeliveryGroup.targetedCartLines`, which contains references, this contains the complete `CartLine` objects.\n */\n targetedCartLines: CartLine[];\n}" } }, - "Version": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "RedeemableChangeResult": { + "src/surfaces/checkout/api/redeemable/redeemable.ts": { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "Version", - "value": "string", + "name": "RedeemableChangeResult", + "value": "RedeemableChangeResultSuccess | RedeemableChangeResultError", "description": "", "isPublicDocs": true } }, - "CheckoutApi": { - "src/surfaces/checkout/api/checkout/checkout.ts": { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "name": "CheckoutApi", + "RedeemableChangeResultSuccess": { + "src/surfaces/checkout/api/redeemable/redeemable.ts": { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "name": "RedeemableChangeResultSuccess", "description": "", "isPublicDocs": true, "members": [ { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "MethodSignature", - "name": "applyAttributeChange", - "value": "(change: AttributeChange) => Promise", - "description": "Updates or removes an attribute on the cart and checkout. On success, the [`attributes`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/attributes#properties-propertydetail-attributes) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.", - "deprecationMessage": "Use cart metafields instead." + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'success'", + "description": "Indicates that the redeemable change was applied successfully." + } + ], + "value": "export interface RedeemableChangeResultSuccess {\n /**\n * Indicates that the redeemable change was applied successfully.\n */\n type: 'success';\n}" + } + }, + "RedeemableChangeResultError": { + "src/surfaces/checkout/api/redeemable/redeemable.ts": { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "name": "RedeemableChangeResultError", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "message", + "value": "string", + "description": "A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer." }, { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "MethodSignature", - "name": "applyCartLinesChange", - "value": "(change: CartLineChange) => Promise", - "description": "Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-lines#properties-propertydetail-lines) property updates with the new state.\n\nAccepts a single change per call. To make multiple changes, call this method separately for each one.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'error'", + "description": "Indicates that the redeemable change was not applied successfully." + } + ], + "value": "export interface RedeemableChangeResultError {\n /**\n * Indicates that the redeemable change was not applied successfully.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It is **not** localized, and therefore should not be presented directly\n * to the buyer.\n */\n message: string;\n}" + } + }, + "RedeemableAttribute": { + "src/surfaces/checkout/api/redeemable/redeemable.ts": { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "name": "RedeemableAttribute", + "description": "A key-value pair that represents an attribute of a redeemable payment method.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "key", + "value": "string", + "description": "" }, { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "MethodSignature", - "name": "applyDiscountCodeChange", - "value": "(change: DiscountCodeChange) => Promise", - "description": "Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/discounts#properties-propertydetail-discountcodes) property updates with the new state.\n\n> Caution: > See [security considerations](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves discount codes through a network call.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "" + } + ], + "value": "export interface RedeemableAttribute {\n key: string;\n value: string;\n}" + } + }, + "RedeemableChange": { + "src/surfaces/checkout/api/redeemable/redeemable.ts": { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "RedeemableChange", + "value": "RedeemableAddChange", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "attributes", + "value": "RedeemableAttribute[]", + "description": "The redeemable attributes." }, { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "MethodSignature", - "name": "applyGiftCardChange", - "value": "(change: GiftCardChange) => Promise", - "description": "Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/gift-cards#properties-propertydetail-appliedgiftcards) property updates with the new state.\n\nUnlike other write operations, gift card changes aren't gated by a cart instruction flag.\n\n> Caution: > See [security considerations](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves gift card codes through a network call.\n\n> Note: This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "identifier", + "value": "string", + "description": "The identifier used to represent the redeemable (e.g. the gift card code)." }, { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "MethodSignature", - "name": "applyMetafieldChange", - "value": "(change: MetafieldChange) => Promise", - "description": "Creates, updates, or removes a cart metafield on the checkout. On success, the [`metafields`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/metafields#properties-propertydetail-metafields) property updates to reflect the change.\n\nCart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](https://shopify.dev/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'redeemableAddChange'", + "description": "The type of the `RedeemableChange` API." + } + ] + } + }, + "RedeemableAddChange": { + "src/surfaces/checkout/api/redeemable/redeemable.ts": { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "name": "RedeemableAddChange", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "attributes", + "value": "RedeemableAttribute[]", + "description": "The redeemable attributes." }, { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "identifier", + "value": "string", + "description": "The identifier used to represent the redeemable (e.g. the gift card code)." + }, + { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'redeemableAddChange'", + "description": "The type of the `RedeemableChange` API." + } + ], + "value": "export interface RedeemableAddChange {\n /**\n * The type of the `RedeemableChange` API.\n */\n type: 'redeemableAddChange';\n\n /**\n * The redeemable attributes.\n */\n attributes: RedeemableAttribute[];\n\n /**\n * The identifier used to represent the redeemable (e.g. the gift card code).\n */\n identifier: string;\n}" + } + }, + "RedeemableApi": { + "src/surfaces/checkout/api/redeemable/redeemable.ts": { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", + "name": "RedeemableApi", + "description": "", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", "syntaxKind": "MethodSignature", - "name": "applyNoteChange", - "value": "(change: NoteChange) => Promise", - "description": "Sets or removes the buyer's note on the checkout. On success, the [`note`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/note#properties-propertydetail-note) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "name": "applyRedeemableChange", + "value": "(change: RedeemableAddChange) => Promise", + "description": "Applies a redeemable change to add a redeemable payment method." + } + ], + "value": "export interface RedeemableApi {\n /**\n * Applies a redeemable change to add a redeemable payment method.\n */\n applyRedeemableChange(\n change: RedeemableChange,\n ): Promise;\n}" + } + }, + "NoteRemoveChange": { + "src/surfaces/checkout/api/checkout/checkout.ts": { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "name": "NoteRemoveChange", + "description": "Clears the buyer's note from the checkout. Pass this to `applyNoteChange()` to remove any existing note.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'removeNote'", + "description": "Identifies this as a note removal. Set this when creating a change to clear the buyer's note." + } + ], + "value": "export interface NoteRemoveChange {\n /**\n * Identifies this as a note removal. Set this when creating a change to clear the buyer's note.\n */\n type: 'removeNote';\n}" + } + }, + "NoteUpdateChange": { + "src/surfaces/checkout/api/checkout/checkout.ts": { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "name": "NoteUpdateChange", + "description": "Sets or replaces the buyer's note on the checkout. Pass this to `applyNoteChange()` to update the note.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "PropertySignature", + "name": "note", + "value": "string", + "description": "The text to set as the buyer's note. This replaces any existing note entirely rather than appending to it." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "MethodSignature", - "name": "applyShippingAddressChange", - "value": "(change: ShippingAddressUpdateChange) => Promise", - "description": "Updates the buyer's shipping address on the checkout. The provided fields are merged into the existing address without prompting the buyer. On success, the `shippingAddress` property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", - "isOptional": true + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'updateNote'", + "description": "Identifies this as a note update. Set this when creating a change to set or replace the buyer's note." + } + ], + "value": "export interface NoteUpdateChange {\n /**\n * Identifies this as a note update. Set this when creating a change to set or replace the buyer's note.\n */\n type: 'updateNote';\n /**\n * The text to set as the buyer's note. This replaces any existing note entirely rather than appending to it.\n */\n note: string;\n}" + } + }, + "NoteChange": { + "src/surfaces/checkout/api/checkout/checkout.ts": { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "NoteChange", + "value": "NoteRemoveChange | NoteUpdateChange", + "description": "The input for `applyNoteChange()`. Pass either a `NoteUpdateChange` (with `type: 'updateNote'`) to set the note or a `NoteRemoveChange` (with `type: 'removeNote'`) to clear it.", + "isPublicDocs": true + } + }, + "NoteChangeResultSuccess": { + "src/surfaces/checkout/api/checkout/checkout.ts": { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "name": "NoteChangeResultSuccess", + "description": "The result of a successful note change. The `type` property is `'success'`.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'success'", + "description": "Indicates that the note change was applied successfully." + } + ], + "value": "export interface NoteChangeResultSuccess {\n /**\n * Indicates that the note change was applied successfully.\n */\n type: 'success';\n}" + } + }, + "NoteChangeResultError": { + "src/surfaces/checkout/api/checkout/checkout.ts": { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "name": "NoteChangeResultError", + "description": "The result of a failed note change. Check the `message` property for details about what went wrong.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "PropertySignature", + "name": "message", + "value": "string", + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "PropertySignature", - "name": "experimentalIsShopAppStyle", - "value": "boolean", - "description": "", - "isOptional": true, - "isPrivate": true + "name": "type", + "value": "'error'", + "description": "Indicates that the note change couldn't be applied. Check the `message` property for details." } ], - "value": "export interface CheckoutApi {\n /**\n * Updates or removes an attribute on the cart and checkout. On success, the\n * [`attributes`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/attributes#properties-propertydetail-attributes) property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n *\n * @deprecated Use cart metafields instead.\n */\n applyAttributeChange(change: AttributeChange): Promise;\n\n /**\n * Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-lines#properties-propertydetail-lines) property updates with the new state.\n *\n * Accepts a single change per call. To make multiple changes, call this\n * method separately for each one.\n *\n * > Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyCartLinesChange(change: CartLineChange): Promise;\n\n /**\n * Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/discounts#properties-propertydetail-discountcodes) property updates with the new state.\n *\n * > Caution:\n * > See [security considerations](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves discount codes through a network call.\n *\n * > Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyDiscountCodeChange(\n change: DiscountCodeChange,\n ): Promise;\n\n /**\n * Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/gift-cards#properties-propertydetail-appliedgiftcards) property updates with the new state.\n *\n * Unlike other write operations, gift card changes aren't gated by a cart\n * instruction flag.\n *\n * > Caution:\n * > See [security considerations](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves gift card codes through a network call.\n *\n * > Note: This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyGiftCardChange(change: GiftCardChange): Promise;\n\n /**\n * Creates, updates, or removes a cart metafield on the checkout. On success, the\n * [`metafields`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/metafields#properties-propertydetail-metafields) property updates to reflect the change.\n *\n * Cart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](https://shopify.dev/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled.\n *\n * > Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyMetafieldChange(change: MetafieldChange): Promise;\n\n /**\n * Sets or removes the buyer's note on the checkout. On success, the\n * [`note`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/note#properties-propertydetail-note)\n * property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyNoteChange(change: NoteChange): Promise;\n\n /**\n * @private\n */\n experimentalIsShopAppStyle?: boolean;\n\n /**\n * Updates the buyer's shipping address on the checkout. The provided fields\n * are merged into the existing address without prompting the buyer. On success,\n * the `shippingAddress` property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).\n */\n applyShippingAddressChange?(\n change: ShippingAddressChange,\n ): Promise;\n}" + "value": "export interface NoteChangeResultError {\n /**\n * Indicates that the note change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" } }, - "AttributeChange": { + "NoteChangeResult": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "AttributeChange", - "value": "AttributeUpdateChange | AttributeRemoveChange", - "description": "The input for `applyAttributeChange()`. Pass either an `AttributeUpdateChange` (with `type: 'updateAttribute'`) to set the attribute or an `AttributeRemoveChange` (with `type: 'removeAttribute'`) to delete it.", + "name": "NoteChangeResult", + "value": "NoteChangeResultSuccess | NoteChangeResultError", + "description": "The result of calling `applyNoteChange()`. Use the `type` property to determine whether the change succeeded or failed.", "isPublicDocs": true } }, @@ -4329,13 +4822,13 @@ "value": "export interface AttributeRemoveChange {\n /**\n * Identifies this as an attribute removal. Set this when creating a change to delete an attribute by key.\n */\n type: 'removeAttribute';\n\n /**\n * The key of the attribute to remove.\n */\n key: string;\n}" } }, - "AttributeChangeResult": { + "AttributeChange": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "AttributeChangeResult", - "value": "AttributeChangeResultSuccess | AttributeChangeResultError", - "description": "The result of calling `applyAttributeChange()`. Use the `type` property to determine whether the change succeeded or failed.", + "name": "AttributeChange", + "value": "AttributeUpdateChange | AttributeRemoveChange", + "description": "The input for `applyAttributeChange()`. Pass either an `AttributeUpdateChange` (with `type: 'updateAttribute'`) to set the attribute or an `AttributeRemoveChange` (with `type: 'removeAttribute'`) to delete it.", "isPublicDocs": true } }, @@ -4382,6 +4875,69 @@ "value": "export interface AttributeChangeResultError {\n /**\n * Indicates that the attribute change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" } }, + "AttributeChangeResult": { + "src/surfaces/checkout/api/checkout/checkout.ts": { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "AttributeChangeResult", + "value": "AttributeChangeResultSuccess | AttributeChangeResultError", + "description": "The result of calling `applyAttributeChange()`. Use the `type` property to determine whether the change succeeded or failed.", + "isPublicDocs": true + } + }, + "CartLineChangeResultSuccess": { + "src/surfaces/checkout/api/checkout/checkout.ts": { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "name": "CartLineChangeResultSuccess", + "description": "The result of a successful cart line change. The `type` property is `'success'`.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'success'", + "description": "Indicates that the cart line change was applied successfully." + } + ], + "value": "export interface CartLineChangeResultSuccess {\n /**\n * Indicates that the cart line change was applied successfully.\n */\n type: 'success';\n}" + } + }, + "CartLineChangeResultError": { + "src/surfaces/checkout/api/checkout/checkout.ts": { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "name": "CartLineChangeResultError", + "description": "The result of a failed cart line change. Check the `message` property for details about what went wrong.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "PropertySignature", + "name": "message", + "value": "string", + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." + }, + { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'error'", + "description": "Indicates that the line item wasn't changed successfully. Refer to the `message` property for details about the error." + } + ], + "value": "export interface CartLineChangeResultError {\n /**\n * Indicates that the line item wasn't changed successfully. Refer to the `message` property for details about the error.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" + } + }, + "CartLineChangeResult": { + "src/surfaces/checkout/api/checkout/checkout.ts": { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CartLineChangeResult", + "value": "CartLineChangeResultSuccess | CartLineChangeResultError", + "description": "The result of calling `applyCartLinesChange()`. Use the `type` property to determine whether the change succeeded or failed.", + "isPublicDocs": true + } + }, "CartLineChange": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", @@ -4446,7 +5002,7 @@ "syntaxKind": "PropertySignature", "name": "sellingPlanId", "value": "string", - "description": "The identifier of the [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) to associate with this line item, such as a subscription or pre-order plan.", + "description": "The identifier of the [selling plan](/docs/apps/build/purchase-options/subscriptions) to associate with this line item, such as a subscription or pre-order plan.", "isOptional": true }, { @@ -4457,7 +5013,7 @@ "description": "Identifies this as a line item addition. Set this when creating a change to add a new product to the cart." } ], - "value": "export interface CartLineAddChange {\n /**\n * Identifies this as a line item addition. Set this when creating a change to add a new product to the cart.\n */\n type: 'addCartLine';\n\n /**\n * The globally-unique identifier of the product variant to add.\n * @example 'gid://shopify/ProductVariant/123'\n */\n merchandiseId: string;\n\n /**\n * The number of items to add. Must be a positive integer.\n */\n quantity: number;\n\n /**\n * Custom key-value attributes to attach to the new line item.\n */\n attributes?: Attribute[];\n\n /**\n * The identifier of the [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) to associate with this line item, such as a subscription or pre-order plan.\n */\n sellingPlanId?: SellingPlan['id'];\n\n /**\n * The parent cart line to associate the new item with, identified by either `lineId` or `merchandiseId`. Use this when adding child items to a bundle.\n */\n parent?: {lineId: string} | {merchandiseId: string};\n}" + "value": "export interface CartLineAddChange {\n /**\n * Identifies this as a line item addition. Set this when creating a change to add a new product to the cart.\n */\n type: 'addCartLine';\n\n /**\n * The globally-unique identifier of the product variant to add.\n * @example 'gid://shopify/ProductVariant/123'\n */\n merchandiseId: string;\n\n /**\n * The number of items to add. Must be a positive integer.\n */\n quantity: number;\n\n /**\n * Custom key-value attributes to attach to the new line item.\n */\n attributes?: Attribute[];\n\n /**\n * The identifier of the [selling plan](/docs/apps/build/purchase-options/subscriptions) to associate with this line item, such as a subscription or pre-order plan.\n */\n sellingPlanId?: SellingPlan['id'];\n\n /**\n * The parent cart line to associate the new item with, identified by either `lineId` or `merchandiseId`. Use this when adding child items to a bundle.\n */\n parent?: {lineId: string} | {merchandiseId: string};\n}" } }, "CartLineRemoveChange": { @@ -4579,7 +5135,7 @@ "syntaxKind": "PropertySignature", "name": "sellingPlanId", "value": "SellingPlan['id'] | null", - "description": "The [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) to associate with this line item. Pass `null` to remove the item from its current selling plan.", + "description": "The [selling plan](/docs/apps/build/purchase-options/subscriptions) to associate with this line item. Pass `null` to remove the item from its current selling plan.", "isOptional": true }, { @@ -4590,60 +5146,7 @@ "description": "Identifies this as a line item update. Set this when creating a change to modify a line item's quantity, variant, or attributes." } ], - "value": "export interface CartLineUpdateChange {\n /**\n * Identifies this as a line item update. Set this when creating a change to modify a line item's quantity, variant, or attributes.\n */\n type: 'updateCartLine';\n\n /**\n * The unique identifier of the cart line to update. Look up the current ID from `lines` before calling, because cart line IDs aren't stable.\n * @example 'gid://shopify/CartLine/123'\n */\n id: string;\n\n /**\n * The new product variant to swap in for this line item. Only provide this if you want to change the variant.\n * @example 'gid://shopify/ProductVariant/123'\n */\n\n merchandiseId?: string;\n /**\n * The new quantity for this line item. Only provide this if you want to change the quantity.\n */\n quantity?: number;\n\n /**\n * The new custom key-value attributes for this line item. Replaces all existing attributes when provided.\n */\n attributes?: Attribute[];\n\n /**\n * The [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) to associate with this line item. Pass `null` to remove the item from its current selling plan.\n */\n sellingPlanId?: SellingPlan['id'] | null;\n\n /**\n * The parent cart line to associate this item with. Use this when updating the parent relationship for bundled items.\n */\n parent?: {lineId: string} | {merchandiseId: string};\n}" - } - }, - "CartLineChangeResult": { - "src/surfaces/checkout/api/checkout/checkout.ts": { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CartLineChangeResult", - "value": "CartLineChangeResultSuccess | CartLineChangeResultError", - "description": "The result of calling `applyCartLinesChange()`. Use the `type` property to determine whether the change succeeded or failed.", - "isPublicDocs": true - } - }, - "CartLineChangeResultSuccess": { - "src/surfaces/checkout/api/checkout/checkout.ts": { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "name": "CartLineChangeResultSuccess", - "description": "The result of a successful cart line change. The `type` property is `'success'`.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates that the cart line change was applied successfully." - } - ], - "value": "export interface CartLineChangeResultSuccess {\n /**\n * Indicates that the cart line change was applied successfully.\n */\n type: 'success';\n}" - } - }, - "CartLineChangeResultError": { - "src/surfaces/checkout/api/checkout/checkout.ts": { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "name": "CartLineChangeResultError", - "description": "The result of a failed cart line change. Check the `message` property for details about what went wrong.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer.\n\nRender your own localized error text rather than displaying this message to the buyer." - }, - { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates that the line item wasn't changed successfully. Refer to the `message` property for details about the error." - } - ], - "value": "export interface CartLineChangeResultError {\n /**\n * Indicates that the line item wasn't changed successfully. Refer to the `message` property for details about the error.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n *\n * Render your own localized error text rather than displaying this message\n * to the buyer.\n */\n message: string;\n}" + "value": "export interface CartLineUpdateChange {\n /**\n * Identifies this as a line item update. Set this when creating a change to modify a line item's quantity, variant, or attributes.\n */\n type: 'updateCartLine';\n\n /**\n * The unique identifier of the cart line to update. Look up the current ID from `lines` before calling, because cart line IDs aren't stable.\n * @example 'gid://shopify/CartLine/123'\n */\n id: string;\n\n /**\n * The new product variant to swap in for this line item. Only provide this if you want to change the variant.\n * @example 'gid://shopify/ProductVariant/123'\n */\n\n merchandiseId?: string;\n /**\n * The new quantity for this line item. Only provide this if you want to change the quantity.\n */\n quantity?: number;\n\n /**\n * The new custom key-value attributes for this line item. Replaces all existing attributes when provided.\n */\n attributes?: Attribute[];\n\n /**\n * The [selling plan](/docs/apps/build/purchase-options/subscriptions) to associate with this line item. Pass `null` to remove the item from its current selling plan.\n */\n sellingPlanId?: SellingPlan['id'] | null;\n\n /**\n * The parent cart line to associate this item with. Use this when updating the parent relationship for bundled items.\n */\n parent?: {lineId: string} | {merchandiseId: string};\n}" } }, "DiscountCodeChange": { @@ -4859,7 +5362,7 @@ "syntaxKind": "PropertySignature", "name": "message", "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer.\n\nRender your own localized error text rather than displaying this message to the buyer." + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", @@ -4869,24 +5372,14 @@ "description": "Indicates that the gift card change couldn't be applied. Check the `message` property for details." } ], - "value": "export interface GiftCardChangeResultError {\n /**\n * Indicates that the gift card change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n *\n * Render your own localized error text rather than displaying this message\n * to the buyer.\n */\n message: string;\n}" - } - }, - "MetafieldChange": { - "src/surfaces/checkout/api/checkout/checkout.ts": { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChange", - "value": "MetafieldRemoveCartChange | MetafieldUpdateCartChange", - "description": "The input for `applyMetafieldChange()`. Use the `type` property to specify the operation.\n\n- `MetafieldRemoveCartChange` (`type: 'removeCartMetafield'`): Removes an existing cart [metafield](https://shopify.dev/docs/apps/build/custom-data/metafields).\n- `MetafieldUpdateCartChange` (`type: 'updateCartMetafield'`): Creates or updates a cart metafield.", - "isPublicDocs": true + "value": "export interface GiftCardChangeResultError {\n /**\n * Indicates that the gift card change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" } }, "MetafieldRemoveCartChange": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "name": "MetafieldRemoveCartChange", - "description": "Removes a cart [metafield](https://shopify.dev/docs/apps/build/custom-data/metafields). Pass this to `applyMetafieldChange()` to delete a metafield by key and namespace.", + "description": "Removes a cart [metafield](/docs/apps/build/custom-data/metafields). Pass this to `applyMetafieldChange()` to delete a metafield by key and namespace.", "isPublicDocs": true, "members": [ { @@ -4915,50 +5408,11 @@ "value": "export interface MetafieldRemoveCartChange {\n /**\n * Identifies this as a cart metafield removal. Set this when creating a change to delete an existing metafield by key and namespace.\n */\n type: 'removeCartMetafield';\n\n /**\n * The name of the metafield to remove.\n */\n key: string;\n\n /**\n * The namespace of the metafield to remove.\n */\n namespace?: string;\n}" } }, - "CartMetafield": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "CartMetafield", - "description": "Represents a custom metadata attached to the cart. Unlike `AppMetafield`, cart metafield values are always strings and don't include a `valueType` discriminator.\n\nCart [metafields](https://shopify.dev/docs/apps/build/custom-data/metafields) are set by extensions using `applyMetafieldChange()` and can be copied to order metafields at order creation time.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "The key name of a metafield, such as `'delivery_instructions'` or `'gift_message'`. Together with `namespace`, this uniquely identifies the metafield on the cart." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "The namespace for a metafield, such as `'custom'` or `'my_app'`. Together with `key`, this uniquely identifies the metafield on the cart." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "string", - "description": "The metafield's [type name](https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types), such as `'single_line_text_field'` or `'json'`." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The string value stored in the cart metafield. Unlike `AppMetafield`, cart metafield values are always strings." - } - ], - "value": "export interface CartMetafield {\n /**\n * The key name of a metafield, such as `'delivery_instructions'` or `'gift_message'`. Together with `namespace`, this uniquely identifies the metafield on the cart.\n */\n key: string;\n\n /**\n * The namespace for a metafield, such as `'custom'` or `'my_app'`. Together with `key`, this uniquely identifies the metafield on the cart.\n */\n namespace: string;\n\n /**\n * The string value stored in the cart metafield. Unlike `AppMetafield`, cart metafield values are always strings.\n */\n value: string;\n\n /**\n * The metafield's [type name](https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types), such as `'single_line_text_field'` or `'json'`.\n */\n type: string;\n}" - } - }, "MetafieldUpdateCartChange": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "name": "MetafieldUpdateCartChange", - "description": "Creates or updates a cart [metafield](https://shopify.dev/docs/apps/build/custom-data/metafields). Pass this to `applyMetafieldChange()` to set a metafield value. If a metafield with the provided key and namespace doesn't already exist, then it gets created.", + "description": "Creates or updates a cart [metafield](/docs/apps/build/custom-data/metafields). Pass this to `applyMetafieldChange()` to set a metafield value. If a metafield with the provided key and namespace doesn't already exist, then it gets created.", "isPublicDocs": true, "members": [ { @@ -4976,16 +5430,16 @@ "description": "Identifies this as a cart metafield creation or update. Set this when creating a change to set a metafield value." } ], - "value": "export interface MetafieldUpdateCartChange {\n /**\n * Identifies this as a cart metafield creation or update. Set this when creating a change to set a metafield value.\n */\n type: 'updateCartMetafield';\n\n /**\n * The metafield data to set on the cart. If a metafield with this key and namespace already exists, then its value is replaced.\n */\n metafield: {\n /** The name of the metafield to update. */\n key: string;\n\n /** The namespace of the metafield to update. */\n namespace?: string;\n\n /** The new information to store in the metafield. */\n value: string;\n\n /**\n * The metafield’s information type.\n * See the [metafield types documentation](https://shopify.dev/docs/apps/build/custom-data/metafields/list-of-data-types) for a list of supported types.\n */\n type: string;\n };\n}" + "value": "export interface MetafieldUpdateCartChange {\n /**\n * Identifies this as a cart metafield creation or update. Set this when creating a change to set a metafield value.\n */\n type: 'updateCartMetafield';\n\n /**\n * The metafield data to set on the cart. If a metafield with this key and namespace already exists, then its value is replaced.\n */\n metafield: {\n /** The name of the metafield to update. */\n key: string;\n\n /** The namespace of the metafield to update. */\n namespace?: string;\n\n /** The new information to store in the metafield. */\n value: string;\n\n /**\n * The metafield’s information type.\n * See the [metafield types documentation](/docs/apps/build/custom-data/metafields/list-of-data-types) for a list of supported types.\n */\n type: string;\n };\n}" } }, - "MetafieldChangeResult": { + "MetafieldChange": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "MetafieldChangeResult", - "value": "MetafieldChangeResultSuccess | MetafieldChangeResultError", - "description": "The result of calling `applyMetafieldChange()`. Use the `type` property to determine whether the change succeeded or failed.", + "name": "MetafieldChange", + "value": "MetafieldRemoveCartChange | MetafieldUpdateCartChange", + "description": "The input for `applyMetafieldChange()`. Use the `type` property to specify the operation.\n\n- `MetafieldRemoveCartChange` (`type: 'removeCartMetafield'`): Removes an existing cart [metafield](/docs/apps/build/custom-data/metafields).\n- `MetafieldUpdateCartChange` (`type: 'updateCartMetafield'`): Creates or updates a cart metafield.", "isPublicDocs": true } }, @@ -5019,7 +5473,7 @@ "syntaxKind": "PropertySignature", "name": "message", "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer.\n\nRender your own localized error text rather than displaying this message to the buyer." + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", @@ -5029,173 +5483,119 @@ "description": "Indicates that the metafield change couldn't be applied. Check the `message` property for details." } ], - "value": "export interface MetafieldChangeResultError {\n /**\n * Indicates that the metafield change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n *\n * Render your own localized error text rather than displaying this message\n * to the buyer.\n */\n message: string;\n}" + "value": "export interface MetafieldChangeResultError {\n /**\n * Indicates that the metafield change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" } }, - "NoteChange": { + "MetafieldChangeResult": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "TypeAliasDeclaration", - "name": "NoteChange", - "value": "NoteRemoveChange | NoteUpdateChange", - "description": "The input for `applyNoteChange()`. Pass either a `NoteUpdateChange` (with `type: 'updateNote'`) to set the note or a `NoteRemoveChange` (with `type: 'removeNote'`) to clear it.", + "name": "MetafieldChangeResult", + "value": "MetafieldChangeResultSuccess | MetafieldChangeResultError", + "description": "The result of calling `applyMetafieldChange()`. Use the `type` property to determine whether the change succeeded or failed.", "isPublicDocs": true } }, - "NoteRemoveChange": { + "ShippingAddressUpdateChange": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "name": "NoteRemoveChange", - "description": "Clears the buyer's note from the checkout. Pass this to `applyNoteChange()` to remove any existing note.", + "name": "ShippingAddressUpdateChange", + "description": "Updates the buyer's shipping address on the checkout. Pass this to `applyShippingAddressChange()` to modify specific address fields without replacing the entire address.", "isPublicDocs": true, "members": [ + { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "PropertySignature", + "name": "address", + "value": "Partial", + "description": "Fields to update in the shipping address. You only need to provide values for the fields you want to update. Any fields you don't list keep their current values." + }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'removeNote'", - "description": "Identifies this as a note removal. Set this when creating a change to clear the buyer's note." + "value": "'updateShippingAddress'", + "description": "Identifies this as a shipping address update. This is the only supported change type for `applyShippingAddressChange()`." } ], - "value": "export interface NoteRemoveChange {\n /**\n * Identifies this as a note removal. Set this when creating a change to clear the buyer's note.\n */\n type: 'removeNote';\n}" + "value": "export interface ShippingAddressUpdateChange {\n /**\n * Identifies this as a shipping address update. This is the only supported change type for `applyShippingAddressChange()`.\n */\n type: 'updateShippingAddress';\n\n /**\n * Fields to update in the shipping address. You only need to provide\n * values for the fields you want to update. Any fields you don't list\n * keep their current values.\n */\n address: Partial;\n}" } }, - "NoteUpdateChange": { + "ShippingAddressChange": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "name": "NoteUpdateChange", - "description": "Sets or replaces the buyer's note on the checkout. Pass this to `applyNoteChange()` to update the note.", + "syntaxKind": "TypeAliasDeclaration", + "name": "ShippingAddressChange", + "value": "ShippingAddressUpdateChange", + "description": "The input for `applyShippingAddressChange()`. Currently only supports `ShippingAddressUpdateChange` (with `type: 'updateShippingAddress'`).", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "PropertySignature", - "name": "note", - "value": "string", - "description": "The text to set as the buyer's note. This replaces any existing note entirely rather than appending to it." + "name": "address", + "value": "Partial", + "description": "Fields to update in the shipping address. You only need to provide values for the fields you want to update. Any fields you don't list keep their current values." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "PropertySignature", "name": "type", - "value": "'updateNote'", - "description": "Identifies this as a note update. Set this when creating a change to set or replace the buyer's note." + "value": "'updateShippingAddress'", + "description": "Identifies this as a shipping address update. This is the only supported change type for `applyShippingAddressChange()`." } - ], - "value": "export interface NoteUpdateChange {\n /**\n * Identifies this as a note update. Set this when creating a change to set or replace the buyer's note.\n */\n type: 'updateNote';\n /**\n * The text to set as the buyer's note. This replaces any existing note entirely rather than appending to it.\n */\n note: string;\n}" - } - }, - "NoteChangeResult": { - "src/surfaces/checkout/api/checkout/checkout.ts": { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "NoteChangeResult", - "value": "NoteChangeResultSuccess | NoteChangeResultError", - "description": "The result of calling `applyNoteChange()`. Use the `type` property to determine whether the change succeeded or failed.", - "isPublicDocs": true + ] } }, - "NoteChangeResultSuccess": { + "ShippingAddressChangeResultSuccess": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "name": "NoteChangeResultSuccess", - "description": "The result of a successful note change. The `type` property is `'success'`.", + "name": "ShippingAddressChangeResultSuccess", + "description": "The result of a successful shipping address change. The `type` property is `'success'` and `errors` is `null`.", "isPublicDocs": true, "members": [ + { + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "PropertySignature", + "name": "errors", + "value": "null", + "description": "Always `null` for a successful address change. Present so that you can check `result.errors` without narrowing the union type first." + }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "PropertySignature", "name": "type", "value": "'success'", - "description": "Indicates that the note change was applied successfully." + "description": "Indicates that the shipping address change was applied successfully." } ], - "value": "export interface NoteChangeResultSuccess {\n /**\n * Indicates that the note change was applied successfully.\n */\n type: 'success';\n}" + "value": "export interface ShippingAddressChangeResultSuccess {\n /**\n * Indicates that the shipping address change was applied successfully.\n */\n type: 'success';\n\n /**\n * Always `null` for a successful address change. Present so that you can\n * check `result.errors` without narrowing the union type first.\n */\n errors: null;\n}" } }, - "NoteChangeResultError": { + "ShippingAddressChangeFieldError": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "name": "NoteChangeResultError", - "description": "The result of a failed note change. Check the `message` property for details about what went wrong.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer.\n\nRender your own localized error text rather than displaying this message to the buyer." - }, - { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates that the note change couldn't be applied. Check the `message` property for details." - } - ], - "value": "export interface NoteChangeResultError {\n /**\n * Indicates that the note change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n *\n * Render your own localized error text rather than displaying this message\n * to the buyer.\n */\n message: string;\n}" - } - }, - "ShippingAddressUpdateChange": { - "src/surfaces/checkout/api/checkout/checkout.ts": { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "name": "ShippingAddressUpdateChange", - "description": "Updates the buyer's shipping address on the checkout. Pass this to `applyShippingAddressChange()` to modify specific address fields without replacing the entire address.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "address", - "value": "Partial", - "description": "Fields to update in the shipping address. You only need to provide values for the fields you want to update. Any fields you don't list keep their current values." - }, - { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateShippingAddress'", - "description": "Identifies this as a shipping address update. This is the only supported change type for `applyShippingAddressChange()`." - } - ], - "value": "export interface ShippingAddressUpdateChange {\n /**\n * Identifies this as a shipping address update. This is the only supported change type for `applyShippingAddressChange()`.\n */\n type: 'updateShippingAddress';\n\n /**\n * Fields to update in the shipping address. You only need to provide\n * values for the fields you want to update. Any fields you don't list\n * keep their current values.\n */\n address: Partial;\n}" - } - }, - "ShippingAddressChangeResult": { - "src/surfaces/checkout/api/checkout/checkout.ts": { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ShippingAddressChangeResult", - "value": "ShippingAddressChangeResultSuccess | ShippingAddressChangeResultError", - "description": "The result of calling `applyShippingAddressChange()`. Use the `type` property to determine whether the change succeeded or failed. On failure, the `errors` array contains field-level details.", - "isPublicDocs": true - } - }, - "ShippingAddressChangeResultSuccess": { - "src/surfaces/checkout/api/checkout/checkout.ts": { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "name": "ShippingAddressChangeResultSuccess", - "description": "The result of a successful shipping address change. The `type` property is `'success'` and `errors` is `null`.", + "name": "ShippingAddressChangeFieldError", + "description": "An error corresponding to a particular field from a given change. Use the `field` property to determine which address field caused the error.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "PropertySignature", - "name": "errors", - "value": "null", - "description": "Always `null` for a successful address change. Present so that you can check `result.errors` without narrowing the union type first." + "name": "field", + "value": "keyof MailingAddress", + "description": "The `MailingAddress` field that caused the error, such as `'countryCode'` or `'zip'`. The value is `undefined` if the error isn't specific to a single field.", + "isOptional": true }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates that the shipping address change was applied successfully." + "name": "message", + "value": "string", + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." } ], - "value": "export interface ShippingAddressChangeResultSuccess {\n /**\n * Indicates that the shipping address change was applied successfully.\n */\n type: 'success';\n\n /**\n * Always `null` for a successful address change. Present so that you can\n * check `result.errors` without narrowing the union type first.\n */\n errors: null;\n}" + "value": "export interface ShippingAddressChangeFieldError {\n /**\n * The `MailingAddress` field that caused the error, such as `'countryCode'` or `'zip'`. The value is `undefined` if the error isn't specific to a single field.\n */\n field?: keyof MailingAddress;\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" } }, "ShippingAddressChangeResultError": { @@ -5223,541 +5623,85 @@ "value": "export interface ShippingAddressChangeResultError {\n /**\n * Indicates that the shipping address change couldn't be applied. Check the `errors` array for field-level details.\n */\n type: 'error';\n\n /**\n * The list of field-level errors that prevented the address change. Each entry identifies which address field failed and why.\n */\n errors: ShippingAddressChangeFieldError[];\n}" } }, - "ShippingAddressChangeFieldError": { + "ShippingAddressChangeResult": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "name": "ShippingAddressChangeFieldError", - "description": "An error corresponding to a particular field from a given change. Use the `field` property to determine which address field caused the error.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "field", - "value": "keyof MailingAddress", - "description": "The `MailingAddress` field that caused the error, such as `'countryCode'` or `'zip'`. The value is `undefined` if the error isn't specific to a single field.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." - } - ], - "value": "export interface ShippingAddressChangeFieldError {\n /**\n * The `MailingAddress` field that caused the error, such as `'countryCode'` or `'zip'`. The value is `undefined` if the error isn't specific to a single field.\n */\n field?: keyof MailingAddress;\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" - } - }, - "UseBillingAddressGeneratedType": { - "src/surfaces/checkout/preact/billing-address.ts": { - "filePath": "src/surfaces/checkout/preact/billing-address.ts", - "name": "UseBillingAddressGeneratedType", - "description": "Returns the proposed `billingAddress` applied to the checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/billing-address.ts", - "description": "", - "name": "MailingAddress | undefined", - "value": "MailingAddress | undefined" - }, - "value": "export function useBillingAddress<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): MailingAddress | undefined {\n const billingAddress = useApi().billingAddress;\n\n if (!billingAddress) {\n throw new ScopeNotGrantedError(\n 'Using billing address requires having billing address permissions granted to your app.',\n );\n }\n\n return useSubscription(billingAddress);\n}" - } - }, - "UseShippingAddressGeneratedType": { - "src/surfaces/checkout/preact/shipping-address.ts": { - "filePath": "src/surfaces/checkout/preact/shipping-address.ts", - "name": "UseShippingAddressGeneratedType", - "description": "Returns the proposed `shippingAddress` applied to the checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/shipping-address.ts", - "description": "", - "name": "ShippingAddress | undefined", - "value": "ShippingAddress | undefined" - }, - "value": "export function useShippingAddress<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): ShippingAddress | undefined {\n const shippingAddress = useApi().shippingAddress;\n\n if (!shippingAddress) {\n throw new ScopeNotGrantedError(\n 'Using shipping address requires having shipping address permissions granted to your app.',\n );\n }\n\n return useSubscription(shippingAddress);\n}" - } - }, - "UseApplyShippingAddressChangeGeneratedType": { - "src/surfaces/checkout/preact/shipping-address.ts": { - "filePath": "src/surfaces/checkout/preact/shipping-address.ts", - "name": "UseApplyShippingAddressChangeGeneratedType", - "description": "Returns a function to mutate the `shippingAddress` property of checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/shipping-address.ts", - "description": "", - "name": "(change: ShippingAddressChange) => Promise | undefined", - "value": "(change: ShippingAddressChange) => Promise | undefined" - }, - "value": "export function useApplyShippingAddressChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>():\n | ((change: ShippingAddressChange) => Promise)\n | undefined {\n const api = useApi();\n\n if ('applyShippingAddressChange' in api) {\n return api.applyShippingAddressChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyShippingAddressChange',\n api.extension.target,\n );\n}" + "syntaxKind": "TypeAliasDeclaration", + "name": "ShippingAddressChangeResult", + "value": "ShippingAddressChangeResultSuccess | ShippingAddressChangeResultError", + "description": "The result of calling `applyShippingAddressChange()`. Use the `type` property to determine whether the change succeeded or failed. On failure, the `errors` array contains field-level details.", + "isPublicDocs": true } }, - "ShippingAddressChange": { + "CheckoutApi": { "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ShippingAddressChange", - "value": "ShippingAddressUpdateChange", - "description": "The input for `applyShippingAddressChange()`. Currently only supports `ShippingAddressUpdateChange` (with `type: 'updateShippingAddress'`).", + "name": "CheckoutApi", + "description": "Methods for modifying the checkout, including cart lines, discount codes, gift cards, metafields, notes, attributes, and the shipping address. Each method returns a promise that resolves with a result indicating success or failure.", "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "address", - "value": "Partial", - "description": "Fields to update in the shipping address. You only need to provide values for the fields you want to update. Any fields you don't list keep their current values." + "syntaxKind": "MethodSignature", + "name": "applyAttributeChange", + "value": "(change: AttributeChange) => Promise", + "description": "Updates or removes an attribute on the cart and checkout. On success, the [`attributes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/attributes#standardapi-propertydetail-attributes) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.", + "deprecationMessage": "Use cart metafields instead." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'updateShippingAddress'", - "description": "Identifies this as a shipping address update. This is the only supported change type for `applyShippingAddressChange()`." - } - ] - } - }, - "AnyComponent": { - "src/surfaces/checkout/shared.ts": { - "filePath": "src/surfaces/checkout/shared.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "AnyComponent", - "value": "'Abbreviation' | 'Announcement' | 'Badge' | 'Banner' | 'Box' | 'Button' | 'Chat' | 'Checkbox' | 'Chip' | 'Choice' | 'ChoiceList' | 'Clickable' | 'ClickableChip' | 'ClipboardItem' | 'ConsentCheckbox' | 'ConsentPhoneField' | 'DateField' | 'DatePicker' | 'Details' | 'Divider' | 'DropZone' | 'EmailField' | 'Form' | 'Grid' | 'GridItem' | 'Heading' | 'Icon' | 'Image' | 'Link' | 'ListItem' | 'Map' | 'MapMarker' | 'Modal' | 'MoneyField' | 'NumberField' | 'Option' | 'OrderedList' | 'Paragraph' | 'PasswordField' | 'PaymentIcon' | 'PhoneField' | 'Popover' | 'PressButton' | 'ProductThumbnail' | 'Progress' | 'QueryContainer' | 'QRCode' | 'ScrollBox' | 'Section' | 'Select' | 'Sheet' | 'SkeletonParagraph' | 'Spinner' | 'Stack' | 'Summary' | 'Switch' | 'Text' | 'TextArea' | 'TextField' | 'Time' | 'Tooltip' | 'UnorderedList' | 'UrlField'", - "description": "", - "isPublicDocs": true - } - }, - "Announcement": { - "src/surfaces/checkout/api/announcement/announcement.ts": { - "filePath": "src/surfaces/checkout/api/announcement/announcement.ts", - "name": "Announcement", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/announcement/announcement.ts", - "syntaxKind": "PropertySignature", - "name": "announcement", - "value": "{ close(): void; addEventListener(type: \"close\", cb: () => void): void; removeEventListener(type: \"close\", cb: () => void): void; }", - "description": "" - } - ], - "value": "export interface Announcement {\n announcement: {\n close(): void;\n addEventListener(type: 'close', cb: () => void): void;\n removeEventListener(type: 'close', cb: () => void): void;\n };\n}" - } - }, - "BaseMerchandise": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "BaseMerchandise", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A globally unique identifier for the merchandise.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'gid://shopify/ProductVariant/123'", - "title": "Example" - } - ] - } - ] - } - ], - "value": "export interface BaseMerchandise {\n /**\n * A globally unique identifier for the merchandise.\n *\n * @example 'gid://shopify/ProductVariant/123'\n */\n id: string;\n}" - } - }, - "ProductVariant": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "ProductVariant", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A globally-unique identifier for the product variant in the format `gid://shopify/ProductVariant/`.", - "examples": [ - { - "title": "Example", - "description": "", - "tabs": [ - { - "code": "'gid://shopify/ProductVariant/123'", - "title": "Example" - } - ] - } - ] - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "image", - "value": "ImageDetails", - "description": "The image associated with the product variant. Falls back to the product image if the variant doesn't have its own. The value is `undefined` if neither the variant nor the product has an image.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "product", - "value": "Product", - "description": "The parent product that this variant belongs to. Use this to access the product's ID, vendor, and type." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "requiresShipping", - "value": "boolean", - "description": "Whether this product variant requires physical shipping. When `true`, the buyer must provide a shipping address. Returns `false` for digital products, gift cards, and services." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "selectedOptions", - "value": "SelectedOption[]", - "description": "The product options applied to this variant, such as size, color, or material. Each entry contains the option name and the selected value." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "sellingPlan", - "value": "SellingPlan", - "description": "The [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) associated with this variant, such as a subscription or pre-order plan. The value is `undefined` if the item isn't being purchased through a selling plan.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "sku", - "value": "string", - "description": "The stock keeping unit (SKU) assigned to this variant by the merchant, used for inventory tracking. The value is `undefined` if no SKU has been set.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "subtitle", - "value": "string", - "description": "A secondary description for the variant that provides additional context, such as a color or size combination. The value is `undefined` if no subtitle is available.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The display title of the product variant, such as \"Small\" or \"Red / Large\". This is the variant-specific label, not the parent product title." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'variant'", - "description": "Identifies the merchandise as a product variant. This is currently the only merchandise type in checkout." - } - ], - "value": "export interface ProductVariant extends BaseMerchandise {\n /**\n * Identifies the merchandise as a product variant. This is currently the only merchandise type in checkout.\n */\n type: 'variant';\n\n /**\n * A globally-unique identifier for the product variant in the format `gid://shopify/ProductVariant/`.\n *\n * @example 'gid://shopify/ProductVariant/123'\n */\n id: string;\n\n /**\n * The display title of the product variant, such as \"Small\" or \"Red / Large\". This is the variant-specific label, not the parent product title.\n */\n title: string;\n\n /**\n * A secondary description for the variant that provides additional context, such as a color or size combination. The value is `undefined` if no subtitle is available.\n */\n subtitle?: string;\n\n /**\n * The image associated with the product variant. Falls back to the product image if the variant doesn't have its own. The value is `undefined` if neither the variant nor the product has an image.\n */\n image?: ImageDetails;\n\n /**\n * The product options applied to this variant, such as size, color, or material. Each entry contains the option name and the selected value.\n */\n selectedOptions: SelectedOption[];\n\n /**\n * The parent product that this variant belongs to. Use this to access the product's ID, vendor, and type.\n */\n product: Product;\n\n /**\n * Whether this product variant requires physical shipping. When `true`, the buyer must provide a shipping address. Returns `false` for digital products, gift cards, and services.\n */\n requiresShipping: boolean;\n\n /**\n * The [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) associated with this variant, such as a subscription or pre-order plan. The value is `undefined` if the item isn't being purchased through a selling plan.\n */\n sellingPlan?: SellingPlan;\n\n /**\n * The stock keeping unit (SKU) assigned to this variant by the merchant, used for inventory tracking. The value is `undefined` if no SKU has been set.\n */\n sku?: string;\n}" - } - }, - "CartDiscountAllocationBase": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "CartDiscountAllocationBase", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "discountedAmount", - "value": "Money", - "description": "The monetary value that was deducted from the line item or order total by this discount allocation." - } - ], - "value": "export interface CartDiscountAllocationBase {\n /**\n * The monetary value that was deducted from the line item or order total by this discount allocation.\n */\n discountedAmount: Money;\n}" - } - }, - "DeliveryOptionBase": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "DeliveryOptionBase", - "description": "Represents a base interface for a single delivery option.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "code", - "value": "string", - "description": "The carrier service code or rate identifier for this delivery option." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "Additional details about the delivery option provided by the carrier or merchant, such as estimated delivery windows or service level notes.", - "isOptional": true + "syntaxKind": "MethodSignature", + "name": "applyCartLinesChange", + "value": "(change: CartLineChange) => Promise", + "description": "Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-lines#standardapi-propertydetail-lines) property updates with the new state.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "handle", - "value": "string", - "description": "The unique identifier of the delivery option. Use this to match against `DeliveryOptionReference.handle` or `DeliverySelectionGroup` entries." + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "MethodSignature", + "name": "applyDiscountCodeChange", + "value": "(change: DiscountCodeChange) => Promise", + "description": "Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/discounts#standardapi-propertydetail-discountcodes) property updates with the new state.\n\n> Caution: > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves discount codes through a network call.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "metafields", - "value": "Metafield[]", - "description": "Custom [metafields](https://shopify.dev/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a [Shopify Function](https://shopify.dev/docs/apps/build/functions). Use these to display additional information about the option." + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "MethodSignature", + "name": "applyGiftCardChange", + "value": "(change: GiftCardChange) => Promise", + "description": "Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/gift-cards#standardapi-propertydetail-appliedgiftcards) property updates with the new state.\n\n> Caution: > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves gift card codes through a network call.\n\n> Note: This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "The merchant-facing or carrier-provided display name for the delivery option, such as \"Standard Shipping\" or \"Express\".", - "isOptional": true - } - ], - "value": "export interface DeliveryOptionBase {\n /**\n * The unique identifier of the delivery option. Use this to match against `DeliveryOptionReference.handle` or `DeliverySelectionGroup` entries.\n */\n handle: string;\n\n /**\n * The merchant-facing or carrier-provided display name for the delivery\n * option, such as \"Standard Shipping\" or \"Express\".\n */\n title?: string;\n\n /**\n * Additional details about the delivery option provided by the carrier\n * or merchant, such as estimated delivery windows or service level notes.\n */\n description?: string;\n\n /**\n * The carrier service code or rate identifier for this delivery option.\n */\n code: string;\n\n /**\n * Custom [metafields](https://shopify.dev/docs/apps/build/custom-data/metafields) attached to this delivery option by the carrier or a [Shopify Function](https://shopify.dev/docs/apps/build/functions). Use these to display additional information about the option.\n */\n metafields: Metafield[];\n}" - } - }, - "DeliveryGroupDetails": { - "src/surfaces/checkout/api/standard/standard.ts": { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "name": "DeliveryGroupDetails", - "description": "Represents a DeliveryGroup with expanded reference fields and full details.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "deliveryOptions", - "value": "DeliveryOption[]", - "description": "The delivery options available for this group, including shipping, pickup point, and pickup location options. The buyer selects one of these to determine how their items are delivered." + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "MethodSignature", + "name": "applyMetafieldChange", + "value": "(change: MetafieldChange) => Promise", + "description": "Creates, updates, or removes a cart metafield on the checkout. On success, the [`metafields`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/metafields#standardapi-propertydetail-metafields) property updates to reflect the change.\n\nCart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "groupType", - "value": "DeliveryGroupType", - "description": "Whether this group contains items for a one-time purchase or a subscription. Subscription delivery groups might have different shipping options. See `DeliveryGroupType` for possible values." + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "MethodSignature", + "name": "applyNoteChange", + "value": "(change: NoteChange) => Promise", + "description": "Sets or removes the buyer's note on the checkout. On success, the [`note`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/note#standardapi-propertydetail-note) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the delivery group. The value is `undefined` if the underlying delivery line doesn't have an ID assigned.", + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", + "syntaxKind": "MethodSignature", + "name": "applyShippingAddressChange", + "value": "(change: ShippingAddressUpdateChange) => Promise", + "description": "Updates the buyer's shipping address on the checkout. The provided fields are merged into the existing address without prompting the buyer. On success, the `shippingAddress` property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true }, { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", + "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "PropertySignature", - "name": "isDeliveryRequired", + "name": "experimentalIsShopAppStyle", "value": "boolean", - "description": "Whether physical delivery is required for the items in this group. Digital-only groups don't require delivery." - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "selectedDeliveryOption", - "value": "DeliveryOption", - "description": "The full delivery option the buyer has selected for this group, with all cost and carrier details included. The value is `undefined` if the buyer hasn't selected an option yet. Unlike `DeliveryGroup.selectedDeliveryOption`, which is a reference, this contains the complete `DeliveryOption` object.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/api/standard/standard.ts", - "syntaxKind": "PropertySignature", - "name": "targetedCartLines", - "value": "CartLine[]", - "description": "The full cart line objects associated with this delivery group, with all merchandise and cost details included. Unlike `DeliveryGroup.targetedCartLines`, which contains references, this contains the complete `CartLine` objects." - } - ], - "value": "export interface DeliveryGroupDetails extends DeliveryGroup {\n /**\n * The full delivery option the buyer has selected for this group, with all cost and carrier details included. The value is `undefined` if the buyer hasn't selected an option yet. Unlike `DeliveryGroup.selectedDeliveryOption`, which is a reference, this contains the complete `DeliveryOption` object.\n */\n selectedDeliveryOption?: DeliveryOption;\n\n /**\n * The full cart line objects associated with this delivery group, with all merchandise and cost details included. Unlike `DeliveryGroup.targetedCartLines`, which contains references, this contains the complete `CartLine` objects.\n */\n targetedCartLines: CartLine[];\n}" - } - }, - "RedeemableChangeResult": { - "src/surfaces/checkout/api/redeemable/redeemable.ts": { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "RedeemableChangeResult", - "value": "RedeemableChangeResultSuccess | RedeemableChangeResultError", - "description": "", - "isPublicDocs": true - } - }, - "RedeemableChangeResultSuccess": { - "src/surfaces/checkout/api/redeemable/redeemable.ts": { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "name": "RedeemableChangeResultSuccess", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'success'", - "description": "Indicates that the redeemable change was applied successfully." - } - ], - "value": "export interface RedeemableChangeResultSuccess {\n /**\n * Indicates that the redeemable change was applied successfully.\n */\n type: 'success';\n}" - } - }, - "RedeemableChangeResultError": { - "src/surfaces/checkout/api/redeemable/redeemable.ts": { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "name": "RedeemableChangeResultError", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "message", - "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It is **not** localized, and therefore should not be presented directly to the buyer." - }, - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'error'", - "description": "Indicates that the redeemable change was not applied successfully." - } - ], - "value": "export interface RedeemableChangeResultError {\n /**\n * Indicates that the redeemable change was not applied successfully.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It is **not** localized, and therefore should not be presented directly\n * to the buyer.\n */\n message: string;\n}" - } - }, - "RedeemableAttribute": { - "src/surfaces/checkout/api/redeemable/redeemable.ts": { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "name": "RedeemableAttribute", - "description": "A key-value pair that represents an attribute of a redeemable payment method.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "string", - "description": "" - }, - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "" - } - ], - "value": "export interface RedeemableAttribute {\n key: string;\n value: string;\n}" - } - }, - "RedeemableChange": { - "src/surfaces/checkout/api/redeemable/redeemable.ts": { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "RedeemableChange", - "value": "RedeemableAddChange", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "attributes", - "value": "RedeemableAttribute[]", - "description": "The redeemable attributes." - }, - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "identifier", - "value": "string", - "description": "The identifier used to represent the redeemable (e.g. the gift card code)." - }, - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'redeemableAddChange'", - "description": "The type of the `RedeemableChange` API." - } - ] - } - }, - "RedeemableAddChange": { - "src/surfaces/checkout/api/redeemable/redeemable.ts": { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "name": "RedeemableAddChange", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "attributes", - "value": "RedeemableAttribute[]", - "description": "The redeemable attributes." - }, - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "identifier", - "value": "string", - "description": "The identifier used to represent the redeemable (e.g. the gift card code)." - }, - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'redeemableAddChange'", - "description": "The type of the `RedeemableChange` API." - } - ], - "value": "export interface RedeemableAddChange {\n /**\n * The type of the `RedeemableChange` API.\n */\n type: 'redeemableAddChange';\n\n /**\n * The redeemable attributes.\n */\n attributes: RedeemableAttribute[];\n\n /**\n * The identifier used to represent the redeemable (e.g. the gift card code).\n */\n identifier: string;\n}" - } - }, - "RedeemableApi": { - "src/surfaces/checkout/api/redeemable/redeemable.ts": { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "name": "RedeemableApi", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/api/redeemable/redeemable.ts", - "syntaxKind": "MethodSignature", - "name": "applyRedeemableChange", - "value": "(change: RedeemableAddChange) => Promise", - "description": "Applies a redeemable change to add a redeemable payment method." + "description": "", + "isOptional": true, + "isPrivate": true } ], - "value": "export interface RedeemableApi {\n /**\n * Applies a redeemable change to add a redeemable payment method.\n */\n applyRedeemableChange(\n change: RedeemableChange,\n ): Promise;\n}" + "value": "export interface CheckoutApi {\n /**\n * Updates or removes an attribute on the cart and checkout. On success, the\n * [`attributes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/attributes#standardapi-propertydetail-attributes) property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n *\n * @deprecated Use cart metafields instead.\n */\n applyAttributeChange(change: AttributeChange): Promise;\n\n /**\n * Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-lines#standardapi-propertydetail-lines) property updates with the new state.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyCartLinesChange(change: CartLineChange): Promise;\n\n /**\n * Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/discounts#standardapi-propertydetail-discountcodes) property updates with the new state.\n *\n * > Caution:\n * > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves discount codes through a network call.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyDiscountCodeChange(\n change: DiscountCodeChange,\n ): Promise;\n\n /**\n * Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/gift-cards#standardapi-propertydetail-appliedgiftcards) property updates with the new state.\n *\n * > Caution:\n * > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves gift card codes through a network call.\n *\n * > Note: This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyGiftCardChange(change: GiftCardChange): Promise;\n\n /**\n * Creates, updates, or removes a cart metafield on the checkout. On success, the\n * [`metafields`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/metafields#standardapi-propertydetail-metafields) property updates to reflect the change.\n *\n * Cart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyMetafieldChange(change: MetafieldChange): Promise;\n\n /**\n * Sets or removes the buyer's note on the checkout. On success, the\n * [`note`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/note#standardapi-propertydetail-note)\n * property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyNoteChange(change: NoteChange): Promise;\n\n /**\n * @private\n */\n experimentalIsShopAppStyle?: boolean;\n\n /**\n * Updates the buyer's shipping address on the checkout. The provided fields\n * are merged into the existing address without prompting the buyer. On success,\n * the `shippingAddress` property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n applyShippingAddressChange?(\n change: ShippingAddressChange,\n ): Promise;\n}" } }, "OrderConfirmation": { @@ -5779,7 +5723,7 @@ "syntaxKind": "PropertySignature", "name": "number", "value": "string", - "description": "A randomly generated alpha-numeric identifier for the order, distinct from `order.id`. The value is `undefined` for orders that were created before this field was introduced. All recent orders have a number.\n\nOptional. Might not be present for orders created before 2024.", + "description": "A randomly generated alpha-numeric identifier for the order, distinct from `order.id`. The value is `undefined` for orders that were created before this field was introduced. All recent orders have a number.", "isOptional": true }, { @@ -5790,7 +5734,7 @@ "description": "" } ], - "value": "export interface OrderConfirmation {\n order: {\n /**\n * A globally unique identifier for the order. This becomes the\n * [`Order`](https://shopify.dev/docs/api/admin-graphql/latest/objects/Order) object ID in the\n * GraphQL Admin API after the order is created.\n *\n * @example 'gid://shopify/Order/123'\n */\n id: string;\n };\n /**\n * A randomly generated alpha-numeric identifier for the order, distinct\n * from `order.id`. The value is `undefined` for orders that were created\n * before this field was introduced. All recent orders have a number.\n *\n * Optional. Might not be present for orders created before 2024.\n */\n number?: string;\n\n /**\n * Whether this is the customer's first completed order with this shop. `true` means the buyer hasn't placed an order here before. Use this to show first-purchase messaging or trigger welcome offers.\n */\n isFirstOrder: boolean;\n}" + "value": "export interface OrderConfirmation {\n order: {\n /**\n * A globally unique identifier for the order. This becomes the\n * [`Order`](/docs/api/admin-graphql/latest/objects/Order) object ID in the\n * GraphQL Admin API after the order is created.\n *\n * @example 'gid://shopify/Order/123'\n */\n id: string;\n };\n /**\n * A randomly generated alpha-numeric identifier for the order, distinct\n * from `order.id`. The value is `undefined` for orders that were created\n * before this field was introduced. All recent orders have a number.\n */\n number?: string;\n\n /**\n * Whether this is the customer's first completed order with this shop. `true` means the buyer hasn't placed an order here before. Use this to show first-purchase messaging or trigger welcome offers.\n */\n isFirstOrder: boolean;\n}" } }, "OrderConfirmationApi": { @@ -5823,10 +5767,10 @@ "syntaxKind": "PropertySignature", "name": "target", "value": "SubscribableSignalLike", - "description": "The cart line that this extension is attached to. Use this to read the line item's merchandise, quantity, cost, and attributes.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties.\n\n> Note: Until version `2023-04`, this property was a `ReadonlySignalLike`." + "description": "The cart line that this extension is attached to. Use this to read the line item's merchandise, quantity, cost, and attributes.\n\n> Note: Until version `2023-04`, this property was a `ReadonlySignalLike`." } ], - "value": "export interface CartLineItemApi {\n /**\n * The cart line that this extension is attached to. Use this to read the\n * line item's merchandise, quantity, cost, and attributes.\n *\n * Available only on the corresponding item target. Shipping option item\n * targets expose shipping option properties; pickup location item targets\n * expose pickup location properties.\n *\n * > Note: Until version `2023-04`, this property was a `ReadonlySignalLike`.\n */\n target: SubscribableSignalLike;\n}" + "value": "export interface CartLineItemApi {\n /**\n * The cart line that this extension is attached to. Use this to read the\n * line item's merchandise, quantity, cost, and attributes.\n *\n * > Note: Until version `2023-04`, this property was a `ReadonlySignalLike`.\n */\n target: SubscribableSignalLike;\n}" } }, "PickupLocationListApi": { @@ -5859,10 +5803,10 @@ "syntaxKind": "PropertySignature", "name": "isLocationFormVisible", "value": "SubscribableSignalLike", - "description": "Reflects which view was active when the extension loaded. When the buyer moves to the next view, the extension restarts with the current value rather than updating in place." + "description": "Whether the location search form is currently visible to the buyer. Use this to conditionally render UI that depends on the buyer actively searching for pickup points." } ], - "value": "export interface PickupPointListApi {\n /**\n * Reflects which view was active when the extension loaded. When the\n * buyer moves to the next view, the extension restarts with the\n * current value rather than updating in place.\n */\n isLocationFormVisible: SubscribableSignalLike;\n}" + "value": "export interface PickupPointListApi {\n /**\n * Whether the location search form is currently visible to the buyer.\n * Use this to conditionally render UI that depends on the buyer actively\n * searching for pickup points.\n */\n isLocationFormVisible: SubscribableSignalLike;\n}" } }, "PickupLocationItemApi": { @@ -5877,17 +5821,17 @@ "syntaxKind": "PropertySignature", "name": "isTargetSelected", "value": "SubscribableSignalLike", - "description": "Whether the buyer has selected the target pickup location. When `true`, the target location is the buyer's active choice. When `false`, the buyer has chosen a different pickup location.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties." + "description": "Whether the buyer has selected the target pickup location. When `true`, the target location is the buyer's active choice. When `false`, the buyer has chosen a different pickup location." }, { "filePath": "src/surfaces/checkout/api/pickup/pickup-location-item.ts", "syntaxKind": "PropertySignature", "name": "target", "value": "SubscribableSignalLike", - "description": "The pickup location that this extension is attached to. Use this to read the location's name, address, and other details.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties." + "description": "The pickup location that this extension is attached to. Use this to read the location's name, address, and other details." } ], - "value": "export interface PickupLocationItemApi {\n /**\n * The pickup location that this extension is attached to. Use this to read the location's name, address, and other details.\n *\n * Available only on the corresponding item target. Shipping option item\n * targets expose shipping option properties; pickup location item targets\n * expose pickup location properties.\n */\n target: SubscribableSignalLike;\n\n /**\n * Whether the buyer has selected the target pickup location. When `true`, the target location is the buyer's active choice. When `false`, the buyer has chosen a different pickup location.\n *\n * Available only on the corresponding item target. Shipping option item\n * targets expose shipping option properties; pickup location item targets\n * expose pickup location properties.\n */\n isTargetSelected: SubscribableSignalLike;\n}" + "value": "export interface PickupLocationItemApi {\n /**\n * The pickup location that this extension is attached to. Use this to read the location's name, address, and other details.\n */\n target: SubscribableSignalLike;\n\n /**\n * Whether the buyer has selected the target pickup location. When `true`, the target location is the buyer's active choice. When `false`, the buyer has chosen a different pickup location.\n */\n isTargetSelected: SubscribableSignalLike;\n}" } }, "ShippingOptionItemApi": { @@ -5902,7 +5846,7 @@ "syntaxKind": "PropertySignature", "name": "isTargetSelected", "value": "SubscribableSignalLike", - "description": "Whether the buyer has selected the target shipping option. When `true`, the target option is the buyer's active choice. When `false`, the buyer has chosen a different shipping option.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties." + "description": "Whether the buyer has selected the target shipping option. When `true`, the target option is the buyer's active choice. When `false`, the buyer has chosen a different shipping option." }, { "filePath": "src/surfaces/checkout/api/shipping/shipping-option-item.ts", @@ -5916,10 +5860,10 @@ "syntaxKind": "PropertySignature", "name": "target", "value": "SubscribableSignalLike", - "description": "The shipping option that this extension is attached to. Use this to read the option's cost, carrier, delivery estimate, and other details.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties." + "description": "The shipping option that this extension is attached to. Use this to read the option's cost, carrier, delivery estimate, and other details." } ], - "value": "export interface ShippingOptionItemApi {\n /**\n * The shipping option that this extension is attached to. Use this to read the option's cost, carrier, delivery estimate, and other details.\n *\n * Available only on the corresponding item target. Shipping option item\n * targets expose shipping option properties; pickup location item targets\n * expose pickup location properties.\n */\n target: SubscribableSignalLike;\n\n /**\n * Whether the buyer has selected the target shipping option. When `true`, the target option is the buyer's active choice. When `false`, the buyer has chosen a different shipping option.\n *\n * Available only on the corresponding item target. Shipping option item\n * targets expose shipping option properties; pickup location item targets\n * expose pickup location properties.\n */\n isTargetSelected: SubscribableSignalLike;\n\n /**\n * The render mode of this shipping option, indicating how the extension is displayed in the checkout UI.\n */\n renderMode: ShippingOptionItemRenderMode;\n}" + "value": "export interface ShippingOptionItemApi {\n /**\n * The shipping option that this extension is attached to. Use this to read the option's cost, carrier, delivery estimate, and other details.\n */\n target: SubscribableSignalLike;\n\n /**\n * Whether the buyer has selected the target shipping option. When `true`, the target option is the buyer's active choice. When `false`, the buyer has chosen a different shipping option.\n */\n isTargetSelected: SubscribableSignalLike;\n\n /**\n * The render mode of this shipping option, indicating how the extension is displayed in the checkout UI.\n */\n renderMode: ShippingOptionItemRenderMode;\n}" } }, "ShippingOptionItemRenderMode": { @@ -6037,10 +5981,10 @@ "syntaxKind": "PropertySignature", "name": "groupType", "value": "DeliveryGroupType", - "description": "The type of delivery groups in this list. This is the same `DeliveryGroupType` used on `DeliveryGroup.groupType`.\n\n- `'oneTimePurchase'`: Items bought as a single, non-recurring purchase.\n- `'subscription'`: Items bought through a [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) that results in recurring deliveries." + "description": "The type of delivery groups in this list. This is the same `DeliveryGroupType` used on `DeliveryGroup.groupType`.\n\n- `'oneTimePurchase'`: Items bought as a single, non-recurring purchase.\n- `'subscription'`: Items bought through a [selling plan](/docs/apps/build/purchase-options/subscriptions) that results in recurring deliveries." } ], - "value": "export interface DeliveryGroupList {\n /**\n * The type of delivery groups in this list. This is the same `DeliveryGroupType` used on `DeliveryGroup.groupType`.\n *\n * - `'oneTimePurchase'`: Items bought as a single, non-recurring purchase.\n * - `'subscription'`: Items bought through a [selling plan](https://shopify.dev/docs/apps/build/purchase-options/subscriptions) that results in recurring deliveries.\n */\n groupType: DeliveryGroupType;\n /**\n * The delivery groups in this list. Each group contains cart lines and available delivery options for those items.\n */\n deliveryGroups: DeliveryGroup[];\n}" + "value": "export interface DeliveryGroupList {\n /**\n * The type of delivery groups in this list. This is the same `DeliveryGroupType` used on `DeliveryGroup.groupType`.\n *\n * - `'oneTimePurchase'`: Items bought as a single, non-recurring purchase.\n * - `'subscription'`: Items bought through a [selling plan](/docs/apps/build/purchase-options/subscriptions) that results in recurring deliveries.\n */\n groupType: DeliveryGroupType;\n /**\n * The delivery groups in this list. Each group contains cart lines and available delivery options for those items.\n */\n deliveryGroups: DeliveryGroup[];\n}" } }, "AutocompleteAddress": { @@ -6055,7 +5999,7 @@ "syntaxKind": "PropertySignature", "name": "address1", "value": "string", - "description": "The first line of the street address, including the street number and name. The value is `undefined` if the buyer hasn't entered an address yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The first line of the street address, including the street number and name. The value is `undefined` if the buyer hasn't entered an address yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -6075,7 +6019,7 @@ "syntaxKind": "PropertySignature", "name": "address2", "value": "string", - "description": "The second line of the buyer's address, such as apartment number, suite, or unit. The value is `undefined` if the buyer didn't provide a second address line.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The second line of the buyer's address, such as apartment number, suite, or unit. The value is `undefined` if the buyer didn't provide a second address line.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -6095,7 +6039,7 @@ "syntaxKind": "PropertySignature", "name": "city", "value": "string", - "description": "The city, town, or village of the address. The value is `undefined` if the buyer hasn't entered a city yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The city, town, or village of the address. The value is `undefined` if the buyer hasn't entered a city yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -6115,7 +6059,7 @@ "syntaxKind": "PropertySignature", "name": "company", "value": "string", - "description": "The buyer's company name. The value is `undefined` if the buyer didn't enter a company or the store doesn't collect company names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The buyer's company name. The value is `undefined` if the buyer didn't enter a company or the store doesn't collect company names.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -6135,7 +6079,7 @@ "syntaxKind": "PropertySignature", "name": "countryCode", "value": "CountryCode", - "description": "The two-letter country code in [ISO 3166 Alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format. The value is `undefined` if the buyer hasn't selected a country yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The two-letter country code in [ISO 3166 Alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) format. The value is `undefined` if the buyer hasn't selected a country yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -6195,7 +6139,7 @@ "syntaxKind": "PropertySignature", "name": "provinceCode", "value": "string", - "description": "The province, state, prefecture, or region code of the address. The format varies by country. The value is `undefined` if the buyer hasn't selected one yet or the country doesn't have provinces.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The province, state, prefecture, or region code of the address. The format varies by country. The value is `undefined` if the buyer hasn't selected one yet or the country doesn't have provinces.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -6215,7 +6159,7 @@ "syntaxKind": "PropertySignature", "name": "zip", "value": "string", - "description": "The postal code or ZIP code of the address, used for mail sorting and delivery routing. The value is `undefined` if the buyer hasn't entered one yet or the country doesn't use postal codes.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The postal code or ZIP code of the address, used for mail sorting and delivery routing. The value is `undefined` if the buyer hasn't entered one yet or the country doesn't use postal codes.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true, "examples": [ { @@ -6427,10 +6371,10 @@ "syntaxKind": "PropertySignature", "name": "suggestions", "value": "AddressAutocompleteSuggestion[]", - "description": "An array of address autocomplete suggestions to show to the buyer. Checkout displays up to five address suggestions. Return no more than five. Additional suggestions are ignored." + "description": "An array of address autocomplete suggestions to show to the buyer.\n\n> Note: Only the first five suggestions will be displayed to the buyer." } ], - "value": "export interface AddressAutocompleteSuggestOutput {\n /**\n * An array of address autocomplete suggestions to show to the buyer.\n * Checkout displays up to five address suggestions. Return no more\n * than five. Additional suggestions are ignored.\n */\n suggestions: AddressAutocompleteSuggestion[];\n}" + "value": "export interface AddressAutocompleteSuggestOutput {\n /**\n * An array of address autocomplete suggestions to show to the buyer.\n *\n * > Note: Only the first five suggestions will be displayed to the buyer.\n */\n suggestions: AddressAutocompleteSuggestion[];\n}" } }, "AddressAutocompleteStandardApi": { @@ -6445,14 +6389,14 @@ "syntaxKind": "PropertySignature", "name": "analytics", "value": "Analytics", - "description": "The methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event." + "description": "The methods for interacting with [Web Pixels](/docs/apps/marketing), such as emitting an event." }, { "filePath": "src/surfaces/checkout/api/address-autocomplete/standard.ts", "syntaxKind": "PropertySignature", "name": "appMetafields", "value": "AppMetafieldEntry[]", - "description": "The metafields requested in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.\n\nApp owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n\n> Tip: > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*" + "description": "The metafields requested in the [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration) file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.\n\nApp owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n\n> Tip: > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*" }, { "filePath": "src/surfaces/checkout/api/address-autocomplete/standard.ts", @@ -6474,7 +6418,7 @@ "syntaxKind": "PropertySignature", "name": "checkoutToken", "value": "CheckoutToken | undefined", - "description": "A stable ID that represents the current checkout.\n\nThis matches the `data.checkout.token` field in a [checkout-related WebPixel event](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data) and the `checkout_token` field in the [REST Admin API `Order` resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object)." + "description": "A stable ID that represents the current checkout.\n\nThis matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data) and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object)." }, { "filePath": "src/surfaces/checkout/api/address-autocomplete/standard.ts", @@ -6488,21 +6432,21 @@ "syntaxKind": "PropertySignature", "name": "i18n", "value": "I18n", - "description": "Utilities for translating content and formatting values according to the current [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization) Type 'RunnableExtensionInstance' is not assignable to type 'ExtensionInstance'.\n\nRefer to [`localization` examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#examples) for more information." + "description": "Utilities for translating content and formatting values according to the current [`localization`](/docs/api/checkout-ui-extensions/apis/localization) Type 'RunnableExtensionInstance' is not assignable to type 'ExtensionInstance'.\n\nRefer to [`localization` examples](/docs/api/checkout-ui-extensions/apis/localization#examples) for more information." }, { "filePath": "src/surfaces/checkout/api/address-autocomplete/standard.ts", "syntaxKind": "PropertySignature", "name": "localization", "value": "Localization", - "description": "The details about the location, language, and currency of the customer. For utilities to easily format and translate content based on these details, you can use the [`i18n`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#properties-propertydetail-i18n) object instead." + "description": "The details about the location, language, and currency of the customer. For utilities to easily format and translate content based on these details, you can use the [`i18n`](/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-i18n) object instead." }, { "filePath": "src/surfaces/checkout/api/address-autocomplete/standard.ts", "syntaxKind": "PropertySignature", "name": "query", "value": ">(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "The method used to query the Storefront GraphQL API with a prefetched token.\n\nRefer to [Storefront API access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/storefront-api) for more information." + "description": "The method used to query the Storefront GraphQL API with a prefetched token.\n\nRefer to [Storefront API access examples](/docs/api/checkout-ui-extensions/apis/storefront-api) for more information." }, { "filePath": "src/surfaces/checkout/api/address-autocomplete/standard.ts", @@ -6516,7 +6460,7 @@ "syntaxKind": "PropertySignature", "name": "settings", "value": "ExtensionSettings", - "description": "The settings matching the settings definition written in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.\n\n Refer to [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/settings#examples) for more information.\n\n> Note: The settings are empty when an extension is being installed in the [checkout editor](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-editor)." + "description": "The settings matching the settings definition written in the [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration) file.\n\n Refer to [settings examples](/docs/api/checkout-ui-extensions/apis/settings#examples) for more information.\n\n> Note: The settings are empty when an extension is being installed in the [checkout editor](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-editor)." }, { "filePath": "src/surfaces/checkout/api/address-autocomplete/standard.ts", @@ -6560,7 +6504,7 @@ ] } ], - "value": "export interface AddressAutocompleteStandardApi<\n Target extends\n | 'purchase.address-autocomplete.suggest'\n | 'purchase.address-autocomplete.format-suggestion',\n> {\n /**\n * The metafields requested in the\n * [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration)\n * file. These metafields are updated when there's a change in the merchandise items\n * being purchased by the customer.\n *\n * App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * > Tip:\n * > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*\n */\n appMetafields: AppMetafieldEntry[];\n\n /**\n * The methods for interacting with [Web Pixels](https://shopify.dev/docs/apps/marketing), such as emitting an event.\n */\n analytics: Analytics;\n\n /**\n * The custom attributes left by the customer to the merchant, either in their cart or during checkout.\n */\n attributes: Attribute[] | undefined;\n\n /**\n * The proposed customer billing address. The address updates when the field is\n * committed (on change) rather than every keystroke.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n billingAddress?: MailingAddress | undefined;\n\n /**\n * A stable ID that represents the current checkout.\n *\n * This matches the `data.checkout.token` field in a [checkout-related WebPixel event](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data)\n * and the `checkout_token` field in the [REST Admin API `Order` resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object).\n */\n checkoutToken: CheckoutToken | undefined;\n\n /**\n * The meta information about the extension.\n */\n extension: Extension;\n\n /**\n * Utilities for translating content and formatting values according to the current\n * [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization)\n * Type 'RunnableExtensionInstance' is not assignable to type 'ExtensionInstance'.\n *\n * Refer to [`localization` examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#examples)\n * for more information.\n */\n i18n: I18n;\n\n /**\n * The details about the location, language, and currency of the customer. For utilities to easily\n * format and translate content based on these details, you can use the\n * [`i18n`](https://shopify.dev/docs/api/checkout-ui-extensions/apis/localization#properties-propertydetail-i18n)\n * object instead.\n */\n localization: Localization;\n\n /**\n * The method used to query the Storefront GraphQL API with a prefetched token.\n *\n * Refer to [Storefront API access examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/storefront-api) for more information.\n */\n query: >(\n query: string,\n options?: {variables?: Variables; version?: StorefrontApiVersion},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n\n /**\n * The session token providing a set of claims as a signed JSON Web Token (JWT).\n *\n * The token has a TTL of 5 minutes.\n *\n * If the previous token expires, this value will reflect a new session token with a new signature and expiry.\n *\n * Learn more about [session tokens](/docs/apps/build/authentication-authorization/session-tokens).\n */\n sessionToken: SessionToken;\n\n /**\n * The settings matching the settings definition written in the\n * [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/configuration) file.\n *\n * Refer to [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/apis/settings#examples) for more information.\n *\n * > Note: The settings are empty when an extension is being installed in the [checkout editor](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-editor).\n\n */\n settings: ExtensionSettings;\n\n /**\n * The proposed customer shipping address. During the information step,\n * the address updates when the field is committed (on change) rather than every keystroke.\n *\n * > Note: An address value is only present if delivery is required. Otherwise, the subscribable value is undefined.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n shippingAddress?: MailingAddress | undefined;\n\n /** The shop where the checkout is taking place. */\n shop: Shop;\n\n /**\n * The key-value storage for the extension.\n *\n * It uses `localStorage` and should persist across the customer's current checkout session.\n *\n * > Caution: Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout.\n *\n * Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier,\n * each activated extension target had its own storage.\n */\n storage: Storage;\n\n /**\n * The runner version being used for the extension.\n *\n * @example 'unstable'\n */\n version: Version;\n}" + "value": "export interface AddressAutocompleteStandardApi<\n Target extends\n | 'purchase.address-autocomplete.suggest'\n | 'purchase.address-autocomplete.format-suggestion',\n> {\n /**\n * The metafields requested in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration)\n * file. These metafields are updated when there's a change in the merchandise items\n * being purchased by the customer.\n *\n * App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * > Tip:\n * > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*\n */\n appMetafields: AppMetafieldEntry[];\n\n /**\n * The methods for interacting with [Web Pixels](/docs/apps/marketing), such as emitting an event.\n */\n analytics: Analytics;\n\n /**\n * The custom attributes left by the customer to the merchant, either in their cart or during checkout.\n */\n attributes: Attribute[] | undefined;\n\n /**\n * The proposed customer billing address. The address updates when the field is\n * committed (on change) rather than every keystroke.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n billingAddress?: MailingAddress | undefined;\n\n /**\n * A stable ID that represents the current checkout.\n *\n * This matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data)\n * and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object).\n */\n checkoutToken: CheckoutToken | undefined;\n\n /**\n * The meta information about the extension.\n */\n extension: Extension;\n\n /**\n * Utilities for translating content and formatting values according to the current\n * [`localization`](/docs/api/checkout-ui-extensions/apis/localization)\n * Type 'RunnableExtensionInstance' is not assignable to type 'ExtensionInstance'.\n *\n * Refer to [`localization` examples](/docs/api/checkout-ui-extensions/apis/localization#examples)\n * for more information.\n */\n i18n: I18n;\n\n /**\n * The details about the location, language, and currency of the customer. For utilities to easily\n * format and translate content based on these details, you can use the\n * [`i18n`](/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-i18n)\n * object instead.\n */\n localization: Localization;\n\n /**\n * The method used to query the Storefront GraphQL API with a prefetched token.\n *\n * Refer to [Storefront API access examples](/docs/api/checkout-ui-extensions/apis/storefront-api) for more information.\n */\n query: >(\n query: string,\n options?: {variables?: Variables; version?: StorefrontApiVersion},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n\n /**\n * The session token providing a set of claims as a signed JSON Web Token (JWT).\n *\n * The token has a TTL of 5 minutes.\n *\n * If the previous token expires, this value will reflect a new session token with a new signature and expiry.\n *\n * Learn more about [session tokens](/docs/apps/build/authentication-authorization/session-tokens).\n */\n sessionToken: SessionToken;\n\n /**\n * The settings matching the settings definition written in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration) file.\n *\n * Refer to [settings examples](/docs/api/checkout-ui-extensions/apis/settings#examples) for more information.\n *\n * > Note: The settings are empty when an extension is being installed in the [checkout editor](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-editor).\n\n */\n settings: ExtensionSettings;\n\n /**\n * The proposed customer shipping address. During the information step,\n * the address updates when the field is committed (on change) rather than every keystroke.\n *\n * > Note: An address value is only present if delivery is required. Otherwise, the subscribable value is undefined.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n shippingAddress?: MailingAddress | undefined;\n\n /** The shop where the checkout is taking place. */\n shop: Shop;\n\n /**\n * The key-value storage for the extension.\n *\n * It uses `localStorage` and should persist across the customer's current checkout session.\n *\n * > Caution: Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout.\n *\n * Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier,\n * each activated extension target had its own storage.\n */\n storage: Storage;\n\n /**\n * The runner version being used for the extension.\n *\n * @example 'unstable'\n */\n version: Version;\n}" } }, "PaymentMethodAttributesResult": { @@ -7182,7 +7126,7 @@ "syntaxKind": "PropertySignature", "name": "Checkout::Dynamic::Render", "value": "RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Dynamic::Render'>,\n AnyCheckoutComponent\n >", - "description": "A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).", + "description": "A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).", "deprecationMessage": "Use `purchase.checkout.block.render` instead.", "isPrivate": true }, @@ -7344,7 +7288,7 @@ "syntaxKind": "PropertySignature", "name": "Checkout::ThankYou::Dynamic::Render", "value": "RenderExtension<\n OrderConfirmationApi & StandardApi<'Checkout::ThankYou::Dynamic::Render'>,\n AnyCheckoutComponent\n >", - "description": "A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).", + "description": "A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).", "deprecationMessage": "Use `purchase.thank-you.block.render` instead.", "isPrivate": true }, @@ -7382,7 +7326,7 @@ "syntaxKind": "PropertySignature", "name": "purchase.checkout.block.render", "value": "RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.block.render'>,\n AnyCheckoutComponent\n >", - "description": "A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets)." + "description": "A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets)." }, { "filePath": "src/surfaces/checkout/extension-targets.ts", @@ -7575,7 +7519,7 @@ "syntaxKind": "PropertySignature", "name": "purchase.thank-you.block.render", "value": "RenderExtension<\n OrderConfirmationApi & StandardApi<'purchase.thank-you.block.render'>,\n AnyCheckoutComponent\n >", - "description": "A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets)." + "description": "A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets)." }, { "filePath": "src/surfaces/checkout/extension-targets.ts", @@ -7789,7 +7733,7 @@ "syntaxKind": "PropertySignature", "name": "Checkout::Dynamic::Render", "value": "RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Dynamic::Render'>,\n AnyCheckoutComponent\n >", - "description": "A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).", + "description": "A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).", "deprecationMessage": "Use `purchase.checkout.block.render` instead.", "isPrivate": true }, @@ -7951,7 +7895,7 @@ "syntaxKind": "PropertySignature", "name": "Checkout::ThankYou::Dynamic::Render", "value": "RenderExtension<\n OrderConfirmationApi & StandardApi<'Checkout::ThankYou::Dynamic::Render'>,\n AnyCheckoutComponent\n >", - "description": "A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).", + "description": "A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).", "deprecationMessage": "Use `purchase.thank-you.block.render` instead.", "isPrivate": true }, @@ -7975,7 +7919,7 @@ "syntaxKind": "PropertySignature", "name": "purchase.checkout.block.render", "value": "RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.block.render'>,\n AnyCheckoutComponent\n >", - "description": "A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets)." + "description": "A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets)." }, { "filePath": "src/surfaces/checkout/extension-targets.ts", @@ -8168,7 +8112,7 @@ "syntaxKind": "PropertySignature", "name": "purchase.thank-you.block.render", "value": "RenderExtension<\n OrderConfirmationApi & StandardApi<'purchase.thank-you.block.render'>,\n AnyCheckoutComponent\n >", - "description": "A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets)." + "description": "A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page. Unlike static extension targets, block extension targets render where the merchant sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n\nThe [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets)." }, { "filePath": "src/surfaces/checkout/extension-targets.ts", @@ -8213,7 +8157,7 @@ "description": "A static extension target that is rendered below the header on the **Thank you** page." } ], - "value": "export interface RenderExtensionTargets {\n /**\n * A static extension target that is rendered immediately before any actions within each step.\n */\n 'purchase.checkout.actions.render-before': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.actions.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately before any actions within each step.\n *\n * @deprecated Use `purchase.checkout.actions.render-before` instead.\n * @private\n */\n 'Checkout::Actions::RenderBefore': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Actions::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after all line items.\n */\n 'purchase.checkout.cart-line-list.render-after': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.cart-line-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after all line items.\n *\n * @deprecated Use `purchase.checkout.cart-line-list.render-after` instead.\n * @private\n */\n 'Checkout::CartLines::RenderAfter': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::CartLines::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every line item, inside the details\n * under the line item properties element.\n */\n 'purchase.checkout.cart-line-item.render-after': RenderExtension<\n CheckoutApi &\n CartLineItemApi &\n StandardApi<'purchase.checkout.cart-line-item.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every line item, inside the details\n * under the line item properties element.\n *\n * @deprecated Use `purchase.checkout.cart-line-item.render-after` instead.\n * @private\n */\n 'Checkout::CartLineDetails::RenderAfter': RenderExtension<\n CheckoutApi &\n CartLineItemApi &\n StandardApi<'Checkout::CartLineDetails::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every bundle line item, inside the details\n * under the line item properties element. It replaces the default bundle products rendering.\n * @private\n */\n 'purchase.cart-line-item.line-components.render': RenderExtension<\n CartLineItemApi &\n StandardApi<'purchase.cart-line-item.line-components.render'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every bundle line item, inside the details\n * under the line item properties element. It replaces the default bundle products rendering.\n *\n * @deprecated Use `purchase.cart-line-item.line-components.render` instead.\n * @private\n */\n 'Checkout::CartLineDetails::RenderLineComponents': RenderExtension<\n CartLineItemApi &\n StandardApi<'Checkout::CartLineDetails::RenderLineComponents'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately after the contact form element.\n */\n 'purchase.checkout.contact.render-after': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.contact.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately after the contact form element.\n *\n * @deprecated Use `purchase.checkout.contact.render-after` instead.\n * @private\n */\n 'Checkout::Contact::RenderAfter': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Contact::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after a purchase below the customer information.\n *\n * @deprecated Use `purchase.thank-you.customer-information.render-after` or\n * `customer-account.order-status.customer-information.render-after` from `@shopify/ui-extension/customer-account` instead.\n * @private\n */\n 'Checkout::CustomerInformation::RenderAfter': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::CustomerInformation::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered between the shipping address header\n * and shipping address form elements.\n */\n 'purchase.checkout.delivery-address.render-before': RenderExtension<\n CheckoutApi &\n StandardApi<'purchase.checkout.delivery-address.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered between the shipping address header\n * and shipping address form elements.\n *\n * @deprecated Use `purchase.checkout.delivery-address.render-before` instead.\n * @private\n */\n 'Checkout::DeliveryAddress::RenderBefore': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::DeliveryAddress::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the shipping address form elements.\n */\n 'purchase.checkout.delivery-address.render-after': RenderExtension<\n CheckoutApi &\n StandardApi<'purchase.checkout.delivery-address.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature.\n * Unlike static extension targets, block extension targets render where the merchant\n * sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n *\n * The [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development\n * by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).\n */\n 'purchase.checkout.block.render': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.block.render'>,\n AnyCheckoutComponent\n >;\n /**\n * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature.\n * Unlike static extension targets, block extension targets render where the merchant\n * sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n *\n * The [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development\n * by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).\n *\n * @deprecated Use `purchase.checkout.block.render` instead.\n * @private\n */\n 'Checkout::Dynamic::Render': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Dynamic::Render'>,\n AnyCheckoutComponent\n >;\n /**\n * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page.\n * Unlike static extension targets, block extension targets render where the merchant\n * sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n *\n * The [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development\n * by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).\n *\n */\n 'purchase.thank-you.block.render': RenderExtension<\n OrderConfirmationApi & StandardApi<'purchase.thank-you.block.render'>,\n AnyCheckoutComponent\n >;\n /**\n * A [block extension target](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page.\n * Unlike static extension targets, block extension targets render where the merchant\n * sets them using the [checkout editor](https://shopify.dev/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n *\n * The [supported locations](https://shopify.dev/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development\n * by [using a URL parameter](https://shopify.dev/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).\n *\n * @deprecated Use `purchase.thank-you.block.render` instead.\n * @private\n */\n 'Checkout::ThankYou::Dynamic::Render': RenderExtension<\n OrderConfirmationApi & StandardApi<'Checkout::ThankYou::Dynamic::Render'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every line item, inside the details\n * under the line item properties element on the **Thank you** page.\n */\n 'purchase.thank-you.cart-line-item.render-after': RenderExtension<\n OrderConfirmationApi &\n CartLineItemApi &\n StandardApi<'purchase.thank-you.cart-line-item.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every line item, inside the details\n * under the line item properties element on the **Thank you** page.\n *\n * @deprecated Use `purchase.thank-you.cart-line-item.render-after` instead.\n * @private\n */\n 'Checkout::ThankYou::CartLineDetails::RenderAfter': RenderExtension<\n OrderConfirmationApi &\n CartLineItemApi &\n StandardApi<'Checkout::ThankYou::CartLineDetails::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after all line items on the **Thank you** page.\n */\n 'purchase.thank-you.cart-line-list.render-after': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'purchase.thank-you.cart-line-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after all line items on the **Thank you** page.\n *\n * @deprecated Use `purchase.thank-you.cart-line-list.render-after` instead.\n * @private\n */\n 'Checkout::ThankYou::CartLines::RenderAfter': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'Checkout::ThankYou::CartLines::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.\n */\n 'purchase.thank-you.customer-information.render-after': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'purchase.thank-you.customer-information.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.\n *\n * @deprecated Use `purchase.thank-you.customer-information.render-after` instead.\n * @private\n */\n 'Checkout::ThankYou::CustomerInformation::RenderAfter': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'Checkout::ThankYou::CustomerInformation::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders the gift card entry form fields after\n * the buyer ticks a box to use a gift card. This does not replace the\n * native gift card entry form which is rendered in a separate part of checkout.\n *\n * @private\n */\n 'purchase.checkout.gift-card.render': RenderExtension<\n RedeemableApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.gift-card.render'>,\n AnyCheckoutComponentExcept<'Image' | 'Banner'>\n >;\n /**\n * A static extension target that renders the gift card entry form fields after\n * the buyer ticks a box to use a gift card. This does not replace the\n * native gift card entry form which is rendered in a separate part of checkout.\n *\n * @private\n * @deprecated Use `purchase.checkout.gift-card.render` instead.\n */\n 'Checkout::GiftCard::Render': RenderExtension<\n RedeemableApi & CheckoutApi & StandardApi<'Checkout::GiftCard::Render'>,\n AnyCheckoutComponentExcept<'Image' | 'Banner'>\n >;\n /**\n * A static extension target that renders the form fields for a payment method when selected by the buyer.\n *\n * @private\n */\n 'purchase.checkout.payment-option-item.details.render': RenderExtension<\n PaymentOptionItemApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.payment-option-item.details.render'>,\n AnyCheckoutComponentExcept<'Image' | 'Banner'>\n >;\n /**\n * A static extension target that renders the form fields for a payment method when selected by the buyer.\n *\n * @private\n * @deprecated Use `purchase.checkout.payment-option-item.details.render` instead.\n */\n 'Checkout::PaymentMethod::Render': RenderExtension<\n PaymentOptionItemApi &\n CheckoutApi &\n StandardApi<'Checkout::PaymentMethod::Render'>,\n AnyCheckoutComponentExcept<'Image' | 'Banner'>\n >;\n /**\n * A static extension target that renders after the hosted fields of a credit card payment method.\n *\n * @private\n */\n 'purchase.checkout.payment-option-item.hosted-fields.render-after': RenderExtension<\n PaymentOptionItemApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.payment-option-item.hosted-fields.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders after the hosted fields of a credit card payment method.\n * for a credit card payment method when selected by the buyer.\n *\n * @private\n * @deprecated Use `purchase.checkout.payment-option-item.hosted-fields.render-after` instead.\n */\n 'Checkout::PaymentMethod::HostedFields::RenderAfter': RenderExtension<\n PaymentOptionItemApi &\n CheckoutApi &\n StandardApi<'Checkout::PaymentMethod::HostedFields::RenderAfter'>,\n AnyCheckoutComponentExcept<'Image' | 'Banner'>\n >;\n /**\n * A static extension target that renders a form modal when a buyer selects the custom onsite payment method.\n *\n * @private\n */\n 'purchase.checkout.payment-option-item.action-required.render': RenderExtension<\n CheckoutApi &\n StandardApi<'purchase.checkout.payment-option-item.action-required.render'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders a form modal when a buyer selects the custom onsite payment method.\n *\n * @private\n * @deprecated Use `purchase.checkout.payment-option-item.action-required.render` instead.\n */\n 'Checkout::PaymentMethod::RenderRequiredAction': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::PaymentMethod::RenderRequiredAction'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders between the payment heading and payment method list.\n *\n */\n 'purchase.checkout.payment-method-list.render-before': RenderExtension<\n CheckoutApi &\n StandardApi<'purchase.checkout.payment-method-list.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders below the list of payment methods.\n *\n */\n 'purchase.checkout.payment-method-list.render-after': RenderExtension<\n CheckoutApi &\n StandardApi<'purchase.checkout.payment-method-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered in the order summary, before the discount form element.\n */\n 'purchase.checkout.reductions.render-before': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.reductions.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered in the order summary, before the discount form element.\n *\n * @deprecated Use `purchase.checkout.reductions.render-before` instead.\n * @private\n */\n 'Checkout::Reductions::RenderBefore': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Reductions::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered in the order summary, after the discount form\n * and discount tag elements.\n */\n 'purchase.checkout.reductions.render-after': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.reductions.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered in the order summary, after the discount form\n * and discount tag elements.\n *\n * @deprecated Use `purchase.checkout.reductions.render-after` instead.\n * @private\n */\n 'Checkout::Reductions::RenderAfter': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Reductions::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered between the shipping method\n * header and shipping method options.\n */\n 'purchase.checkout.shipping-option-list.render-before': RenderExtension<\n ShippingOptionListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.shipping-option-list.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered between the shipping method\n * header and shipping method options.\n *\n * @deprecated Use `purchase.checkout.shipping-option-list.render-before` instead.\n * @private\n */\n 'Checkout::ShippingMethods::RenderBefore': RenderExtension<\n ShippingOptionListApi &\n CheckoutApi &\n StandardApi<'Checkout::ShippingMethods::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the shipping method\n * options.\n */\n 'purchase.checkout.shipping-option-list.render-after': RenderExtension<\n ShippingOptionListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.shipping-option-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the shipping method\n * options.\n *\n * @deprecated Use `purchase.checkout.shipping-option-list.render-after` instead.\n * @private\n */\n 'Checkout::ShippingMethods::RenderAfter': RenderExtension<\n ShippingOptionListApi &\n CheckoutApi &\n StandardApi<'Checkout::ShippingMethods::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered before pickup location options.\n */\n 'purchase.checkout.pickup-location-list.render-before': RenderExtension<\n PickupLocationListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.pickup-location-list.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered before pickup location options.\n *\n * @deprecated Use `purchase.checkout.pickup-location-list.render-before` instead.\n * @private\n */\n 'Checkout::PickupLocations::RenderBefore': RenderExtension<\n PickupLocationListApi &\n CheckoutApi &\n StandardApi<'Checkout::PickupLocations::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after pickup location options.\n */\n 'purchase.checkout.pickup-location-list.render-after': RenderExtension<\n PickupLocationListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.pickup-location-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after pickup location options.\n *\n * @deprecated Use `purchase.checkout.pickup-location-list.render-after` instead.\n * @private\n */\n 'Checkout::PickupLocations::RenderAfter': RenderExtension<\n PickupLocationListApi &\n CheckoutApi &\n StandardApi<'Checkout::PickupLocations::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the shipping method\n * details within the shipping method option list, for each option.\n */\n 'purchase.checkout.shipping-option-item.render-after': RenderExtension<\n ShippingOptionItemApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.shipping-option-item.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the shipping method\n * details within the shipping method option list, for each option.\n *\n * @deprecated Use `purchase.checkout.shipping-option-item.render-after` instead.\n * @private\n */\n 'Checkout::ShippingMethodDetails::RenderAfter': RenderExtension<\n ShippingOptionItemApi &\n CheckoutApi &\n StandardApi<'Checkout::ShippingMethodDetails::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered under the shipping method\n * within the shipping method option list, for each option.\n */\n 'purchase.checkout.shipping-option-item.details.render': RenderExtension<\n ShippingOptionItemApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.shipping-option-item.details.render'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered under the shipping method\n * within the shipping method option list, for each option.\n *\n * @deprecated Use `purchase.checkout.shipping-option-item.details.render` instead.\n * @private\n */\n 'Checkout::ShippingMethodDetails::RenderExpanded': RenderExtension<\n ShippingOptionItemApi &\n CheckoutApi &\n StandardApi<'Checkout::ShippingMethodDetails::RenderExpanded'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately before the pickup points.\n */\n 'purchase.checkout.pickup-point-list.render-before': RenderExtension<\n PickupPointListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.pickup-point-list.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately before the pickup points.\n *\n * @deprecated Use `purchase.checkout.pickup-point-list.render-before` instead.\n * @private\n */\n 'Checkout::PickupPoints::RenderBefore': RenderExtension<\n PickupPointListApi &\n CheckoutApi &\n StandardApi<'Checkout::PickupPoints::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately after the pickup points.\n */\n 'purchase.checkout.pickup-point-list.render-after': RenderExtension<\n PickupPointListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.pickup-point-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately after the pickup points.\n *\n * @deprecated Use `purchase.checkout.pickup-point-list.render-after` instead.\n * @private\n */\n 'Checkout::PickupPoints::RenderAfter': RenderExtension<\n PickupPointListApi &\n CheckoutApi &\n StandardApi<'Checkout::PickupPoints::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the pickup location\n * details within the local pickup option list, for each option.\n */\n 'purchase.checkout.pickup-location-option-item.render-after': RenderExtension<\n PickupLocationItemApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.pickup-location-option-item.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered below the header.\n */\n 'purchase.checkout.header.render-after': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.header.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered below the footer.\n */\n 'purchase.checkout.footer.render-after': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.footer.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered on top of the checkout page as an overlay.\n * It is positioned in the bottom right corner of the screen.\n */\n 'purchase.checkout.chat.render': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.chat.render'>,\n AllowedComponents<'Chat'>\n >;\n /**\n * A static extension target that is rendered below the header on the **Thank you** page.\n */\n 'purchase.thank-you.header.render-after': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'purchase.thank-you.header.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered below the footer on the **Thank you** page.\n */\n 'purchase.thank-you.footer.render-after': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'purchase.thank-you.footer.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered on top of the **Thank you page** as an overlay.\n * It is positioned in the bottom right corner of the screen.\n */\n 'purchase.thank-you.chat.render': RenderExtension<\n OrderConfirmationApi & StandardApi<'purchase.thank-you.chat.render'>,\n AllowedComponents<'Chat'>\n >;\n /**\n * A static extension target that is rendered on top of the **Thank you page** as a dismissable announcement.\n */\n 'purchase.thank-you.announcement.render': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'purchase.thank-you.announcement.render'>,\n AnyThankYouComponent\n >;\n}" + "value": "export interface RenderExtensionTargets {\n /**\n * A static extension target that is rendered immediately before any actions within each step.\n */\n 'purchase.checkout.actions.render-before': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.actions.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately before any actions within each step.\n *\n * @deprecated Use `purchase.checkout.actions.render-before` instead.\n * @private\n */\n 'Checkout::Actions::RenderBefore': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Actions::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after all line items.\n */\n 'purchase.checkout.cart-line-list.render-after': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.cart-line-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after all line items.\n *\n * @deprecated Use `purchase.checkout.cart-line-list.render-after` instead.\n * @private\n */\n 'Checkout::CartLines::RenderAfter': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::CartLines::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every line item, inside the details\n * under the line item properties element.\n */\n 'purchase.checkout.cart-line-item.render-after': RenderExtension<\n CheckoutApi &\n CartLineItemApi &\n StandardApi<'purchase.checkout.cart-line-item.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every line item, inside the details\n * under the line item properties element.\n *\n * @deprecated Use `purchase.checkout.cart-line-item.render-after` instead.\n * @private\n */\n 'Checkout::CartLineDetails::RenderAfter': RenderExtension<\n CheckoutApi &\n CartLineItemApi &\n StandardApi<'Checkout::CartLineDetails::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every bundle line item, inside the details\n * under the line item properties element. It replaces the default bundle products rendering.\n * @private\n */\n 'purchase.cart-line-item.line-components.render': RenderExtension<\n CartLineItemApi &\n StandardApi<'purchase.cart-line-item.line-components.render'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every bundle line item, inside the details\n * under the line item properties element. It replaces the default bundle products rendering.\n *\n * @deprecated Use `purchase.cart-line-item.line-components.render` instead.\n * @private\n */\n 'Checkout::CartLineDetails::RenderLineComponents': RenderExtension<\n CartLineItemApi &\n StandardApi<'Checkout::CartLineDetails::RenderLineComponents'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately after the contact form element.\n */\n 'purchase.checkout.contact.render-after': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.contact.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately after the contact form element.\n *\n * @deprecated Use `purchase.checkout.contact.render-after` instead.\n * @private\n */\n 'Checkout::Contact::RenderAfter': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Contact::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after a purchase below the customer information.\n *\n * @deprecated Use `purchase.thank-you.customer-information.render-after` or\n * `customer-account.order-status.customer-information.render-after` from `@shopify/ui-extension/customer-account` instead.\n * @private\n */\n 'Checkout::CustomerInformation::RenderAfter': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::CustomerInformation::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered between the shipping address header\n * and shipping address form elements.\n */\n 'purchase.checkout.delivery-address.render-before': RenderExtension<\n CheckoutApi &\n StandardApi<'purchase.checkout.delivery-address.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered between the shipping address header\n * and shipping address form elements.\n *\n * @deprecated Use `purchase.checkout.delivery-address.render-before` instead.\n * @private\n */\n 'Checkout::DeliveryAddress::RenderBefore': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::DeliveryAddress::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the shipping address form elements.\n */\n 'purchase.checkout.delivery-address.render-after': RenderExtension<\n CheckoutApi &\n StandardApi<'purchase.checkout.delivery-address.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature.\n * Unlike static extension targets, block extension targets render where the merchant\n * sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n *\n * The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development\n * by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).\n */\n 'purchase.checkout.block.render': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.block.render'>,\n AnyCheckoutComponent\n >;\n /**\n * A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that isn't tied to a specific checkout section or feature.\n * Unlike static extension targets, block extension targets render where the merchant\n * sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n *\n * The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development\n * by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).\n *\n * @deprecated Use `purchase.checkout.block.render` instead.\n * @private\n */\n 'Checkout::Dynamic::Render': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Dynamic::Render'>,\n AnyCheckoutComponent\n >;\n /**\n * A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page.\n * Unlike static extension targets, block extension targets render where the merchant\n * sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n *\n * The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development\n * by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).\n *\n */\n 'purchase.thank-you.block.render': RenderExtension<\n OrderConfirmationApi & StandardApi<'purchase.thank-you.block.render'>,\n AnyCheckoutComponent\n >;\n /**\n * A [block extension target](/docs/api/checkout-ui-extensions/extension-targets-overview#block-extension-targets) that renders exclusively on the **Thank you** page.\n * Unlike static extension targets, block extension targets render where the merchant\n * sets them using the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor).\n *\n * The [supported locations](/docs/api/checkout-ui-extensions/extension-targets-overview#supported-locations) for block extension targets can be previewed during development\n * by [using a URL parameter](/docs/apps/checkout/best-practices/testing-ui-extensions#block-extension-targets).\n *\n * @deprecated Use `purchase.thank-you.block.render` instead.\n * @private\n */\n 'Checkout::ThankYou::Dynamic::Render': RenderExtension<\n OrderConfirmationApi & StandardApi<'Checkout::ThankYou::Dynamic::Render'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every line item, inside the details\n * under the line item properties element on the **Thank you** page.\n */\n 'purchase.thank-you.cart-line-item.render-after': RenderExtension<\n OrderConfirmationApi &\n CartLineItemApi &\n StandardApi<'purchase.thank-you.cart-line-item.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders on every line item, inside the details\n * under the line item properties element on the **Thank you** page.\n *\n * @deprecated Use `purchase.thank-you.cart-line-item.render-after` instead.\n * @private\n */\n 'Checkout::ThankYou::CartLineDetails::RenderAfter': RenderExtension<\n OrderConfirmationApi &\n CartLineItemApi &\n StandardApi<'Checkout::ThankYou::CartLineDetails::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after all line items on the **Thank you** page.\n */\n 'purchase.thank-you.cart-line-list.render-after': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'purchase.thank-you.cart-line-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after all line items on the **Thank you** page.\n *\n * @deprecated Use `purchase.thank-you.cart-line-list.render-after` instead.\n * @private\n */\n 'Checkout::ThankYou::CartLines::RenderAfter': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'Checkout::ThankYou::CartLines::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.\n */\n 'purchase.thank-you.customer-information.render-after': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'purchase.thank-you.customer-information.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after a purchase below the customer information on the **Thank you** page.\n *\n * @deprecated Use `purchase.thank-you.customer-information.render-after` instead.\n * @private\n */\n 'Checkout::ThankYou::CustomerInformation::RenderAfter': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'Checkout::ThankYou::CustomerInformation::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders the gift card entry form fields after\n * the buyer ticks a box to use a gift card. This does not replace the\n * native gift card entry form which is rendered in a separate part of checkout.\n *\n * @private\n */\n 'purchase.checkout.gift-card.render': RenderExtension<\n RedeemableApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.gift-card.render'>,\n AnyCheckoutComponentExcept<'Image' | 'Banner'>\n >;\n /**\n * A static extension target that renders the gift card entry form fields after\n * the buyer ticks a box to use a gift card. This does not replace the\n * native gift card entry form which is rendered in a separate part of checkout.\n *\n * @private\n * @deprecated Use `purchase.checkout.gift-card.render` instead.\n */\n 'Checkout::GiftCard::Render': RenderExtension<\n RedeemableApi & CheckoutApi & StandardApi<'Checkout::GiftCard::Render'>,\n AnyCheckoutComponentExcept<'Image' | 'Banner'>\n >;\n /**\n * A static extension target that renders the form fields for a payment method when selected by the buyer.\n *\n * @private\n */\n 'purchase.checkout.payment-option-item.details.render': RenderExtension<\n PaymentOptionItemApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.payment-option-item.details.render'>,\n AnyCheckoutComponentExcept<'Image' | 'Banner'>\n >;\n /**\n * A static extension target that renders the form fields for a payment method when selected by the buyer.\n *\n * @private\n * @deprecated Use `purchase.checkout.payment-option-item.details.render` instead.\n */\n 'Checkout::PaymentMethod::Render': RenderExtension<\n PaymentOptionItemApi &\n CheckoutApi &\n StandardApi<'Checkout::PaymentMethod::Render'>,\n AnyCheckoutComponentExcept<'Image' | 'Banner'>\n >;\n /**\n * A static extension target that renders after the hosted fields of a credit card payment method.\n *\n * @private\n */\n 'purchase.checkout.payment-option-item.hosted-fields.render-after': RenderExtension<\n PaymentOptionItemApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.payment-option-item.hosted-fields.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders after the hosted fields of a credit card payment method.\n * for a credit card payment method when selected by the buyer.\n *\n * @private\n * @deprecated Use `purchase.checkout.payment-option-item.hosted-fields.render-after` instead.\n */\n 'Checkout::PaymentMethod::HostedFields::RenderAfter': RenderExtension<\n PaymentOptionItemApi &\n CheckoutApi &\n StandardApi<'Checkout::PaymentMethod::HostedFields::RenderAfter'>,\n AnyCheckoutComponentExcept<'Image' | 'Banner'>\n >;\n /**\n * A static extension target that renders a form modal when a buyer selects the custom onsite payment method.\n *\n * @private\n */\n 'purchase.checkout.payment-option-item.action-required.render': RenderExtension<\n CheckoutApi &\n StandardApi<'purchase.checkout.payment-option-item.action-required.render'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders a form modal when a buyer selects the custom onsite payment method.\n *\n * @private\n * @deprecated Use `purchase.checkout.payment-option-item.action-required.render` instead.\n */\n 'Checkout::PaymentMethod::RenderRequiredAction': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::PaymentMethod::RenderRequiredAction'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders between the payment heading and payment method list.\n *\n */\n 'purchase.checkout.payment-method-list.render-before': RenderExtension<\n CheckoutApi &\n StandardApi<'purchase.checkout.payment-method-list.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that renders below the list of payment methods.\n *\n */\n 'purchase.checkout.payment-method-list.render-after': RenderExtension<\n CheckoutApi &\n StandardApi<'purchase.checkout.payment-method-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered in the order summary, before the discount form element.\n */\n 'purchase.checkout.reductions.render-before': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.reductions.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered in the order summary, before the discount form element.\n *\n * @deprecated Use `purchase.checkout.reductions.render-before` instead.\n * @private\n */\n 'Checkout::Reductions::RenderBefore': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Reductions::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered in the order summary, after the discount form\n * and discount tag elements.\n */\n 'purchase.checkout.reductions.render-after': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.reductions.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered in the order summary, after the discount form\n * and discount tag elements.\n *\n * @deprecated Use `purchase.checkout.reductions.render-after` instead.\n * @private\n */\n 'Checkout::Reductions::RenderAfter': RenderExtension<\n CheckoutApi & StandardApi<'Checkout::Reductions::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered between the shipping method\n * header and shipping method options.\n */\n 'purchase.checkout.shipping-option-list.render-before': RenderExtension<\n ShippingOptionListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.shipping-option-list.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered between the shipping method\n * header and shipping method options.\n *\n * @deprecated Use `purchase.checkout.shipping-option-list.render-before` instead.\n * @private\n */\n 'Checkout::ShippingMethods::RenderBefore': RenderExtension<\n ShippingOptionListApi &\n CheckoutApi &\n StandardApi<'Checkout::ShippingMethods::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the shipping method\n * options.\n */\n 'purchase.checkout.shipping-option-list.render-after': RenderExtension<\n ShippingOptionListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.shipping-option-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the shipping method\n * options.\n *\n * @deprecated Use `purchase.checkout.shipping-option-list.render-after` instead.\n * @private\n */\n 'Checkout::ShippingMethods::RenderAfter': RenderExtension<\n ShippingOptionListApi &\n CheckoutApi &\n StandardApi<'Checkout::ShippingMethods::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered before pickup location options.\n */\n 'purchase.checkout.pickup-location-list.render-before': RenderExtension<\n PickupLocationListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.pickup-location-list.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered before pickup location options.\n *\n * @deprecated Use `purchase.checkout.pickup-location-list.render-before` instead.\n * @private\n */\n 'Checkout::PickupLocations::RenderBefore': RenderExtension<\n PickupLocationListApi &\n CheckoutApi &\n StandardApi<'Checkout::PickupLocations::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after pickup location options.\n */\n 'purchase.checkout.pickup-location-list.render-after': RenderExtension<\n PickupLocationListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.pickup-location-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after pickup location options.\n *\n * @deprecated Use `purchase.checkout.pickup-location-list.render-after` instead.\n * @private\n */\n 'Checkout::PickupLocations::RenderAfter': RenderExtension<\n PickupLocationListApi &\n CheckoutApi &\n StandardApi<'Checkout::PickupLocations::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the shipping method\n * details within the shipping method option list, for each option.\n */\n 'purchase.checkout.shipping-option-item.render-after': RenderExtension<\n ShippingOptionItemApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.shipping-option-item.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the shipping method\n * details within the shipping method option list, for each option.\n *\n * @deprecated Use `purchase.checkout.shipping-option-item.render-after` instead.\n * @private\n */\n 'Checkout::ShippingMethodDetails::RenderAfter': RenderExtension<\n ShippingOptionItemApi &\n CheckoutApi &\n StandardApi<'Checkout::ShippingMethodDetails::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered under the shipping method\n * within the shipping method option list, for each option.\n */\n 'purchase.checkout.shipping-option-item.details.render': RenderExtension<\n ShippingOptionItemApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.shipping-option-item.details.render'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered under the shipping method\n * within the shipping method option list, for each option.\n *\n * @deprecated Use `purchase.checkout.shipping-option-item.details.render` instead.\n * @private\n */\n 'Checkout::ShippingMethodDetails::RenderExpanded': RenderExtension<\n ShippingOptionItemApi &\n CheckoutApi &\n StandardApi<'Checkout::ShippingMethodDetails::RenderExpanded'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately before the pickup points.\n */\n 'purchase.checkout.pickup-point-list.render-before': RenderExtension<\n PickupPointListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.pickup-point-list.render-before'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately before the pickup points.\n *\n * @deprecated Use `purchase.checkout.pickup-point-list.render-before` instead.\n * @private\n */\n 'Checkout::PickupPoints::RenderBefore': RenderExtension<\n PickupPointListApi &\n CheckoutApi &\n StandardApi<'Checkout::PickupPoints::RenderBefore'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately after the pickup points.\n */\n 'purchase.checkout.pickup-point-list.render-after': RenderExtension<\n PickupPointListApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.pickup-point-list.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered immediately after the pickup points.\n *\n * @deprecated Use `purchase.checkout.pickup-point-list.render-after` instead.\n * @private\n */\n 'Checkout::PickupPoints::RenderAfter': RenderExtension<\n PickupPointListApi &\n CheckoutApi &\n StandardApi<'Checkout::PickupPoints::RenderAfter'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered after the pickup location\n * details within the local pickup option list, for each option.\n */\n 'purchase.checkout.pickup-location-option-item.render-after': RenderExtension<\n PickupLocationItemApi &\n CheckoutApi &\n StandardApi<'purchase.checkout.pickup-location-option-item.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered below the header.\n */\n 'purchase.checkout.header.render-after': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.header.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered below the footer.\n */\n 'purchase.checkout.footer.render-after': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.footer.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered on top of the checkout page as an overlay.\n * It is positioned in the bottom right corner of the screen.\n */\n 'purchase.checkout.chat.render': RenderExtension<\n CheckoutApi & StandardApi<'purchase.checkout.chat.render'>,\n AllowedComponents<'Chat'>\n >;\n /**\n * A static extension target that is rendered below the header on the **Thank you** page.\n */\n 'purchase.thank-you.header.render-after': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'purchase.thank-you.header.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered below the footer on the **Thank you** page.\n */\n 'purchase.thank-you.footer.render-after': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'purchase.thank-you.footer.render-after'>,\n AnyCheckoutComponent\n >;\n /**\n * A static extension target that is rendered on top of the **Thank you page** as an overlay.\n * It is positioned in the bottom right corner of the screen.\n */\n 'purchase.thank-you.chat.render': RenderExtension<\n OrderConfirmationApi & StandardApi<'purchase.thank-you.chat.render'>,\n AllowedComponents<'Chat'>\n >;\n /**\n * A static extension target that is rendered on top of the **Thank you page** as a dismissable announcement.\n */\n 'purchase.thank-you.announcement.render': RenderExtension<\n OrderConfirmationApi &\n StandardApi<'purchase.thank-you.announcement.render'>,\n AnyThankYouComponent\n >;\n}" } }, "RunnableExtensionTargets": { @@ -8343,7 +8287,7 @@ "syntaxKind": "PropertySignature", "name": "billingAddress", "value": "SubscribableSignalLike", - "description": "The proposed customer billing address. The address updates when the field is committed (on change) rather than every keystroke. The property is available only if the extension has access to protected customer data. The subscribable value is `undefined` if the billing address hasn't been provided yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The proposed customer billing address. The address updates when the field is committed (on change) rather than every keystroke. The property is available only if the extension has access to protected customer data. The subscribable value is `undefined` if the billing address hasn't been provided yet.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true }, { @@ -8351,7 +8295,7 @@ "syntaxKind": "PropertySignature", "name": "shippingAddress", "value": "SubscribableSignalLike", - "description": "The proposed customer shipping address. During the information step, the address updates when the field is committed (on change) rather than every keystroke. The property is available only if the extension has access to protected customer data. When available, the subscribable value is `undefined` if delivery isn't required.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "The proposed customer shipping address. During the information step, the address updates when the field is committed (on change) rather than every keystroke. The property is available only if the extension has access to protected customer data. When available, the subscribable value is `undefined` if delivery isn't required.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true } ], @@ -8370,7 +8314,7 @@ "syntaxKind": "MethodSignature", "name": "applyShippingAddressChange", "value": "(change: ShippingAddressUpdateChange) => Promise", - "description": "Updates the buyer's shipping address on the checkout. The provided fields are merged into the existing address without prompting the buyer. On success, the `shippingAddress` property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "Updates the buyer's shipping address on the checkout. The provided fields are merged into the existing address without prompting the buyer. On success, the `shippingAddress` property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true } ], @@ -8407,7 +8351,7 @@ "syntaxKind": "MethodSignature", "name": "applyAttributeChange", "value": "(change: AttributeChange) => Promise", - "description": "Updates or removes an attribute on the cart and checkout. On success, the [`attributes`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/attributes#properties-propertydetail-attributes) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.", + "description": "Updates or removes an attribute on the cart and checkout. On success, the [`attributes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/attributes#standardapi-propertydetail-attributes) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.", "deprecationMessage": "Use cart metafields instead." } ], @@ -8426,7 +8370,7 @@ "syntaxKind": "PropertySignature", "name": "buyerIdentity", "value": "BuyerIdentity", - "description": "Information about the buyer that's interacting with the checkout. The property is available only if the extension has access to protected customer data.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data).", + "description": "Information about the buyer that's interacting with the checkout. The property is available only if the extension has access to protected customer data.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true } ], @@ -8445,7 +8389,7 @@ "syntaxKind": "PropertySignature", "name": "buyerJourney", "value": "BuyerJourney", - "description": "Provides details on the buyer's progression through the checkout and lets you intercept navigation to validate data before the buyer continues.\n\nRefer to [buyer journey](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/buyer-journey#examples) examples for more information." + "description": "Provides details on the buyer's progression through the checkout and lets you intercept navigation to validate data before the buyer continues.\n\nRefer to [buyer journey](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/buyer-journey#examples) examples for more information." } ], "value": "export interface Docs_Standard_BuyerJourneyApi\n extends Pick {}" @@ -8463,7 +8407,7 @@ "syntaxKind": "PropertySignature", "name": "instructions", "value": "SubscribableSignalLike", - "description": "The cart instructions used to create the checkout and possibly limit extension capabilities.\n\nThese instructions should be checked before performing any actions that might be affected by them.\n\nFor example, if you intend to add a discount code via the `applyDiscountCodeChange` method, check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout.\n\n> Caution: Check cart instructions before calling select APIs, as > some may not be available. See the > [Cart Instructions API](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#examples) > for more information." + "description": "The cart instructions used to create the checkout and possibly limit extension capabilities.\n\nThese instructions should be checked before performing any actions that might be affected by them.\n\nFor example, if you intend to add a discount code via the `applyDiscountCodeChange` method, check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout.\n\n> Caution: As of version `2024-07`, UI extension code must check for instructions before calling select APIs in case those APIs aren't available. See the [update guide](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#examples) for more information." } ], "value": "export interface Docs_Standard_CartInstructionsApi\n extends Pick {}" @@ -8499,7 +8443,7 @@ "syntaxKind": "MethodSignature", "name": "applyCartLinesChange", "value": "(change: CartLineChange) => Promise", - "description": "Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-lines#properties-propertydetail-lines) property updates with the new state.\n\nAccepts a single change per call. To make multiple changes, call this method separately for each one.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "description": "Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-lines#standardapi-propertydetail-lines) property updates with the new state.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." } ], "value": "export interface Docs_Checkout_CartLinesApi\n extends Pick {}" @@ -8517,7 +8461,7 @@ "syntaxKind": "PropertySignature", "name": "target", "value": "SubscribableSignalLike", - "description": "The cart line that this extension is attached to. Use this to read the line item's merchandise, quantity, cost, and attributes.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties.\n\n> Note: Until version `2023-04`, this property was a `ReadonlySignalLike`." + "description": "The cart line that this extension is attached to. Use this to read the line item's merchandise, quantity, cost, and attributes.\n\n> Note: Until version `2023-04`, this property was a `ReadonlySignalLike`." } ], "value": "export interface Docs_CartLineItem_CartLinesApi\n extends Pick {}" @@ -8553,14 +8497,14 @@ "syntaxKind": "PropertySignature", "name": "i18n", "value": "I18n", - "description": "Utilities for translating strings, formatting currencies, numbers, and dates according to the buyer's locale. Use alongside [`localization`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization) to build fully localized extensions." + "description": "Utilities for translating strings, formatting currencies, numbers, and dates according to the buyer's locale. Use alongside [`localization`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization) to build fully localized extensions." }, { "filePath": "src/surfaces/checkout/api/docs.ts", "syntaxKind": "PropertySignature", "name": "localization", "value": "Localization", - "description": "The buyer's language, country, currency, and timezone context. For formatting and translation helpers, use the [`i18n`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization#properties-propertydetail-i18n) object instead." + "description": "The buyer's language, country, currency, and timezone context. For formatting and translation helpers, use the [`i18n`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization#standardapi-propertydetail-i18n) object instead." } ], "value": "export interface Docs_Standard_LocalizationApi\n extends Pick {}" @@ -8597,7 +8541,7 @@ "syntaxKind": "PropertySignature", "name": "appMetafields", "value": "SubscribableSignalLike", - "description": "The metafields requested in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.\n\nApp owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` isn't supported. See [app owned metafields](https://shopify.dev/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "description": "The metafields requested in the [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file. These metafields are updated when there's a change in the merchandise items being purchased by the customer.\n\nApp owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` isn't supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." } ], "value": "export interface Docs_Standard_MetafieldsApi\n extends Pick {}" @@ -8615,7 +8559,7 @@ "syntaxKind": "MethodSignature", "name": "applyMetafieldChange", "value": "(change: MetafieldChange) => Promise", - "description": "Creates, updates, or removes a cart metafield on the checkout. On success, the [`metafields`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/metafields#properties-propertydetail-metafields) property updates to reflect the change.\n\nCart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](https://shopify.dev/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "description": "Creates, updates, or removes a cart metafield on the checkout. On success, the [`metafields`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/metafields#standardapi-propertydetail-metafields) property updates to reflect the change.\n\nCart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." } ], "value": "export interface Docs_Checkout_MetafieldsApi\n extends Pick {}" @@ -8633,7 +8577,7 @@ "syntaxKind": "PropertySignature", "name": "deliveryGroups", "value": "SubscribableSignalLike", - "description": "The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items.\n\nEmpty until the buyer enters enough address information for Shopify to calculate shipping rates." + "description": "The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items." } ], "value": "export interface Docs_Standard_DeliveryApi\n extends Pick {}" @@ -8651,7 +8595,7 @@ "syntaxKind": "PropertySignature", "name": "checkoutToken", "value": "SubscribableSignalLike", - "description": "A stable ID that represents the current checkout.\n\nThe value is `undefined` when the checkout hasn't been created on the server yet.\n\nUse this to correlate checkout sessions across your extension, web pixels, and backend systems.\n\nThis matches the `data.checkout.token` field in a [checkout-related WebPixel event](https://shopify.dev/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data) and the `checkout_token` field in the [REST Admin API `Order` resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object).\n\nCan be `undefined`. Handle the `undefined` state before using the value." + "description": "A stable ID that represents the current checkout.\n\nThe value is `undefined` when the checkout hasn't been created on the server yet.\n\nUse this to correlate checkout sessions across your extension, web pixels, and backend systems.\n\nThis matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data) and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object)." } ], "value": "export interface Docs_Standard_CheckoutTokenApi\n extends Pick {}" @@ -8741,7 +8685,7 @@ "syntaxKind": "MethodSignature", "name": "applyNoteChange", "value": "(change: NoteChange) => Promise", - "description": "Sets or removes the buyer's note on the checkout. On success, the [`note`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/note#properties-propertydetail-note) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "description": "Sets or removes the buyer's note on the checkout. On success, the [`note`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/note#standardapi-propertydetail-note) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." } ], "value": "export interface Docs_Checkout_NoteApi\n extends Pick {}" @@ -8759,14 +8703,14 @@ "syntaxKind": "PropertySignature", "name": "availablePaymentOptions", "value": "SubscribableSignalLike", - "description": "All payment options available to the buyer for this checkout, such as credit cards, wallets, and local payment methods. The list depends on the shop's payment configuration and the buyer's region.\n\nThe set of payment options can change when the buyer updates their address or cart, so subscribe to changes rather than reading once during initialization. Each option exposes `handle` and `type` only. Provider names, logos, fees, and installment terms aren't available." + "description": "All payment options available to the buyer for this checkout, such as credit cards, wallets, and local payment methods. The list depends on the shop's payment configuration and the buyer's region." }, { "filePath": "src/surfaces/checkout/api/docs.ts", "syntaxKind": "PropertySignature", "name": "selectedPaymentOptions", "value": "SubscribableSignalLike", - "description": "The payment options the buyer has currently selected. This updates as the buyer changes their payment method. The array can contain multiple entries when the buyer splits payment across methods (for example, a gift card and a credit card).\n\nEach option exposes `handle` and `type` only. Provider names, logos, fees, and installment terms aren't available." + "description": "The payment options the buyer has currently selected. This updates as the buyer changes their payment method. The array can contain multiple entries when the buyer splits payment across methods (for example, a gift card and a credit card)." } ], "value": "export interface Docs_Standard_PaymentOptionsApi\n extends Pick<\n StandardApi,\n 'availablePaymentOptions' | 'selectedPaymentOptions'\n > {}" @@ -8802,7 +8746,7 @@ "syntaxKind": "MethodSignature", "name": "applyGiftCardChange", "value": "(change: GiftCardChange) => Promise", - "description": "Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/gift-cards#properties-propertydetail-appliedgiftcards) property updates with the new state.\n\nUnlike other write operations, gift card changes aren't gated by a cart instruction flag.\n\n> Caution: > See [security considerations](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves gift card codes through a network call.\n\n> Note: This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "description": "Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/gift-cards#standardapi-propertydetail-appliedgiftcards) property updates with the new state.\n\n> Caution: > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves gift card codes through a network call.\n\n> Note: This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." } ], "value": "export interface Docs_Checkout_GiftCardsApi\n extends Pick {}" @@ -8820,7 +8764,7 @@ "syntaxKind": "PropertySignature", "name": "discountAllocations", "value": "SubscribableSignalLike", - "description": "The discount allocations applied to the entire cart, including automatic discounts, code-based discounts, and custom discounts from [Shopify Functions](https://shopify.dev/docs/apps/build/functions). Each allocation indicates how much was discounted and how the discount was triggered." + "description": "The discount allocations applied to the entire cart, including automatic discounts, code-based discounts, and custom discounts from [Shopify Functions](/docs/apps/build/functions). Each allocation indicates how much was discounted and how the discount was triggered." }, { "filePath": "src/surfaces/checkout/api/docs.ts", @@ -8845,7 +8789,7 @@ "syntaxKind": "MethodSignature", "name": "applyDiscountCodeChange", "value": "(change: DiscountCodeChange) => Promise", - "description": "Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/discounts#properties-propertydetail-discountcodes) property updates with the new state.\n\n> Caution: > See [security considerations](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves discount codes through a network call.\n\n> Note: This method returns an error if the [cart instruction](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "description": "Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/discounts#standardapi-propertydetail-discountcodes) property updates with the new state.\n\n> Caution: > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves discount codes through a network call.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." } ], "value": "export interface Docs_Checkout_DiscountsApi\n extends Pick {}" @@ -8881,7 +8825,7 @@ "syntaxKind": "PropertySignature", "name": "settings", "value": "SubscribableSignalLike", - "description": "The settings matching the settings definition written in the [`shopify.extension.toml`](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n\n Refer to [settings examples](https://shopify.dev/docs/api/checkout-ui-extensions/{API_VERSION}/apis/settings#examples) for more information.\n\n> Note: When an extension is being installed in the editor, the settings are empty until a merchant sets a value. In that case, this object updates in real time as a merchant fills in the settings." + "description": "The settings matching the settings definition written in the [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n\n Refer to [settings examples](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/settings#examples) for more information.\n\n> Note: When an extension is being installed in the editor, the settings are empty until a merchant sets a value. In that case, this object updates in real time as a merchant fills in the settings." } ], "value": "export interface Docs_Standard_SettingsApi\n extends Pick {}" @@ -8899,7 +8843,7 @@ "syntaxKind": "PropertySignature", "name": "storage", "value": "Storage", - "description": "Key-value storage that persists across page loads within the current checkout session. Data is shared across all activated targets associated with this extension.\n\n> Caution: Data persistence isn't guaranteed and storage is cleared when the buyer starts a new checkout." + "description": "Key-value storage that persists across page loads within the current checkout session. Data is shared across all activated extension targets of this extension.\n\n> Caution: Data persistence isn't guaranteed and storage is cleared when the buyer starts a new checkout." } ], "value": "export interface Docs_Standard_StorageApi\n extends Pick {}" @@ -8917,7 +8861,7 @@ "syntaxKind": "PropertySignature", "name": "query", "value": ">(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "The method used to query the Storefront GraphQL API with a prefetched token." + "description": "The method used to query the Storefront GraphQL API with a prefetched token.\n\nRefer to [Storefront API access examples](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/storefront-api) for more information." } ], "value": "export interface Docs_Standard_QueryApi extends Pick {}" @@ -8935,7 +8879,7 @@ "syntaxKind": "PropertySignature", "name": "analytics", "value": "Analytics", - "description": "Tracks custom events and sends visitor information to [Web Pixels](https://shopify.dev/docs/apps/marketing). Use `publish()` to emit events and `visitor()` to submit buyer contact details." + "description": "Tracks custom events and sends visitor information to [Web Pixels](/docs/apps/marketing). Use `publish()` to emit events and `visitor()` to submit buyer contact details." } ], "value": "export interface Docs_Standard_AnalyticsApi\n extends Pick {}" @@ -8953,7 +8897,7 @@ "syntaxKind": "PropertySignature", "name": "applyTrackingConsentChange", "value": "ApplyTrackingConsentChangeType", - "description": "Enables setting and updating customer privacy consent settings and tracking consent metafields.\n\n> Note: Requires the [`collect_buyer_consent` capability](/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent) to be set to `true`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](https://shopify.dev/docs/apps/store/data-protection/protected-customer-data)." + "description": "Enables setting and updating customer privacy consent settings and tracking consent metafields.\n\n> Note: Requires the [`customer_privacy` capability](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent) to be set to `true`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/checkout/api/docs.ts", @@ -8966,1307 +8910,119 @@ "value": "export interface Docs_Standard_CustomerPrivacyApi\n extends Pick {}" } }, - "UseApiGeneratedType": { - "src/surfaces/checkout/preact/api.ts": { - "filePath": "src/surfaces/checkout/preact/api.ts", - "name": "UseApiGeneratedType", - "description": "Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties.\n\nFor example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout.\n\nFor a full list of the API available to each extension target, see the [ExtensionTargets type](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensiontargets).\n\n> Note: > As of version 2025-10, you no longer need this hook. The full API object is accessible via > the global `shopify` object.", - "isPublicDocs": true, - "params": [ - { - "name": "_target", - "description": "", - "value": "Target extends keyof RenderExtensionTargets", - "isOptional": true, - "filePath": "src/surfaces/checkout/preact/api.ts" - } - ], - "returns": { - "filePath": "src/surfaces/checkout/preact/api.ts", - "description": "", - "name": "ApiForExtension", - "value": "ApiForExtension" - }, - "value": "export function useApi<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(_target?: Target): ApiForExtension {\n const api = (globalThis as any)?.shopify as ApiForExtension;\n\n if (!api) {\n throw new CheckoutUIExtensionError(\n 'You can only call this hook when running as a checkout UI extension on at least API version 2025-10.',\n );\n }\n return api;\n}" - } - }, - "UseExtensionApiGeneratedType": { - "src/surfaces/checkout/preact/api.ts": { - "filePath": "src/surfaces/checkout/preact/api.ts", - "name": "UseExtensionApiGeneratedType", - "description": "Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties.\n\nFor example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](https://shopify.dev/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout.\n\nFor a full list of the API available to each extension target, see the [ExtensionTargets type](https://shopify.dev/docs/api/checkout-ui-extensions/apis/extensiontargets).\n\n> Caution: This is deprecated, use `useApi` instead.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/api.ts", - "description": "", - "name": "ApiForExtension", - "value": "ApiForExtension" - }, - "value": "export function useExtensionApi<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): ApiForExtension {\n return useApi();\n}" - } - }, - "UseSubscriptionGeneratedType": { - "src/surfaces/checkout/preact/subscription.ts": { - "filePath": "src/surfaces/checkout/preact/subscription.ts", - "name": "UseSubscriptionGeneratedType", - "description": "Subscribes to the special wrapper type that all \"changeable\" values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout.\n\n> Note: > As of version 2025-10, you no longer need this hook. When you access `.value` > (instead of `.current`) on subscribable properties, Preact will automatically > re-render as `.value` changes.", - "isPublicDocs": true, - "params": [ - { - "name": "subscription", - "description": "", - "value": "SubscribableSignalLike", - "filePath": "src/surfaces/checkout/preact/subscription.ts" - } - ], - "returns": { - "filePath": "src/surfaces/checkout/preact/subscription.ts", - "description": "", - "name": "Value", - "value": "Value" - }, - "value": "export function useSubscription(\n subscription: SubscribableSignalLike,\n): Value {\n const [, setValue] = useState(subscription.value);\n\n useEffect(() => {\n let didUnsubscribe = false;\n\n const checkForUpdates: Subscriber = (newValue) => {\n if (didUnsubscribe) {\n return;\n }\n\n setValue(newValue);\n };\n\n const unsubscribe = subscription.subscribe(checkForUpdates);\n\n // Because we're subscribing in a passive effect,\n // it's possible for an update to occur between render and the effect handler.\n // Check for this and schedule an update if work has occurred.\n checkForUpdates(subscription.value);\n\n return () => {\n didUnsubscribe = true;\n unsubscribe();\n };\n }, [subscription]);\n\n return subscription.value;\n}" - } - }, - "UseAppMetafieldsGeneratedType": { - "src/surfaces/checkout/preact/app-metafields.ts": { - "filePath": "src/surfaces/checkout/preact/app-metafields.ts", - "name": "UseAppMetafieldsGeneratedType", - "description": "Returns the metafields configured with `shopify.extension.toml`.", - "isPublicDocs": true, - "params": [ - { - "name": "filters", - "description": "", - "value": "AppMetafieldFilters", - "isOptional": true, - "defaultValue": "{}", - "filePath": "src/surfaces/checkout/preact/app-metafields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/checkout/preact/app-metafields.ts", - "description": "", - "name": "AppMetafieldEntry[]", - "value": "AppMetafieldEntry[]" - }, - "value": "export function useAppMetafields<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(filters: AppMetafieldFilters = {}): AppMetafieldEntry[] {\n const appMetafields = useSubscription(useApi().appMetafields);\n\n return useMemo(() => {\n if (filters.key && !filters.namespace) {\n throw new CheckoutUIExtensionError(\n 'You must pass in a namespace with a key',\n );\n }\n\n const filterKeys = Object.keys(filters) as AppMetafieldFilterKeys[];\n\n if (filterKeys.length) {\n return appMetafields.filter((app) => {\n return filterKeys.every((key) => {\n if (key === 'id' || key === 'type') {\n return app.target[key] === filters[key];\n }\n\n return app.metafield[key] === filters[key];\n });\n });\n }\n\n return appMetafields;\n }, [filters, appMetafields]);\n}" - } - }, - "AppMetafieldFilters": { - "src/surfaces/checkout/preact/app-metafields.ts": { - "filePath": "src/surfaces/checkout/preact/app-metafields.ts", - "name": "AppMetafieldFilters", - "description": "", + "BaseElementPropsWithChildren": { + "src/surfaces/checkout/components/Abbreviation.ts": { + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "name": "BaseElementPropsWithChildren", + "description": "Used when an element has children.", "members": [ { - "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", + "name": "children", + "value": "preact.ComponentChildren", "description": "", "isOptional": true }, { - "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", "syntaxKind": "PropertySignature", "name": "key", - "value": "string", + "value": "preact.Key", "description": "", "isOptional": true }, { - "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", "syntaxKind": "PropertySignature", - "name": "namespace", - "value": "string", - "description": "To filter for app owned metafields, use the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported.\n\nSee [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.", + "name": "ref", + "value": "preact.Ref", + "description": "", "isOptional": true }, { - "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", "syntaxKind": "PropertySignature", - "name": "type", - "value": "'customer' | 'product' | 'shop' | 'shopUser' | 'variant' | 'company' | 'companyLocation' | 'cart'", + "name": "slot", + "value": "Lowercase", "description": "", "isOptional": true } ], - "value": "interface AppMetafieldFilters {\n id?: AppMetafieldEntryTarget['id'];\n type?: AppMetafieldEntryTarget['type'];\n /**\n * To filter for app owned metafields, use the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported.\n *\n * See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n */\n namespace?: Metafield['namespace'];\n key?: Metafield['key'];\n}" + "value": "export interface BaseElementPropsWithChildren extends BaseElementProps {\n children?: preact.ComponentChildren;\n}" } }, - "UseAttributesGeneratedType": { - "src/surfaces/checkout/preact/attributes.ts": { - "filePath": "src/surfaces/checkout/preact/attributes.ts", - "name": "UseAttributesGeneratedType", - "description": "Returns the proposed `attributes` applied to the checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/attributes.ts", - "description": "", - "name": "Attribute[]", - "value": "Attribute[]" - }, - "value": "export function useAttributes<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Attribute[] {\n return useSubscription(useApi().attributes);\n}" + "ComponentChildren": { + "src/surfaces/checkout/components/components.ts": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ComponentChildren", + "value": "any", + "description": "TODO: Update `any` type here after this is resolved https://github.com/Shopify/ui-api-design/issues/139" } }, - "UseAttributeValuesGeneratedType": { - "src/surfaces/checkout/preact/attributes.ts": { - "filePath": "src/surfaces/checkout/preact/attributes.ts", - "name": "UseAttributeValuesGeneratedType", - "description": "Returns the values for the specified `attributes` applied to the checkout.", + "AbbreviationElementProps": { + "src/surfaces/checkout/components/Abbreviation.ts": { + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "name": "AbbreviationElementProps", + "description": "The element props interface for the Abbreviation component.", "isPublicDocs": true, - "params": [ + "members": [ { - "name": "keys", - "description": "An array of attribute keys.", - "value": "string[]", - "filePath": "src/surfaces/checkout/preact/attributes.ts" - } - ], - "returns": { - "filePath": "src/surfaces/checkout/preact/attributes.ts", - "description": "", - "name": "(string | undefined)[]", - "value": "(string | undefined)[]" - }, - "value": "export function useAttributeValues<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(keys: string[]): (string | undefined)[] {\n const attributes = useAttributes();\n\n if (!attributes.length) {\n return [];\n }\n\n return keys.map((key) => {\n const attribute = attributes.find((attribute) => attribute.key === key);\n return attribute?.value;\n });\n}" - } - }, - "UseApplyAttributeChangeGeneratedType": { - "src/surfaces/checkout/preact/attributes.ts": { - "filePath": "src/surfaces/checkout/preact/attributes.ts", - "name": "UseApplyAttributeChangeGeneratedType", - "description": "Returns a function to mutate the `attributes` property of the checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/attributes.ts", - "description": "", - "name": "(change: AttributeChange) => Promise", - "value": "(change: AttributeChange) => Promise" - }, - "value": "export function useApplyAttributeChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: AttributeChange) => Promise {\n const api = useApi();\n\n if ('applyAttributeChange' in api) {\n return api.applyAttributeChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyAttributeChange',\n api.extension.target,\n );\n}" - } - }, - "UseCustomerGeneratedType": { - "src/surfaces/checkout/preact/buyer-identity.ts": { - "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", - "name": "UseCustomerGeneratedType", - "description": "Returns the current `Customer`.\n\nThe value is `undefined` if the buyer isn't a known customer for this shop or if they haven't logged in yet.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", - "description": "", - "name": "Customer | undefined", - "value": "Customer | undefined" - }, - "value": "export function useCustomer<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Customer | undefined {\n const buyerIdentity = useApi().buyerIdentity;\n\n if (!buyerIdentity) {\n throw new ScopeNotGrantedError(\n 'Using buyer identity requires having personal customer data permissions granted to your app.',\n );\n }\n\n return useSubscription(buyerIdentity.customer);\n}" - } - }, - "UseEmailGeneratedType": { - "src/surfaces/checkout/preact/buyer-identity.ts": { - "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", - "name": "UseEmailGeneratedType", - "description": "Returns the email address of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", - "description": "", - "name": "string | undefined", - "value": "string | undefined" - }, - "value": "export function useEmail<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): string | undefined {\n const buyerIdentity = useApi().buyerIdentity;\n\n if (!buyerIdentity) {\n throw new ScopeNotGrantedError(\n 'Using buyer identity requires having personal customer data permissions granted to your app.',\n );\n }\n\n return useSubscription(buyerIdentity.email);\n}" - } - }, - "UsePhoneGeneratedType": { - "src/surfaces/checkout/preact/buyer-identity.ts": { - "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", - "name": "UsePhoneGeneratedType", - "description": "Returns the phone number of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", - "description": "", - "name": "string | undefined", - "value": "string | undefined" - }, - "value": "export function usePhone<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): string | undefined {\n const buyerIdentity = useApi().buyerIdentity;\n\n if (!buyerIdentity) {\n throw new ScopeNotGrantedError(\n 'Using buyer identity requires having personal customer data permissions granted to your app.',\n );\n }\n\n return useSubscription(buyerIdentity.phone);\n}" - } - }, - "UsePurchasingCompanyGeneratedType": { - "src/surfaces/checkout/preact/buyer-identity.ts": { - "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", - "name": "UsePurchasingCompanyGeneratedType", - "description": "Provides information about the company and its location that the business customer is purchasing on behalf of during a B2B checkout. It includes details that can be utilized to identify both the company and its corresponding location to which the business customer belongs.\n\nThe value is `undefined` if a business customer isn't logged in. This function throws an error if the app doesn't have access to customer data.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", - "description": "", - "name": "PurchasingCompany | undefined", - "value": "PurchasingCompany | undefined" - }, - "value": "export function usePurchasingCompany<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): PurchasingCompany | undefined {\n const buyerIdentity = useApi().buyerIdentity;\n\n if (!buyerIdentity) {\n throw new ScopeNotGrantedError(\n 'Using buyer identity requires having personal customer data permissions granted to your app.',\n );\n }\n\n return useSubscription(buyerIdentity.purchasingCompany);\n}" - } - }, - "UseBuyerJourneyGeneratedType": { - "src/surfaces/checkout/preact/buyer-journey.ts": { - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", - "name": "UseBuyerJourneyGeneratedType", - "description": "Returns the `buyerJourney` details on buyer progression in checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", - "description": "", - "name": "BuyerJourney", - "value": "BuyerJourney" - }, - "value": "export function useBuyerJourney<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): BuyerJourney {\n const api = useApi();\n\n return api.buyerJourney;\n}" - } - }, - "UseBuyerJourneyCompletedGeneratedType": { - "src/surfaces/checkout/preact/buyer-journey.ts": { - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", - "name": "UseBuyerJourneyCompletedGeneratedType", - "description": "Returns true if the buyer completed submitting their order.\n\nFor example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", - "description": "", - "name": "false | true", - "value": "false | true" - }, - "value": "export function useBuyerJourneyCompleted<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): boolean {\n const api = useApi();\n return useSubscription(api.buyerJourney.completed);\n}" - } - }, - "UseBuyerJourneyInterceptGeneratedType": { - "src/surfaces/checkout/preact/buyer-journey.ts": { - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", - "name": "UseBuyerJourneyInterceptGeneratedType", - "description": "Installs a function for intercepting and preventing progress on checkout.\n\nTo block checkout progress, you must set the [block_progress](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#block-progress) capability in your extension's configuration.\n\nIf you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension.\n\n`useBuyerJourneyIntercept()` should be called at the top level of the extension, not within an embedded or child component, to avoid errors should the child component get destroyed.\n\nIt is good practice to show a warning in the checkout editor when the merchant has not given permission for your extension to block checkout progress.", - "isPublicDocs": true, - "params": [ + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", + "isOptional": true + }, { - "name": "interceptor", - "description": "", - "value": "Interceptor", - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts" + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "syntaxKind": "PropertySignature", + "name": "title", + "value": "string", + "description": "Defines the full expansion of the abbreviation or acronym.\n\nHelps user agents and users understand the meaning of the abbreviated text.", + "isOptional": true, + "defaultValue": "''" } ], - "returns": { - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", - "description": "", - "name": "void", - "value": "void" - }, - "value": "export function useBuyerJourneyIntercept<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(interceptor: Interceptor): void {\n const api = useApi();\n\n const interceptorRef = useRef(interceptor);\n interceptorRef.current = interceptor;\n\n return useEffect(() => {\n const teardownPromise = api.buyerJourney.intercept((interceptorProps) =>\n interceptorRef.current(interceptorProps),\n );\n\n return () => {\n teardownPromise.then((teardown) => teardown()).catch(() => {});\n };\n }, [api.buyerJourney]);\n}" - } - }, - "UseBuyerJourneyStepsGeneratedType": { - "src/surfaces/checkout/preact/buyer-journey.ts": { - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", - "name": "UseBuyerJourneyStepsGeneratedType", - "description": "Returns all possible steps a buyer can take to complete the checkout. These steps may vary depending on the type of checkout or the shop's configuration.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", - "description": "", - "name": "BuyerJourneyStep[]", - "value": "BuyerJourneyStep[]" - }, - "value": "export function useBuyerJourneySteps<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): BuyerJourneyStep[] {\n const api = useApi();\n\n if (!('buyerJourney' in api) || !api.buyerJourney) {\n throw new ExtensionHasNoMethodError('buyerJourney', api.extension.target);\n }\n\n return useSubscription(api.buyerJourney.steps);\n}" - } - }, - "UseBuyerJourneyActiveStepGeneratedType": { - "src/surfaces/checkout/preact/buyer-journey.ts": { - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", - "name": "UseBuyerJourneyActiveStepGeneratedType", - "description": "Returns the buyer journey step that the buyer is currently on.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", - "description": "", - "name": "BuyerJourneyStep | undefined", - "value": "BuyerJourneyStep | undefined" - }, - "value": "export function useBuyerJourneyActiveStep<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): BuyerJourneyStep | undefined {\n const api = useApi();\n\n if (!('buyerJourney' in api) || !api.buyerJourney) {\n throw new ExtensionHasNoMethodError('buyerJourney', api.extension.target);\n }\n\n const steps = useSubscription(api.buyerJourney.steps);\n const activeStep = useSubscription(api.buyerJourney.activeStep);\n\n return activeStep\n ? steps.find(({handle}) => handle === activeStep.handle)\n : undefined;\n}" - } - }, - "UseExtensionCapabilitiesGeneratedType": { - "src/surfaces/checkout/preact/capabilities.ts": { - "filePath": "src/surfaces/checkout/preact/capabilities.ts", - "name": "UseExtensionCapabilitiesGeneratedType", - "description": "Returns a list of an extension's granted capabilities.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/capabilities.ts", - "description": "", - "name": "Capability[]", - "value": "Capability[]" - }, - "value": "export function useExtensionCapabilities(): Capability[] {\n return useSubscription(useApi().extension.capabilities);\n}" + "value": "export interface AbbreviationElementProps extends Pick {\n}" } }, - "UseExtensionCapabilityGeneratedType": { - "src/surfaces/checkout/preact/capabilities.ts": { - "filePath": "src/surfaces/checkout/preact/capabilities.ts", - "name": "UseExtensionCapabilityGeneratedType", - "description": "Returns whether or not a given capability of an extension is granted.", - "isPublicDocs": true, - "params": [ + "AbbreviationElement": { + "src/surfaces/checkout/components/Abbreviation.ts": { + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "name": "AbbreviationElement", + "description": "", + "members": [ { - "name": "capability", - "description": "", - "value": "Capability", - "filePath": "src/surfaces/checkout/preact/capabilities.ts" - } - ], - "returns": { - "filePath": "src/surfaces/checkout/preact/capabilities.ts", - "description": "", - "name": "boolean", - "value": "boolean" - }, - "value": "export function useExtensionCapability(capability: Capability): boolean {\n return useExtensionCapabilities().includes(capability);\n}" - } - }, - "UseCartLineTargetGeneratedType": { - "src/surfaces/checkout/preact/cart-line-target.ts": { - "filePath": "src/surfaces/checkout/preact/cart-line-target.ts", - "name": "UseCartLineTargetGeneratedType", - "description": "Returns the cart line the extension is attached to. This hook can only be used by extensions in the following extension targets:\n- `purchase.cart-line-item.line-components.render`\n- `purchase.checkout.cart-line-item.render-after`\n- `purchase.thank-you.cart-line-item.render-after`", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/cart-line-target.ts", - "description": "", - "name": "CartLine", - "value": "CartLine" - }, - "value": "export function useCartLineTarget(): CartLine {\n const api = useApi<\n | 'purchase.cart-line-item.line-components.render'\n | 'purchase.checkout.cart-line-item.render-after'\n | 'purchase.thank-you.cart-line-item.render-after'\n >();\n if (!api.target) {\n throw new ExtensionHasNoTargetError(\n 'useCartLineTarget',\n api.extension.target,\n );\n }\n\n return useSubscription(api.target);\n}" - } - }, - "UseCartLinesGeneratedType": { - "src/surfaces/checkout/preact/cart-lines.ts": { - "filePath": "src/surfaces/checkout/preact/cart-lines.ts", - "name": "UseCartLinesGeneratedType", - "description": "Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/cart-lines.ts", - "description": "", - "name": "CartLine[]", - "value": "CartLine[]" - }, - "value": "export function useCartLines<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CartLine[] {\n const {lines} = useApi();\n\n return useSubscription(lines);\n}" - } - }, - "UseApplyCartLinesChangeGeneratedType": { - "src/surfaces/checkout/preact/cart-lines.ts": { - "filePath": "src/surfaces/checkout/preact/cart-lines.ts", - "name": "UseApplyCartLinesChangeGeneratedType", - "description": "Returns a function to mutate the `lines` property of checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/cart-lines.ts", - "description": "", - "name": "(change: CartLineChange) => Promise", - "value": "(change: CartLineChange) => Promise" - }, - "value": "export function useApplyCartLinesChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: CartLineChange) => Promise {\n const api = useApi();\n\n if ('applyCartLinesChange' in api) {\n return api.applyCartLinesChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyCartLinesChange',\n api.extension.target,\n );\n}" - } - }, - "UseCheckoutSettingsGeneratedType": { - "src/surfaces/checkout/preact/checkout-settings.ts": { - "filePath": "src/surfaces/checkout/preact/checkout-settings.ts", - "name": "UseCheckoutSettingsGeneratedType", - "description": "Returns the `checkoutSettings` applied to the checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/checkout-settings.ts", - "description": "", - "name": "CheckoutSettings", - "value": "CheckoutSettings" - }, - "value": "export function useCheckoutSettings<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CheckoutSettings {\n return useSubscription(useApi().checkoutSettings);\n}" - } - }, - "UseCheckoutTokenGeneratedType": { - "src/surfaces/checkout/preact/checkout-token.ts": { - "filePath": "src/surfaces/checkout/preact/checkout-token.ts", - "name": "UseCheckoutTokenGeneratedType", - "description": "A stable id that represents the current checkout.\n\nMatches the `token` field in the [WebPixel checkout payload](https://shopify.dev/docs/api/pixels/customer-events#checkout) and the `checkout_token` field in the [Admin REST API Order resource](https://shopify.dev/docs/api/admin-rest/unstable/resources/order#resource-object).", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/checkout-token.ts", - "description": "", - "name": "CheckoutToken | undefined", - "value": "CheckoutToken | undefined" - }, - "value": "export function useCheckoutToken<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CheckoutToken | undefined {\n return useSubscription(useApi().checkoutToken);\n}" - } - }, - "UseSubtotalAmountGeneratedType": { - "src/surfaces/checkout/preact/cost.ts": { - "filePath": "src/surfaces/checkout/preact/cost.ts", - "name": "UseSubtotalAmountGeneratedType", - "description": "A `Money` value representing the subtotal value of the items in the cart at the current step of checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/cost.ts", - "description": "", - "name": "Money", - "value": "Money" - }, - "value": "export function useSubtotalAmount<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Money {\n return useSubscription(useApi().cost.subtotalAmount);\n}" - } - }, - "UseTotalShippingAmountGeneratedType": { - "src/surfaces/checkout/preact/cost.ts": { - "filePath": "src/surfaces/checkout/preact/cost.ts", - "name": "UseTotalShippingAmountGeneratedType", - "description": "A `Money` value representing the total shipping a buyer can expect to pay at the current step of checkout. This value includes shipping discounts. Returns undefined if shipping has not been negotiated yet, such as on the information step.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/cost.ts", - "description": "", - "name": "Money | undefined", - "value": "Money | undefined" - }, - "value": "export function useTotalShippingAmount<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Money | undefined {\n return useSubscription(useApi().cost.totalShippingAmount);\n}" - } - }, - "UseTotalTaxAmountGeneratedType": { - "src/surfaces/checkout/preact/cost.ts": { - "filePath": "src/surfaces/checkout/preact/cost.ts", - "name": "UseTotalTaxAmountGeneratedType", - "description": "A `Money` value representing the total tax a buyer can expect to pay at the current step of checkout or the total tax included in product and shipping prices. Returns undefined if taxes are unavailable.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/cost.ts", - "description": "", - "name": "Money | undefined", - "value": "Money | undefined" - }, - "value": "export function useTotalTaxAmount<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Money | undefined {\n return useSubscription(useApi().cost.totalTaxAmount);\n}" - } - }, - "UseTotalAmountGeneratedType": { - "src/surfaces/checkout/preact/cost.ts": { - "filePath": "src/surfaces/checkout/preact/cost.ts", - "name": "UseTotalAmountGeneratedType", - "description": "Returns a `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/cost.ts", - "description": "", - "name": "Money", - "value": "Money" - }, - "value": "export function useTotalAmount<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Money {\n return useSubscription(useApi().cost.totalAmount);\n}" - } - }, - "UseLocalizationCountryGeneratedType": { - "src/surfaces/checkout/preact/country.ts": { - "filePath": "src/surfaces/checkout/preact/country.ts", - "name": "UseLocalizationCountryGeneratedType", - "description": "Returns the country of the checkout, and automatically re-renders your component if the country changes.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/country.ts", - "description": "", - "name": "Country | undefined", - "value": "Country | undefined" - }, - "value": "export function useLocalizationCountry<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Country | undefined {\n const {localization} = useApi();\n\n return useSubscription(localization.country);\n}" - } - }, - "UseCurrencyGeneratedType": { - "src/surfaces/checkout/preact/currency.ts": { - "filePath": "src/surfaces/checkout/preact/currency.ts", - "name": "UseCurrencyGeneratedType", - "description": "Returns the currency of the checkout, and automatically re-renders your component if the currency changes.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/currency.ts", - "description": "", - "name": "Currency", - "value": "Currency" - }, - "value": "export function useCurrency<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Currency {\n const {localization} = useApi();\n\n return useSubscription(localization.currency);\n}" - } - }, - "UseCustomerPrivacyGeneratedType": { - "src/surfaces/checkout/preact/customer-privacy.ts": { - "filePath": "src/surfaces/checkout/preact/customer-privacy.ts", - "name": "UseCustomerPrivacyGeneratedType", - "description": "Returns the current customer privacy settings and metadata and re-renders your component if the customer privacy settings change.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/customer-privacy.ts", - "description": "", - "name": "CustomerPrivacy", - "value": "CustomerPrivacy" - }, - "value": "export function useCustomerPrivacy<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CustomerPrivacy {\n return useSubscription(useApi().customerPrivacy);\n}" - } - }, - "UseDeliveryGroupListTargetGeneratedType": { - "src/surfaces/checkout/preact/delivery-group-list-target.ts": { - "filePath": "src/surfaces/checkout/preact/delivery-group-list-target.ts", - "name": "UseDeliveryGroupListTargetGeneratedType", - "description": "Returns the delivery group list the extension is attached to. This hook can only be used by extensions in the following extension targets:\n- purchase.checkout.shipping-option-list.render-before\n- purchase.checkout.shipping-option-list.render-after", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/delivery-group-list-target.ts", - "description": "", - "name": "DeliveryGroupList | undefined", - "value": "DeliveryGroupList | undefined" - }, - "value": "export function useDeliveryGroupListTarget(): DeliveryGroupList | undefined {\n const api = useApi<\n | 'purchase.checkout.shipping-option-list.render-before'\n | 'purchase.checkout.shipping-option-list.render-after'\n >();\n\n return useSubscription(api.target);\n}" - } - }, - "UseDeliveryGroupTargetGeneratedType": { - "src/surfaces/checkout/preact/delivery-group-target.ts": { - "filePath": "src/surfaces/checkout/preact/delivery-group-target.ts", - "name": "UseDeliveryGroupTargetGeneratedType", - "description": "Returns the delivery group the extension is attached to. This hook can only be used by extensions in the following extension targets:\n- purchase.checkout.shipping-option-list.render-before\n- purchase.checkout.shipping-option-list.render-after\n\n> Caution: Deprecated as of version `2024-07`, use `useDeliveryGroupListTarget()` instead.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/delivery-group-target.ts", - "description": "", - "name": "DeliveryGroup | undefined", - "value": "DeliveryGroup | undefined" - }, - "value": "export function useDeliveryGroupTarget(): DeliveryGroup | undefined {\n const api = useApi<\n | 'purchase.checkout.shipping-option-list.render-before'\n | 'purchase.checkout.shipping-option-list.render-after'\n >();\n\n const target = useSubscription(api.target);\n return target?.deliveryGroups[0];\n}" - } - }, - "UseDeliveryGroupGeneratedType": { - "src/surfaces/checkout/preact/delivery-group.ts": { - "filePath": "src/surfaces/checkout/preact/delivery-group.ts", - "name": "UseDeliveryGroupGeneratedType", - "description": "Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes.", - "isPublicDocs": true, - "params": [ + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "syntaxKind": "PropertySignature", + "name": "accessKey", + "value": "string", + "description": "The **`HTMLElement.accessKey`** property sets the keystroke which a user can press to jump to a given element.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKey)" + }, { - "name": "deliveryGroup", - "description": "", - "value": "DeliveryGroup", - "filePath": "src/surfaces/checkout/preact/delivery-group.ts" - } - ], - "returns": { - "filePath": "src/surfaces/checkout/preact/delivery-group.ts", - "description": "", - "name": "DeliveryGroupDetails | undefined", - "value": "DeliveryGroupDetails | undefined" - }, - "value": "export function useDeliveryGroup<\n ID extends RenderExtensionTarget = RenderExtensionTarget,\n>(deliveryGroup: DeliveryGroup | undefined): DeliveryGroupDetails | undefined {\n const {lines} = useApi();\n const cartLines = useSubscription(lines);\n\n return useMemo(() => {\n if (!deliveryGroup) {\n return undefined;\n }\n\n const deliveryGroupDetails = {\n ...deliveryGroup,\n selectedDeliveryOption: getSelectedDeliveryOption(deliveryGroup),\n targetedCartLines: getTargetedCartLines(deliveryGroup, cartLines),\n };\n\n return deliveryGroupDetails;\n }, [deliveryGroup, cartLines]);\n}" - } - }, - "UseDeliveryGroupsGeneratedType": { - "src/surfaces/checkout/preact/delivery-groups.ts": { - "filePath": "src/surfaces/checkout/preact/delivery-groups.ts", - "name": "UseDeliveryGroupsGeneratedType", - "description": "Returns the current delivery groups for the checkout, and automatically re-renders your component when delivery address or delivery option selection changes.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/delivery-groups.ts", - "description": "", - "name": "DeliveryGroup[]", - "value": "DeliveryGroup[]" - }, - "value": "export function useDeliveryGroups<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): DeliveryGroup[] {\n const api = useApi();\n return useSubscription(api.deliveryGroups);\n}" - } - }, - "UseDeliverySelectionGroupsGeneratedType": { - "src/surfaces/checkout/preact/delivery-selection-groups.ts": { - "filePath": "src/surfaces/checkout/preact/delivery-selection-groups.ts", - "name": "UseDeliverySelectionGroupsGeneratedType", - "description": "Returns the list of delivery selection groups available to the buyers. This hook can only be used by extensions in the following extension targets:\n- purchase.checkout.shipping-option-list.render-before\n- purchase.checkout.shipping-option-list.render-after", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/delivery-selection-groups.ts", - "description": "", - "name": "| DeliverySelectionGroup[]\n | undefined", - "value": "| DeliverySelectionGroup[]\n | undefined" - }, - "value": "export function useDeliverySelectionGroups():\n | DeliverySelectionGroup[]\n | undefined {\n const api = useApi<\n | 'purchase.checkout.shipping-option-list.render-before'\n | 'purchase.checkout.shipping-option-list.render-after'\n >();\n\n return useSubscription(api.deliverySelectionGroups);\n}" - } - }, - "UseDiscountCodesGeneratedType": { - "src/surfaces/checkout/preact/discounts.ts": { - "filePath": "src/surfaces/checkout/preact/discounts.ts", - "name": "UseDiscountCodesGeneratedType", - "description": "Returns the current discount codes applied to the cart, and automatically re-renders your component if discount codes are added or removed.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/discounts.ts", - "description": "", - "name": "CartDiscountCode[]", - "value": "CartDiscountCode[]" - }, - "value": "export function useDiscountCodes<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CartDiscountCode[] {\n const {discountCodes} = useApi();\n\n return useSubscription(discountCodes);\n}" - } - }, - "UseDiscountAllocationsGeneratedType": { - "src/surfaces/checkout/preact/discounts.ts": { - "filePath": "src/surfaces/checkout/preact/discounts.ts", - "name": "UseDiscountAllocationsGeneratedType", - "description": "Returns the current discount allocations applied to the cart, and automatically re-renders your component if discount allocations changed.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/discounts.ts", - "description": "", - "name": "CartDiscountAllocation[]", - "value": "CartDiscountAllocation[]" - }, - "value": "export function useDiscountAllocations<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CartDiscountAllocation[] {\n const {discountAllocations} = useApi();\n\n return useSubscription(discountAllocations);\n}" - } - }, - "UseApplyDiscountCodeChangeGeneratedType": { - "src/surfaces/checkout/preact/discounts.ts": { - "filePath": "src/surfaces/checkout/preact/discounts.ts", - "name": "UseApplyDiscountCodeChangeGeneratedType", - "description": "Returns a function to add or remove discount codes.\n\n> Caution: > See [security considerations](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves discount codes through a network call.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/discounts.ts", - "description": "", - "name": "(change: DiscountCodeChange) => Promise", - "value": "(change: DiscountCodeChange) => Promise" - }, - "value": "export function useApplyDiscountCodeChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: DiscountCodeChange) => Promise {\n const api = useApi();\n\n if ('applyDiscountCodeChange' in api) {\n return api.applyDiscountCodeChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyDiscountCodeChange',\n api.extension.target,\n );\n}" - } - }, - "UseExtensionEditorGeneratedType": { - "src/surfaces/checkout/preact/extension-editor.ts": { - "filePath": "src/surfaces/checkout/preact/extension-editor.ts", - "name": "UseExtensionEditorGeneratedType", - "description": "Returns information about the editor where the extension is being rendered.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/extension-editor.ts", - "description": "", - "name": "Editor | undefined", - "value": "Editor | undefined" - }, - "value": "export function useExtensionEditor(): Editor | undefined {\n return useApi().extension.editor;\n}" - } - }, - "UseExtensionLanguageGeneratedType": { - "src/surfaces/checkout/preact/extension-language.ts": { - "filePath": "src/surfaces/checkout/preact/extension-language.ts", - "name": "UseExtensionLanguageGeneratedType", - "description": "Returns the buyer's language, as supported by the extension.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/extension-language.ts", - "description": "", - "name": "Language", - "value": "Language" - }, - "value": "export function useExtensionLanguage<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Language {\n const {localization} = useApi();\n\n return useSubscription(localization.extensionLanguage);\n}" - } - }, - "UseExtensionGeneratedType": { - "src/surfaces/checkout/preact/extension.ts": { - "filePath": "src/surfaces/checkout/preact/extension.ts", - "name": "UseExtensionGeneratedType", - "description": "Returns the metadata about the extension.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/extension.ts", - "description": "", - "name": "Extension", - "value": "Extension" - }, - "value": "export function useExtension(): Extension {\n return useApi().extension as Extension;\n}" - } - }, - "UseExtensionDataGeneratedType": { - "src/surfaces/checkout/preact/extension.ts": { - "filePath": "src/surfaces/checkout/preact/extension.ts", - "name": "UseExtensionDataGeneratedType", - "description": "Returns the metadata about the extension. > Caution: This is deprecated, use `useExtension()` instead.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/extension.ts", - "description": "", - "name": "Extension", - "value": "Extension" - }, - "value": "export function useExtensionData(): Extension {\n return useExtension();\n}" - } - }, - "UseAppliedGiftCardsGeneratedType": { - "src/surfaces/checkout/preact/gift-cards.ts": { - "filePath": "src/surfaces/checkout/preact/gift-cards.ts", - "name": "UseAppliedGiftCardsGeneratedType", - "description": "Returns the current gift cards applied to the cart, and automatically re-renders your component if gift cards are added or removed.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/gift-cards.ts", - "description": "", - "name": "AppliedGiftCard[]", - "value": "AppliedGiftCard[]" - }, - "value": "export function useAppliedGiftCards<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): AppliedGiftCard[] {\n const {appliedGiftCards} = useApi();\n\n return useSubscription(appliedGiftCards);\n}" - } - }, - "UseApplyGiftCardChangeGeneratedType": { - "src/surfaces/checkout/preact/gift-cards.ts": { - "filePath": "src/surfaces/checkout/preact/gift-cards.ts", - "name": "UseApplyGiftCardChangeGeneratedType", - "description": "Returns a function to add or remove gift cards.\n\n> Caution: > See [security considerations](https://shopify.dev/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves gift card codes through a network call.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/gift-cards.ts", - "description": "", - "name": "(change: GiftCardChange) => Promise", - "value": "(change: GiftCardChange) => Promise" - }, - "value": "export function useApplyGiftCardChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: GiftCardChange) => Promise {\n const api = useApi();\n\n if ('applyGiftCardChange' in api) {\n return api.applyGiftCardChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyGiftCardChange',\n api.extension.target,\n );\n}" - } - }, - "UseInstructionsGeneratedType": { - "src/surfaces/checkout/preact/instructions.ts": { - "filePath": "src/surfaces/checkout/preact/instructions.ts", - "name": "UseInstructionsGeneratedType", - "description": "Returns the cart instructions used to create the checkout and possibly limit extension capabilities.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/instructions.ts", - "description": "", - "name": "CartInstructions", - "value": "CartInstructions" - }, - "value": "export function useInstructions<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CartInstructions {\n return useSubscription(useApi().instructions);\n}" - } - }, - "UseLanguageGeneratedType": { - "src/surfaces/checkout/preact/language.ts": { - "filePath": "src/surfaces/checkout/preact/language.ts", - "name": "UseLanguageGeneratedType", - "description": "Returns the current language of the checkout, and automatically re-renders your component if the language changes.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/language.ts", - "description": "", - "name": "Language", - "value": "Language" - }, - "value": "export function useLanguage<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Language {\n const {localization} = useApi();\n\n return useSubscription(localization.language);\n}" - } - }, - "UseLocalizedFieldsGeneratedType": { - "src/surfaces/checkout/preact/localized-fields.ts": { - "filePath": "src/surfaces/checkout/preact/localized-fields.ts", - "name": "UseLocalizedFieldsGeneratedType", - "description": "Returns the current localized fields and re-renders your component if the values change.", - "isPublicDocs": true, - "params": [ + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "syntaxKind": "PropertySignature", + "name": "accessKeyLabel", + "value": "string", + "description": "The **`HTMLElement.accessKeyLabel`** read-only property returns a string containing the element's browser-assigned access key (if any); otherwise it returns an empty string.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKeyLabel)" + }, { - "name": "keys", - "description": "", - "value": "LocalizedFieldKey[]", - "isOptional": true, - "filePath": "src/surfaces/checkout/preact/localized-fields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/checkout/preact/localized-fields.ts", - "description": "", - "name": "LocalizedField[]", - "value": "LocalizedField[]" - }, - "value": "export function useLocalizedFields<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(keys?: LocalizedFieldKey[]): LocalizedField[] {\n const {localizedFields} = useApi();\n\n if (!localizedFields) {\n throw new ScopeNotGrantedError(\n 'Using localized fields requires having personal customer data permissions granted to your app.',\n );\n }\n\n const localizedFieldsData = useSubscription(localizedFields);\n\n if (!keys) {\n return localizedFieldsData;\n }\n\n if (!keys.length) {\n return [];\n }\n\n return localizedFieldsData.filter(({key}) => keys.includes(key));\n}" - } - }, - "UseLocalizedFieldGeneratedType": { - "src/surfaces/checkout/preact/localized-fields.ts": { - "filePath": "src/surfaces/checkout/preact/localized-fields.ts", - "name": "UseLocalizedFieldGeneratedType", - "description": "Returns the current localized field or undefined for the specified localized field key and re-renders your component if the value changes.\n\nReturns `undefined` when no field is configured for the buyer's country.", - "isPublicDocs": true, - "params": [ + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "syntaxKind": "MethodSignature", + "name": "addEventListener", + "value": "{ (type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; }", + "description": "\nThe **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)\n\nThe **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" + }, { - "name": "key", - "description": "", - "value": "LocalizedFieldKey", - "filePath": "src/surfaces/checkout/preact/localized-fields.ts" - } - ], - "returns": { - "filePath": "src/surfaces/checkout/preact/localized-fields.ts", - "description": "", - "name": "LocalizedField | undefined", - "value": "LocalizedField | undefined" - }, - "value": "export function useLocalizedField<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(key: LocalizedFieldKey): LocalizedField | undefined {\n const fields = useLocalizedFields([key]);\n return fields[0];\n}" - } - }, - "UseLocalizationMarketGeneratedType": { - "src/surfaces/checkout/preact/market.ts": { - "filePath": "src/surfaces/checkout/preact/market.ts", - "name": "UseLocalizationMarketGeneratedType", - "description": "Returns the market of the checkout, and automatically re-renders your component if it changes.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/market.ts", - "description": "", - "name": "Market | undefined", - "value": "Market | undefined" - }, - "value": "export function useLocalizationMarket<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Market | undefined {\n const {localization} = useApi();\n\n return useSubscription(localization.market);\n}" - } - }, - "UseApplyMetafieldsChangeGeneratedType": { - "src/surfaces/checkout/preact/metafields.ts": { - "filePath": "src/surfaces/checkout/preact/metafields.ts", - "name": "UseApplyMetafieldsChangeGeneratedType", - "description": "Returns a function to mutate the `metafields` property of the checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/metafields.ts", - "description": "", - "name": "(change: MetafieldChange) => Promise", - "value": "(change: MetafieldChange) => Promise" - }, - "value": "export function useApplyMetafieldsChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: MetafieldChange) => Promise {\n const api = useApi();\n\n if ('applyMetafieldChange' in api) {\n return api.applyMetafieldChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyMetafieldChange',\n api.extension.target,\n );\n}" - } - }, - "UseNoteGeneratedType": { - "src/surfaces/checkout/preact/note.ts": { - "filePath": "src/surfaces/checkout/preact/note.ts", - "name": "UseNoteGeneratedType", - "description": "Returns the proposed `note` applied to the checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/note.ts", - "description": "", - "name": "string | undefined", - "value": "string | undefined" - }, - "value": "export function useNote<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): string | undefined {\n return useSubscription(useApi().note);\n}" - } - }, - "UseApplyNoteChangeGeneratedType": { - "src/surfaces/checkout/preact/note.ts": { - "filePath": "src/surfaces/checkout/preact/note.ts", - "name": "UseApplyNoteChangeGeneratedType", - "description": "Returns a function to mutate the `note` property of the checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/note.ts", - "description": "", - "name": "(change: NoteChange) => Promise", - "value": "(change: NoteChange) => Promise" - }, - "value": "export function useApplyNoteChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: NoteChange) => Promise {\n const api = useApi();\n\n if ('applyNoteChange' in api) {\n return api.applyNoteChange;\n }\n\n throw new ExtensionHasNoMethodError('applyNoteChange', api.extension.target);\n}" - } - }, - "UsePaymentMethodAttributesGeneratedType": { - "src/surfaces/checkout/preact/payment-method.ts": { - "filePath": "src/surfaces/checkout/preact/payment-method.ts", - "name": "UsePaymentMethodAttributesGeneratedType", - "description": "Returns the proposed `paymentAttributes` applied to the checkout.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/payment-method.ts", - "description": "", - "name": "| PaymentMethodAttribute[]\n | undefined", - "value": "| PaymentMethodAttribute[]\n | undefined" - }, - "value": "export function usePaymentMethodAttributes():\n | PaymentMethodAttribute[]\n | undefined {\n const {paymentMethodAttributes} = useApi<\n | 'purchase.checkout.payment-option-item.details.render'\n | 'purchase.checkout.payment-option-item.hosted-fields.render-after'\n >();\n\n if (!paymentMethodAttributes) {\n throw new ScopeNotGrantedError(\n 'Using payment method attributes requires having checkout extension payments scope granted to your app.',\n );\n }\n\n return useSubscription(paymentMethodAttributes);\n}" - } - }, - "UsePaymentMethodAttributeValuesGeneratedType": { - "src/surfaces/checkout/preact/payment-method.ts": { - "filePath": "src/surfaces/checkout/preact/payment-method.ts", - "name": "UsePaymentMethodAttributeValuesGeneratedType", - "description": "Returns the values for the specified `paymentAttributes` applied to the checkout.", - "isPublicDocs": true, - "params": [ - { - "name": "keys", - "description": "An array of attribute keys.", - "value": "string[]", - "filePath": "src/surfaces/checkout/preact/payment-method.ts" - } - ], - "returns": { - "filePath": "src/surfaces/checkout/preact/payment-method.ts", - "description": "", - "name": "(PaymentMethodAttribute['value'] | undefined)[]", - "value": "(PaymentMethodAttribute['value'] | undefined)[]" - }, - "value": "export function usePaymentMethodAttributeValues(\n keys: string[],\n): (PaymentMethodAttribute['value'] | undefined)[] {\n const attributes = usePaymentMethodAttributes();\n\n if (!attributes?.length) {\n return [];\n }\n\n return keys.map((key) => {\n const attribute = attributes.find((attribute) => attribute.key === key);\n return attribute?.value;\n });\n}" - } - }, - "UseApplyPaymentMethodAttributesChangeGeneratedType": { - "src/surfaces/checkout/preact/payment-method.ts": { - "filePath": "src/surfaces/checkout/preact/payment-method.ts", - "name": "UseApplyPaymentMethodAttributesChangeGeneratedType", - "description": "Returns a function to set payment method attributes.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/payment-method.ts", - "description": "", - "name": "(\n change: PaymentMethodAttributesChange,\n) => Promise", - "value": "(\n change: PaymentMethodAttributesChange,\n) => Promise" - }, - "value": "export function useApplyPaymentMethodAttributesChange(): (\n change: PaymentMethodAttributesChange,\n) => Promise {\n const api = useApi<\n | 'purchase.checkout.payment-option-item.details.render'\n | 'purchase.checkout.payment-option-item.hosted-fields.render-after'\n >();\n\n if (!api.applyPaymentMethodAttributesChange) {\n throw new ExtensionHasNoMethodError(\n 'useApplyPaymentMethodAttributesChange',\n api.extension.target,\n );\n }\n\n return api.applyPaymentMethodAttributesChange;\n}" - } - }, - "UseAvailablePaymentOptionsGeneratedType": { - "src/surfaces/checkout/preact/payment-options.ts": { - "filePath": "src/surfaces/checkout/preact/payment-options.ts", - "name": "UseAvailablePaymentOptionsGeneratedType", - "description": "Returns all available payment options.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/payment-options.ts", - "description": "", - "name": "PaymentOption[]", - "value": "PaymentOption[]" - }, - "value": "export function useAvailablePaymentOptions<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): PaymentOption[] {\n const api = useApi();\n return useSubscription(api.availablePaymentOptions);\n}" - } - }, - "UseSelectedPaymentOptionsGeneratedType": { - "src/surfaces/checkout/preact/payment-options.ts": { - "filePath": "src/surfaces/checkout/preact/payment-options.ts", - "name": "UseSelectedPaymentOptionsGeneratedType", - "description": "Returns payment options selected by the buyer.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/payment-options.ts", - "description": "", - "name": "SelectedPaymentOption[]", - "value": "SelectedPaymentOption[]" - }, - "value": "export function useSelectedPaymentOptions<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): SelectedPaymentOption[] {\n const api = useApi();\n return useSubscription(api.selectedPaymentOptions);\n}" - } - }, - "UsePickupLocationOptionTargetGeneratedType": { - "src/surfaces/checkout/preact/pickup-location-option-target.ts": { - "filePath": "src/surfaces/checkout/preact/pickup-location-option-target.ts", - "name": "UsePickupLocationOptionTargetGeneratedType", - "description": "Returns the pickup location option the extension is attached to. This hook can only be used by extensions in the following extension target:\n- `purchase.checkout.pickup-location-option-item.render-after`", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/pickup-location-option-target.ts", - "description": "", - "name": "{\n pickupLocationOptionTarget: PickupLocationOption;\n isTargetSelected: boolean;\n}", - "value": "{\n pickupLocationOptionTarget: PickupLocationOption;\n isTargetSelected: boolean;\n}" - }, - "value": "export function usePickupLocationOptionTarget(): {\n pickupLocationOptionTarget: PickupLocationOption;\n isTargetSelected: boolean;\n} {\n const api =\n useApi<'purchase.checkout.pickup-location-option-item.render-after'>();\n if (!api.target || api.isTargetSelected === undefined) {\n throw new ExtensionHasNoTargetError(\n 'usePickupLocationOptionTarget',\n api.extension.target,\n );\n }\n\n const pickupLocationOptionTarget = useSubscription(api.target);\n const isTargetSelected = useSubscription(api.isTargetSelected);\n\n const pickupLocationOption = useMemo(() => {\n return {\n pickupLocationOptionTarget,\n isTargetSelected,\n };\n }, [pickupLocationOptionTarget, isTargetSelected]);\n\n return pickupLocationOption;\n}" - } - }, - "UseApplyRedeemableChangeGeneratedType": { - "src/surfaces/checkout/preact/redeemable.ts": { - "filePath": "src/surfaces/checkout/preact/redeemable.ts", - "name": "UseApplyRedeemableChangeGeneratedType", - "description": "Returns a function to apply a change to add a redeemable.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/redeemable.ts", - "description": "", - "name": "(\n change: RedeemableChange,\n) => Promise", - "value": "(\n change: RedeemableChange,\n) => Promise" - }, - "value": "export function useApplyRedeemableChange(): (\n change: RedeemableChange,\n) => Promise {\n const api = useApi<'purchase.checkout.gift-card.render'>();\n\n if (!api.applyRedeemableChange) {\n throw new ExtensionHasNoMethodError(\n 'useApplyRedeemableChange',\n api.extension.target,\n );\n }\n\n return api.applyRedeemableChange;\n}" - } - }, - "UseSessionTokenGeneratedType": { - "src/surfaces/checkout/preact/session-token.ts": { - "filePath": "src/surfaces/checkout/preact/session-token.ts", - "name": "UseSessionTokenGeneratedType", - "description": "Provides access to session tokens, which can be used to verify token claims on your app's server.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/session-token.ts", - "description": "", - "name": "SessionToken", - "value": "SessionToken" - }, - "value": "export function useSessionToken<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): SessionToken {\n return useApi().sessionToken;\n}" - } - }, - "UseSettingsGeneratedType": { - "src/surfaces/checkout/preact/settings.ts": { - "filePath": "src/surfaces/checkout/preact/settings.ts", - "name": "UseSettingsGeneratedType", - "description": "Returns the setting values defined by the merchant for the extension.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/settings.ts", - "description": "", - "name": "Partial", - "value": "Partial" - }, - "value": "export function useSettings<\n Settings extends ExtensionSettings,\n>(): Partial {\n const settings = useSubscription(useApi().settings);\n\n return settings as Settings;\n}" - } - }, - "UseShippingOptionTargetGeneratedType": { - "src/surfaces/checkout/preact/shipping-option-target.ts": { - "filePath": "src/surfaces/checkout/preact/shipping-option-target.ts", - "name": "UseShippingOptionTargetGeneratedType", - "description": "Returns the shipping option the extension is attached to. This hook can only be used by extensions in the following extension targets:\n- `purchase.checkout.shipping-option-item.render-after`\n- `purchase.checkout.shipping-option-item.details.render`", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/shipping-option-target.ts", - "description": "", - "name": "{\n shippingOptionTarget: ShippingOption;\n isTargetSelected: boolean;\n renderMode: ShippingOptionItemRenderMode;\n}", - "value": "{\n shippingOptionTarget: ShippingOption;\n isTargetSelected: boolean;\n renderMode: ShippingOptionItemRenderMode;\n}" - }, - "value": "export function useShippingOptionTarget(): {\n shippingOptionTarget: ShippingOption;\n isTargetSelected: boolean;\n renderMode: ShippingOptionItemRenderMode;\n} {\n const api = useApi<\n | 'purchase.checkout.shipping-option-item.render-after'\n | 'purchase.checkout.shipping-option-item.details.render'\n >();\n if (!api.target || api.isTargetSelected === undefined) {\n throw new ExtensionHasNoTargetError(\n 'useShippingOptionTarget',\n api.extension.target,\n );\n }\n\n const shippingOptionTarget = useSubscription(api.target);\n const isTargetSelected = useSubscription(api.isTargetSelected);\n const renderMode = api.renderMode;\n\n const shippingOption = useMemo(() => {\n return {\n shippingOptionTarget,\n isTargetSelected,\n renderMode,\n };\n }, [shippingOptionTarget, isTargetSelected, renderMode]);\n\n return shippingOption;\n}" - } - }, - "UseShopGeneratedType": { - "src/surfaces/checkout/preact/shop.ts": { - "filePath": "src/surfaces/checkout/preact/shop.ts", - "name": "UseShopGeneratedType", - "description": "Returns the `Shop` where the checkout is taking place.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/shop.ts", - "description": "", - "name": "Shop", - "value": "Shop" - }, - "value": "export function useShop<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Shop {\n return useApi().shop;\n}" - } - }, - "UseStorageGeneratedType": { - "src/surfaces/checkout/preact/storage.ts": { - "filePath": "src/surfaces/checkout/preact/storage.ts", - "name": "UseStorageGeneratedType", - "description": "Returns the key-value `Storage` interface for the extension. Uses `localStorage` and should persist across the buyer's current checkout session. However, data persistence isn't guaranteed and storage is reset when the buyer starts a new checkout.\n\nData is shared across all activated extension targets of this extension. In versions `<=2023-07`, each activated extension target had its own storage.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/storage.ts", - "description": "", - "name": "Storage", - "value": "Storage" - }, - "value": "export function useStorage<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Storage {\n return useApi().storage;\n}" - } - }, - "UseTargetGeneratedType": { - "src/surfaces/checkout/preact/target.ts": { - "filePath": "src/surfaces/checkout/preact/target.ts", - "name": "UseTargetGeneratedType", - "description": "Returns the cart line the extension is attached to. This hook can only be used by extensions in the `purchase.cart-line-item.line-components.render`, `purchase.checkout.cart-line-item.render-after`, and `purchase.thank-you.cart-line-item.render-after` extension targets. Until version `2023-04`, this hook returned a `PresentmentCartLine` object.\n\n> Caution: Deprecated as of version `2023-10`, use `useCartLineTarget()` instead.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/target.ts", - "description": "", - "name": "CartLine", - "value": "CartLine" - }, - "value": "export function useTarget(): CartLine {\n const api = useApi<\n | 'purchase.cart-line-item.line-components.render'\n | 'purchase.checkout.cart-line-item.render-after'\n | 'purchase.thank-you.cart-line-item.render-after'\n >();\n if (!api.target) {\n throw new ExtensionHasNoTargetError(api.extension.target);\n }\n\n return useSubscription(api.target);\n}" - } - }, - "UseTimezoneGeneratedType": { - "src/surfaces/checkout/preact/timezone.ts": { - "filePath": "src/surfaces/checkout/preact/timezone.ts", - "name": "UseTimezoneGeneratedType", - "description": "Returns the time zone of the checkout, and automatically re-renders your component if the time zone changes.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/timezone.ts", - "description": "", - "name": "\"Africa/Abidjan\" | \"Africa/Algiers\" | \"Africa/Bissau\" | \"Africa/Cairo\" | \"Africa/Casablanca\" | \"Africa/Ceuta\" | \"Africa/El_Aaiun\" | \"Africa/Johannesburg\" | \"Africa/Juba\" | \"Africa/Khartoum\" | \"Africa/Lagos\" | \"Africa/Maputo\" | \"Africa/Monrovia\" | \"Africa/Nairobi\" | \"Africa/Ndjamena\" | \"Africa/Sao_Tome\" | \"Africa/Tripoli\" | \"Africa/Tunis\" | \"Africa/Windhoek\" | \"America/Adak\" | \"America/Anchorage\" | \"America/Araguaina\" | \"America/Argentina/Buenos_Aires\" | \"America/Argentina/Catamarca\" | \"America/Argentina/Cordoba\" | \"America/Argentina/Jujuy\" | \"America/Argentina/La_Rioja\" | \"America/Argentina/Mendoza\" | \"America/Argentina/Rio_Gallegos\" | \"America/Argentina/Salta\" | \"America/Argentina/San_Juan\" | \"America/Argentina/San_Luis\" | \"America/Argentina/Tucuman\" | \"America/Argentina/Ushuaia\" | \"America/Asuncion\" | \"America/Bahia\" | \"America/Bahia_Banderas\" | \"America/Barbados\" | \"America/Belem\" | \"America/Belize\" | \"America/Boa_Vista\" | \"America/Bogota\" | \"America/Boise\" | \"America/Cambridge_Bay\" | \"America/Campo_Grande\" | \"America/Cancun\" | \"America/Caracas\" | \"America/Cayenne\" | \"America/Chicago\" | \"America/Chihuahua\" | \"America/Costa_Rica\" | \"America/Cuiaba\" | \"America/Danmarkshavn\" | \"America/Dawson\" | \"America/Dawson_Creek\" | \"America/Denver\" | \"America/Detroit\" | \"America/Edmonton\" | \"America/Eirunepe\" | \"America/El_Salvador\" | \"America/Fort_Nelson\" | \"America/Fortaleza\" | \"America/Glace_Bay\" | \"America/Goose_Bay\" | \"America/Grand_Turk\" | \"America/Guatemala\" | \"America/Guayaquil\" | \"America/Guyana\" | \"America/Halifax\" | \"America/Havana\" | \"America/Hermosillo\" | \"America/Indiana/Indianapolis\" | \"America/Indiana/Knox\" | \"America/Indiana/Marengo\" | \"America/Indiana/Petersburg\" | \"America/Indiana/Tell_City\" | \"America/Indiana/Vevay\" | \"America/Indiana/Vincennes\" | \"America/Indiana/Winamac\" | \"America/Inuvik\" | \"America/Iqaluit\" | \"America/Jamaica\" | \"America/Juneau\" | \"America/Kentucky/Louisville\" | \"America/Kentucky/Monticello\" | \"America/La_Paz\" | \"America/Lima\" | \"America/Los_Angeles\" | \"America/Maceio\" | \"America/Managua\" | \"America/Manaus\" | \"America/Martinique\" | \"America/Matamoros\" | \"America/Mazatlan\" | \"America/Menominee\" | \"America/Merida\" | \"America/Metlakatla\" | \"America/Mexico_City\" | \"America/Miquelon\" | \"America/Moncton\" | \"America/Monterrey\" | \"America/Montevideo\" | \"America/New_York\" | \"America/Nipigon\" | \"America/Nome\" | \"America/Noronha\" | \"America/North_Dakota/Beulah\" | \"America/North_Dakota/Center\" | \"America/North_Dakota/New_Salem\" | \"America/Nuuk\" | \"America/Ojinaga\" | \"America/Panama\" | \"America/Pangnirtung\" | \"America/Paramaribo\" | \"America/Phoenix\" | \"America/Port-au-Prince\" | \"America/Porto_Velho\" | \"America/Puerto_Rico\" | \"America/Punta_Arenas\" | \"America/Rainy_River\" | \"America/Rankin_Inlet\" | \"America/Recife\" | \"America/Regina\" | \"America/Resolute\" | \"America/Rio_Branco\" | \"America/Santarem\" | \"America/Santiago\" | \"America/Santo_Domingo\" | \"America/Sao_Paulo\" | \"America/Scoresbysund\" | \"America/Sitka\" | \"America/St_Johns\" | \"America/Swift_Current\" | \"America/Tegucigalpa\" | \"America/Thule\" | \"America/Thunder_Bay\" | \"America/Tijuana\" | \"America/Toronto\" | \"America/Vancouver\" | \"America/Whitehorse\" | \"America/Winnipeg\" | \"America/Yakutat\" | \"America/Yellowknife\" | \"Antarctica/Casey\" | \"Antarctica/Davis\" | \"Antarctica/Macquarie\" | \"Antarctica/Mawson\" | \"Antarctica/Palmer\" | \"Antarctica/Rothera\" | \"Antarctica/Troll\" | \"Antarctica/Vostok\" | \"Asia/Almaty\" | \"Asia/Amman\" | \"Asia/Anadyr\" | \"Asia/Aqtau\" | \"Asia/Aqtobe\" | \"Asia/Ashgabat\" | \"Asia/Atyrau\" | \"Asia/Baghdad\" | \"Asia/Baku\" | \"Asia/Bangkok\" | \"Asia/Barnaul\" | \"Asia/Beirut\" | \"Asia/Bishkek\" | \"Asia/Brunei\" | \"Asia/Chita\" | \"Asia/Choibalsan\" | \"Asia/Colombo\" | \"Asia/Damascus\" | \"Asia/Dhaka\" | \"Asia/Dili\" | \"Asia/Dubai\" | \"Asia/Dushanbe\" | \"Asia/Famagusta\" | \"Asia/Gaza\" | \"Asia/Hebron\" | \"Asia/Ho_Chi_Minh\" | \"Asia/Hong_Kong\" | \"Asia/Hovd\" | \"Asia/Irkutsk\" | \"Asia/Jakarta\" | \"Asia/Jayapura\" | \"Asia/Jerusalem\" | \"Asia/Kabul\" | \"Asia/Kamchatka\" | \"Asia/Karachi\" | \"Asia/Kathmandu\" | \"Asia/Khandyga\" | \"Asia/Kolkata\" | \"Asia/Krasnoyarsk\" | \"Asia/Kuala_Lumpur\" | \"Asia/Kuching\" | \"Asia/Macau\" | \"Asia/Magadan\" | \"Asia/Makassar\" | \"Asia/Manila\" | \"Asia/Nicosia\" | \"Asia/Novokuznetsk\" | \"Asia/Novosibirsk\" | \"Asia/Omsk\" | \"Asia/Oral\" | \"Asia/Pontianak\" | \"Asia/Pyongyang\" | \"Asia/Qatar\" | \"Asia/Qostanay\" | \"Asia/Qyzylorda\" | \"Asia/Riyadh\" | \"Asia/Sakhalin\" | \"Asia/Samarkand\" | \"Asia/Seoul\" | \"Asia/Shanghai\" | \"Asia/Singapore\" | \"Asia/Srednekolymsk\" | \"Asia/Taipei\" | \"Asia/Tashkent\" | \"Asia/Tbilisi\" | \"Asia/Tehran\" | \"Asia/Thimphu\" | \"Asia/Tokyo\" | \"Asia/Tomsk\" | \"Asia/Ulaanbaatar\" | \"Asia/Urumqi\" | \"Asia/Ust-Nera\" | \"Asia/Vladivostok\" | \"Asia/Yakutsk\" | \"Asia/Yangon\" | \"Asia/Yekaterinburg\" | \"Asia/Yerevan\" | \"Atlantic/Azores\" | \"Atlantic/Bermuda\" | \"Atlantic/Canary\" | \"Atlantic/Cape_Verde\" | \"Atlantic/Faroe\" | \"Atlantic/Madeira\" | \"Atlantic/Reykjavik\" | \"Atlantic/South_Georgia\" | \"Atlantic/Stanley\" | \"Australia/Adelaide\" | \"Australia/Brisbane\" | \"Australia/Broken_Hill\" | \"Australia/Darwin\" | \"Australia/Eucla\" | \"Australia/Hobart\" | \"Australia/Lindeman\" | \"Australia/Lord_Howe\" | \"Australia/Melbourne\" | \"Australia/Perth\" | \"Australia/Sydney\" | \"CET\" | \"CST6CDT\" | \"EET\" | \"EST\" | \"EST5EDT\" | \"Etc/GMT\" | \"Etc/GMT-1\" | \"Etc/GMT-10\" | \"Etc/GMT-11\" | \"Etc/GMT-12\" | \"Etc/GMT-13\" | \"Etc/GMT-14\" | \"Etc/GMT-2\" | \"Etc/GMT-3\" | \"Etc/GMT-4\" | \"Etc/GMT-5\" | \"Etc/GMT-6\" | \"Etc/GMT-7\" | \"Etc/GMT-8\" | \"Etc/GMT-9\" | \"Etc/GMT+1\" | \"Etc/GMT+10\" | \"Etc/GMT+11\" | \"Etc/GMT+12\" | \"Etc/GMT+2\" | \"Etc/GMT+3\" | \"Etc/GMT+4\" | \"Etc/GMT+5\" | \"Etc/GMT+6\" | \"Etc/GMT+7\" | \"Etc/GMT+8\" | \"Etc/GMT+9\" | \"Etc/UTC\" | \"Europe/Amsterdam\" | \"Europe/Andorra\" | \"Europe/Astrakhan\" | \"Europe/Athens\" | \"Europe/Belgrade\" | \"Europe/Berlin\" | \"Europe/Brussels\" | \"Europe/Bucharest\" | \"Europe/Budapest\" | \"Europe/Chisinau\" | \"Europe/Copenhagen\" | \"Europe/Dublin\" | \"Europe/Gibraltar\" | \"Europe/Helsinki\" | \"Europe/Istanbul\" | \"Europe/Kaliningrad\" | \"Europe/Kiev\" | \"Europe/Kirov\" | \"Europe/Lisbon\" | \"Europe/London\" | \"Europe/Luxembourg\" | \"Europe/Madrid\" | \"Europe/Malta\" | \"Europe/Minsk\" | \"Europe/Monaco\" | \"Europe/Moscow\" | \"Europe/Oslo\" | \"Europe/Paris\" | \"Europe/Prague\" | \"Europe/Riga\" | \"Europe/Rome\" | \"Europe/Samara\" | \"Europe/Saratov\" | \"Europe/Simferopol\" | \"Europe/Sofia\" | \"Europe/Stockholm\" | \"Europe/Tallinn\" | \"Europe/Tirane\" | \"Europe/Ulyanovsk\" | \"Europe/Uzhgorod\" | \"Europe/Vienna\" | \"Europe/Vilnius\" | \"Europe/Volgograd\" | \"Europe/Warsaw\" | \"Europe/Zaporozhye\" | \"Europe/Zurich\" | \"HST\" | \"Indian/Chagos\" | \"Indian/Christmas\" | \"Indian/Cocos\" | \"Indian/Kerguelen\" | \"Indian/Mahe\" | \"Indian/Maldives\" | \"Indian/Mauritius\" | \"Indian/Reunion\" | \"MET\" | \"MST\" | \"MST7MDT\" | \"Pacific/Apia\" | \"Pacific/Auckland\" | \"Pacific/Bougainville\" | \"Pacific/Chatham\" | \"Pacific/Chuuk\" | \"Pacific/Easter\" | \"Pacific/Efate\" | \"Pacific/Fakaofo\" | \"Pacific/Fiji\" | \"Pacific/Funafuti\" | \"Pacific/Galapagos\" | \"Pacific/Gambier\" | \"Pacific/Guadalcanal\" | \"Pacific/Guam\" | \"Pacific/Honolulu\" | \"Pacific/Kanton\" | \"Pacific/Kiritimati\" | \"Pacific/Kosrae\" | \"Pacific/Kwajalein\" | \"Pacific/Majuro\" | \"Pacific/Marquesas\" | \"Pacific/Nauru\" | \"Pacific/Niue\" | \"Pacific/Norfolk\" | \"Pacific/Noumea\" | \"Pacific/Pago_Pago\" | \"Pacific/Palau\" | \"Pacific/Pitcairn\" | \"Pacific/Pohnpei\" | \"Pacific/Port_Moresby\" | \"Pacific/Rarotonga\" | \"Pacific/Tahiti\" | \"Pacific/Tarawa\" | \"Pacific/Tongatapu\" | \"Pacific/Wake\" | \"Pacific/Wallis\" | \"PST8PDT\" | \"WET\"", - "value": "\"Africa/Abidjan\" | \"Africa/Algiers\" | \"Africa/Bissau\" | \"Africa/Cairo\" | \"Africa/Casablanca\" | \"Africa/Ceuta\" | \"Africa/El_Aaiun\" | \"Africa/Johannesburg\" | \"Africa/Juba\" | \"Africa/Khartoum\" | \"Africa/Lagos\" | \"Africa/Maputo\" | \"Africa/Monrovia\" | \"Africa/Nairobi\" | \"Africa/Ndjamena\" | \"Africa/Sao_Tome\" | \"Africa/Tripoli\" | \"Africa/Tunis\" | \"Africa/Windhoek\" | \"America/Adak\" | \"America/Anchorage\" | \"America/Araguaina\" | \"America/Argentina/Buenos_Aires\" | \"America/Argentina/Catamarca\" | \"America/Argentina/Cordoba\" | \"America/Argentina/Jujuy\" | \"America/Argentina/La_Rioja\" | \"America/Argentina/Mendoza\" | \"America/Argentina/Rio_Gallegos\" | \"America/Argentina/Salta\" | \"America/Argentina/San_Juan\" | \"America/Argentina/San_Luis\" | \"America/Argentina/Tucuman\" | \"America/Argentina/Ushuaia\" | \"America/Asuncion\" | \"America/Bahia\" | \"America/Bahia_Banderas\" | \"America/Barbados\" | \"America/Belem\" | \"America/Belize\" | \"America/Boa_Vista\" | \"America/Bogota\" | \"America/Boise\" | \"America/Cambridge_Bay\" | \"America/Campo_Grande\" | \"America/Cancun\" | \"America/Caracas\" | \"America/Cayenne\" | \"America/Chicago\" | \"America/Chihuahua\" | \"America/Costa_Rica\" | \"America/Cuiaba\" | \"America/Danmarkshavn\" | \"America/Dawson\" | \"America/Dawson_Creek\" | \"America/Denver\" | \"America/Detroit\" | \"America/Edmonton\" | \"America/Eirunepe\" | \"America/El_Salvador\" | \"America/Fort_Nelson\" | \"America/Fortaleza\" | \"America/Glace_Bay\" | \"America/Goose_Bay\" | \"America/Grand_Turk\" | \"America/Guatemala\" | \"America/Guayaquil\" | \"America/Guyana\" | \"America/Halifax\" | \"America/Havana\" | \"America/Hermosillo\" | \"America/Indiana/Indianapolis\" | \"America/Indiana/Knox\" | \"America/Indiana/Marengo\" | \"America/Indiana/Petersburg\" | \"America/Indiana/Tell_City\" | \"America/Indiana/Vevay\" | \"America/Indiana/Vincennes\" | \"America/Indiana/Winamac\" | \"America/Inuvik\" | \"America/Iqaluit\" | \"America/Jamaica\" | \"America/Juneau\" | \"America/Kentucky/Louisville\" | \"America/Kentucky/Monticello\" | \"America/La_Paz\" | \"America/Lima\" | \"America/Los_Angeles\" | \"America/Maceio\" | \"America/Managua\" | \"America/Manaus\" | \"America/Martinique\" | \"America/Matamoros\" | \"America/Mazatlan\" | \"America/Menominee\" | \"America/Merida\" | \"America/Metlakatla\" | \"America/Mexico_City\" | \"America/Miquelon\" | \"America/Moncton\" | \"America/Monterrey\" | \"America/Montevideo\" | \"America/New_York\" | \"America/Nipigon\" | \"America/Nome\" | \"America/Noronha\" | \"America/North_Dakota/Beulah\" | \"America/North_Dakota/Center\" | \"America/North_Dakota/New_Salem\" | \"America/Nuuk\" | \"America/Ojinaga\" | \"America/Panama\" | \"America/Pangnirtung\" | \"America/Paramaribo\" | \"America/Phoenix\" | \"America/Port-au-Prince\" | \"America/Porto_Velho\" | \"America/Puerto_Rico\" | \"America/Punta_Arenas\" | \"America/Rainy_River\" | \"America/Rankin_Inlet\" | \"America/Recife\" | \"America/Regina\" | \"America/Resolute\" | \"America/Rio_Branco\" | \"America/Santarem\" | \"America/Santiago\" | \"America/Santo_Domingo\" | \"America/Sao_Paulo\" | \"America/Scoresbysund\" | \"America/Sitka\" | \"America/St_Johns\" | \"America/Swift_Current\" | \"America/Tegucigalpa\" | \"America/Thule\" | \"America/Thunder_Bay\" | \"America/Tijuana\" | \"America/Toronto\" | \"America/Vancouver\" | \"America/Whitehorse\" | \"America/Winnipeg\" | \"America/Yakutat\" | \"America/Yellowknife\" | \"Antarctica/Casey\" | \"Antarctica/Davis\" | \"Antarctica/Macquarie\" | \"Antarctica/Mawson\" | \"Antarctica/Palmer\" | \"Antarctica/Rothera\" | \"Antarctica/Troll\" | \"Antarctica/Vostok\" | \"Asia/Almaty\" | \"Asia/Amman\" | \"Asia/Anadyr\" | \"Asia/Aqtau\" | \"Asia/Aqtobe\" | \"Asia/Ashgabat\" | \"Asia/Atyrau\" | \"Asia/Baghdad\" | \"Asia/Baku\" | \"Asia/Bangkok\" | \"Asia/Barnaul\" | \"Asia/Beirut\" | \"Asia/Bishkek\" | \"Asia/Brunei\" | \"Asia/Chita\" | \"Asia/Choibalsan\" | \"Asia/Colombo\" | \"Asia/Damascus\" | \"Asia/Dhaka\" | \"Asia/Dili\" | \"Asia/Dubai\" | \"Asia/Dushanbe\" | \"Asia/Famagusta\" | \"Asia/Gaza\" | \"Asia/Hebron\" | \"Asia/Ho_Chi_Minh\" | \"Asia/Hong_Kong\" | \"Asia/Hovd\" | \"Asia/Irkutsk\" | \"Asia/Jakarta\" | \"Asia/Jayapura\" | \"Asia/Jerusalem\" | \"Asia/Kabul\" | \"Asia/Kamchatka\" | \"Asia/Karachi\" | \"Asia/Kathmandu\" | \"Asia/Khandyga\" | \"Asia/Kolkata\" | \"Asia/Krasnoyarsk\" | \"Asia/Kuala_Lumpur\" | \"Asia/Kuching\" | \"Asia/Macau\" | \"Asia/Magadan\" | \"Asia/Makassar\" | \"Asia/Manila\" | \"Asia/Nicosia\" | \"Asia/Novokuznetsk\" | \"Asia/Novosibirsk\" | \"Asia/Omsk\" | \"Asia/Oral\" | \"Asia/Pontianak\" | \"Asia/Pyongyang\" | \"Asia/Qatar\" | \"Asia/Qostanay\" | \"Asia/Qyzylorda\" | \"Asia/Riyadh\" | \"Asia/Sakhalin\" | \"Asia/Samarkand\" | \"Asia/Seoul\" | \"Asia/Shanghai\" | \"Asia/Singapore\" | \"Asia/Srednekolymsk\" | \"Asia/Taipei\" | \"Asia/Tashkent\" | \"Asia/Tbilisi\" | \"Asia/Tehran\" | \"Asia/Thimphu\" | \"Asia/Tokyo\" | \"Asia/Tomsk\" | \"Asia/Ulaanbaatar\" | \"Asia/Urumqi\" | \"Asia/Ust-Nera\" | \"Asia/Vladivostok\" | \"Asia/Yakutsk\" | \"Asia/Yangon\" | \"Asia/Yekaterinburg\" | \"Asia/Yerevan\" | \"Atlantic/Azores\" | \"Atlantic/Bermuda\" | \"Atlantic/Canary\" | \"Atlantic/Cape_Verde\" | \"Atlantic/Faroe\" | \"Atlantic/Madeira\" | \"Atlantic/Reykjavik\" | \"Atlantic/South_Georgia\" | \"Atlantic/Stanley\" | \"Australia/Adelaide\" | \"Australia/Brisbane\" | \"Australia/Broken_Hill\" | \"Australia/Darwin\" | \"Australia/Eucla\" | \"Australia/Hobart\" | \"Australia/Lindeman\" | \"Australia/Lord_Howe\" | \"Australia/Melbourne\" | \"Australia/Perth\" | \"Australia/Sydney\" | \"CET\" | \"CST6CDT\" | \"EET\" | \"EST\" | \"EST5EDT\" | \"Etc/GMT\" | \"Etc/GMT-1\" | \"Etc/GMT-10\" | \"Etc/GMT-11\" | \"Etc/GMT-12\" | \"Etc/GMT-13\" | \"Etc/GMT-14\" | \"Etc/GMT-2\" | \"Etc/GMT-3\" | \"Etc/GMT-4\" | \"Etc/GMT-5\" | \"Etc/GMT-6\" | \"Etc/GMT-7\" | \"Etc/GMT-8\" | \"Etc/GMT-9\" | \"Etc/GMT+1\" | \"Etc/GMT+10\" | \"Etc/GMT+11\" | \"Etc/GMT+12\" | \"Etc/GMT+2\" | \"Etc/GMT+3\" | \"Etc/GMT+4\" | \"Etc/GMT+5\" | \"Etc/GMT+6\" | \"Etc/GMT+7\" | \"Etc/GMT+8\" | \"Etc/GMT+9\" | \"Etc/UTC\" | \"Europe/Amsterdam\" | \"Europe/Andorra\" | \"Europe/Astrakhan\" | \"Europe/Athens\" | \"Europe/Belgrade\" | \"Europe/Berlin\" | \"Europe/Brussels\" | \"Europe/Bucharest\" | \"Europe/Budapest\" | \"Europe/Chisinau\" | \"Europe/Copenhagen\" | \"Europe/Dublin\" | \"Europe/Gibraltar\" | \"Europe/Helsinki\" | \"Europe/Istanbul\" | \"Europe/Kaliningrad\" | \"Europe/Kiev\" | \"Europe/Kirov\" | \"Europe/Lisbon\" | \"Europe/London\" | \"Europe/Luxembourg\" | \"Europe/Madrid\" | \"Europe/Malta\" | \"Europe/Minsk\" | \"Europe/Monaco\" | \"Europe/Moscow\" | \"Europe/Oslo\" | \"Europe/Paris\" | \"Europe/Prague\" | \"Europe/Riga\" | \"Europe/Rome\" | \"Europe/Samara\" | \"Europe/Saratov\" | \"Europe/Simferopol\" | \"Europe/Sofia\" | \"Europe/Stockholm\" | \"Europe/Tallinn\" | \"Europe/Tirane\" | \"Europe/Ulyanovsk\" | \"Europe/Uzhgorod\" | \"Europe/Vienna\" | \"Europe/Vilnius\" | \"Europe/Volgograd\" | \"Europe/Warsaw\" | \"Europe/Zaporozhye\" | \"Europe/Zurich\" | \"HST\" | \"Indian/Chagos\" | \"Indian/Christmas\" | \"Indian/Cocos\" | \"Indian/Kerguelen\" | \"Indian/Mahe\" | \"Indian/Maldives\" | \"Indian/Mauritius\" | \"Indian/Reunion\" | \"MET\" | \"MST\" | \"MST7MDT\" | \"Pacific/Apia\" | \"Pacific/Auckland\" | \"Pacific/Bougainville\" | \"Pacific/Chatham\" | \"Pacific/Chuuk\" | \"Pacific/Easter\" | \"Pacific/Efate\" | \"Pacific/Fakaofo\" | \"Pacific/Fiji\" | \"Pacific/Funafuti\" | \"Pacific/Galapagos\" | \"Pacific/Gambier\" | \"Pacific/Guadalcanal\" | \"Pacific/Guam\" | \"Pacific/Honolulu\" | \"Pacific/Kanton\" | \"Pacific/Kiritimati\" | \"Pacific/Kosrae\" | \"Pacific/Kwajalein\" | \"Pacific/Majuro\" | \"Pacific/Marquesas\" | \"Pacific/Nauru\" | \"Pacific/Niue\" | \"Pacific/Norfolk\" | \"Pacific/Noumea\" | \"Pacific/Pago_Pago\" | \"Pacific/Palau\" | \"Pacific/Pitcairn\" | \"Pacific/Pohnpei\" | \"Pacific/Port_Moresby\" | \"Pacific/Rarotonga\" | \"Pacific/Tahiti\" | \"Pacific/Tarawa\" | \"Pacific/Tongatapu\" | \"Pacific/Wake\" | \"Pacific/Wallis\" | \"PST8PDT\" | \"WET\"" - }, - "value": "export function useTimezone<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Timezone {\n const {localization} = useApi();\n\n return useSubscription(localization.timezone);\n}" - } - }, - "UseTranslateGeneratedType": { - "src/surfaces/checkout/preact/translate.ts": { - "filePath": "src/surfaces/checkout/preact/translate.ts", - "name": "UseTranslateGeneratedType", - "description": "Returns the `I18nTranslate` interface used to translate strings.", - "isPublicDocs": true, - "params": [], - "returns": { - "filePath": "src/surfaces/checkout/preact/translate.ts", - "description": "", - "name": "I18nTranslate", - "value": "I18nTranslate" - }, - "value": "export function useTranslate<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): I18nTranslate {\n const api = useApi();\n return api.i18n.translate.bind(api.i18n);\n}" - } - }, - "BaseElementPropsWithChildren": { - "src/surfaces/checkout/components/Abbreviation.ts": { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "name": "BaseElementPropsWithChildren", - "description": "Used when an element has children.", - "members": [ - { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "preact.ComponentChildren", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "preact.Key", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "syntaxKind": "PropertySignature", - "name": "ref", - "value": "preact.Ref", - "description": "", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "syntaxKind": "PropertySignature", - "name": "slot", - "value": "Lowercase", - "description": "", - "isOptional": true - } - ], - "value": "export interface BaseElementPropsWithChildren extends BaseElementProps {\n children?: preact.ComponentChildren;\n}" - } - }, - "ComponentChildren": { - "src/surfaces/checkout/components/components.ts": { - "filePath": "src/surfaces/checkout/components/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ComponentChildren", - "value": "any", - "description": "TODO: Update `any` type here after this is resolved https://github.com/Shopify/ui-api-design/issues/139" - } - }, - "AbbreviationElementProps": { - "src/surfaces/checkout/components/Abbreviation.ts": { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "name": "AbbreviationElementProps", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "syntaxKind": "PropertySignature", - "name": "title", - "value": "string", - "description": "Defines the full expansion of the abbreviation or acronym. Helps user agents and users understand the meaning of the abbreviated text.\n\nLearn more about the [abbreviation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr).", - "isOptional": true, - "defaultValue": "''" - } - ], - "value": "export interface AbbreviationElementProps extends Pick {\n}" - } - }, - "AbbreviationElement": { - "src/surfaces/checkout/components/Abbreviation.ts": { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "name": "AbbreviationElement", - "description": "", - "members": [ - { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "syntaxKind": "PropertySignature", - "name": "accessKey", - "value": "string", - "description": "The **`HTMLElement.accessKey`** property sets the keystroke which a user can press to jump to a given element.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKey)" - }, - { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "syntaxKind": "PropertySignature", - "name": "accessKeyLabel", - "value": "string", - "description": "The **`HTMLElement.accessKeyLabel`** read-only property returns a string containing the element's browser-assigned access key (if any); otherwise it returns an empty string.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/HTMLElement/accessKeyLabel)" - }, - { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "syntaxKind": "MethodSignature", - "name": "addEventListener", - "value": "{ (type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void; (type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void; }", - "description": "\nThe **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)\n\nThe **`addEventListener()`** method of the EventTarget interface sets up a function that will be called whenever the specified event is delivered to the target.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/EventTarget/addEventListener)" - }, - { - "filePath": "src/surfaces/checkout/components/Abbreviation.ts", - "syntaxKind": "MethodSignature", - "name": "after", - "value": "(...nodes: (string | Node)[]) => void", - "description": "Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes.\n\nThrows a \"HierarchyRequestError\" DOMException if the constraints of the node tree are violated.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/after)" - }, + "filePath": "src/surfaces/checkout/components/Abbreviation.ts", + "syntaxKind": "MethodSignature", + "name": "after", + "value": "(...nodes: (string | Node)[]) => void", + "description": "Inserts nodes just after node, while replacing strings in nodes with equivalent Text nodes.\n\nThrows a \"HierarchyRequestError\" DOMException if the constraints of the node tree are violated.\n\n[MDN Reference](https://developer.mozilla.org/docs/Web/API/CharacterData/after)" + }, { "filePath": "src/surfaces/checkout/components/Abbreviation.ts", "syntaxKind": "MethodSignature", @@ -12477,7 +11233,7 @@ "syntaxKind": "PropertySignature", "name": "title", "value": "string", - "description": "Defines the full expansion of the abbreviation or acronym. Helps user agents and users understand the meaning of the abbreviated text.\n\nLearn more about the [abbreviation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr).", + "description": "Defines the full expansion of the abbreviation or acronym.\n\nHelps user agents and users understand the meaning of the abbreviated text.", "isOptional": true, "defaultValue": "''" }, @@ -12540,7 +11296,7 @@ "syntaxKind": "PropertySignature", "name": "title", "value": "string", - "description": "Defines the full expansion of the abbreviation or acronym. Helps user agents and users understand the meaning of the abbreviated text.\n\nLearn more about the [abbreviation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr).", + "description": "Defines the full expansion of the abbreviation or acronym.\n\nHelps user agents and users understand the meaning of the abbreviated text.", "isOptional": true, "defaultValue": "''" } @@ -12548,24 +11304,6 @@ "value": "export interface AbbreviationProps extends AbbreviationElementProps {\n}" } }, - "CallbackEvent": { - "src/surfaces/checkout/components/Announcement.ts": { - "filePath": "src/surfaces/checkout/components/Announcement.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", - "description": "An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners." - } - }, - "CallbackEventListener": { - "src/surfaces/checkout/components/Announcement.ts": { - "filePath": "src/surfaces/checkout/components/Announcement.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", - "description": "A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag." - } - }, "AnnouncementEvents": { "src/surfaces/checkout/components/Announcement.ts": { "filePath": "src/surfaces/checkout/components/Announcement.ts", @@ -12577,7 +11315,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -12593,7 +11331,7 @@ "syntaxKind": "PropertySignature", "name": "onToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.", + "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true } ], @@ -12612,7 +11350,7 @@ "syntaxKind": "PropertySignature", "name": "aftertoggle", "value": "CallbackEventListener", - "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -12628,11 +11366,29 @@ "syntaxKind": "PropertySignature", "name": "toggle", "value": "CallbackEventListener", - "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true } ], - "value": "export interface AnnouncementElementEvents {\n /**\n * A callback that fires when the element state changes, after any toggle animations have finished.\n *\n * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).\n */\n aftertoggle?: CallbackEventListener;\n /**\n * A callback that fires when the announcement is dismissed by the user clicking the close button or by calling the `dismiss()` method programmatically.\n */\n dismiss?: CallbackEventListener;\n /**\n * A callback that fires immediately when the element state changes, before any animations.\n *\n * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).\n */\n toggle?: CallbackEventListener;\n}" + "value": "export interface AnnouncementElementEvents {\n /**\n * A callback that fires when the element state changes, after any toggle animations have finished.\n *\n * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).\n */\n aftertoggle?: CallbackEventListener;\n /**\n * A callback that fires when the announcement is dismissed by the user clicking the close button or by calling the `dismiss()` method programmatically.\n */\n dismiss?: CallbackEventListener;\n /**\n * A callback that fires immediately when the element state changes, before any animations.\n *\n * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).\n */\n toggle?: CallbackEventListener;\n}" + } + }, + "CallbackEventListener": { + "src/surfaces/checkout/components/Announcement.ts": { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent & TData): void;\n}) | null", + "description": "A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag." + } + }, + "CallbackEvent": { + "src/surfaces/checkout/components/Announcement.ts": { + "filePath": "src/surfaces/checkout/components/Announcement.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners." } }, "ToggleArgumentsEvent": { @@ -14983,7 +13739,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -14999,7 +13755,7 @@ "syntaxKind": "PropertySignature", "name": "onToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.", + "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true } ], @@ -20098,7 +18854,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -20173,7 +18929,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -20379,7 +19135,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -20442,7 +19198,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -20639,7 +19395,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -21353,7 +20109,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -23107,7 +21863,7 @@ "src/surfaces/checkout/components/Button.ts": { "filePath": "src/surfaces/checkout/components/Button.ts", "name": "ButtonElementProps", - "description": "", + "description": "Configure the following properties on the button component.", "isPublicDocs": true, "members": [ { @@ -23123,7 +21879,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -23132,7 +21888,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -23209,7 +21965,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the button component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" }, @@ -23223,7 +21979,7 @@ "defaultValue": "'auto'" } ], - "value": "export interface ButtonElementProps extends Pick {\n target?: Extract;\n tone?: Extract;\n /**\n * The behavioral type of the button component, which determines what action it performs when activated.\n *\n * - `submit`: Submits the nearest containing form.\n * - `button`: Performs no default action, relying on the `click` event handler for behavior.\n *\n * This property is ignored if `href` or `commandFor`/`command` is set.\n *\n * @default 'button'\n */\n type?: Extract;\n variant?: Extract;\n}" + "value": "export interface ButtonElementProps extends Pick {\n target?: Extract;\n tone?: Extract;\n type?: Extract;\n variant?: Extract;\n}" } }, "ButtonEvents": { @@ -23248,7 +22004,7 @@ "src/surfaces/checkout/components/Button.ts": { "filePath": "src/surfaces/checkout/components/Button.ts", "name": "ButtonElementEvents", - "description": "", + "description": "The button component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -23870,7 +22626,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -23879,7 +22635,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -25621,7 +24377,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the button component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" }, @@ -25672,7 +24428,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -25681,7 +24437,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -25766,7 +24522,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the button component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" }, @@ -25811,7 +24567,7 @@ "syntaxKind": "PropertySignature", "name": "remoteMethods", "value": "Record unknown>", - "description": "", + "description": "Construct a type with a set of properties K of type T", "isOptional": true } ], @@ -25822,7 +24578,7 @@ "src/surfaces/checkout/components/Checkbox.ts": { "filePath": "src/surfaces/checkout/components/Checkbox.ts", "name": "CheckboxElementProps", - "description": "", + "description": "Configure the following properties on the checkbox component.", "isPublicDocs": true, "members": [ { @@ -25847,7 +24603,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -25856,7 +24612,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -25898,7 +24654,7 @@ "syntaxKind": "PropertySignature", "name": "label", "value": "string", - "description": "The visual content to use as the control label. Use a string to provide a simple text label displayed to the user.\n\nIf a `label` slot is also provided, the slot content takes precedence. [Learn more about slots](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox#slots-propertydetail-label).", + "description": "The text displayed as the control label, which identifies the purpose of the control to users. This label is associated with the control for accessibility.", "isOptional": true }, { @@ -25914,7 +24670,7 @@ "syntaxKind": "PropertySignature", "name": "required", "value": "boolean", - "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.\n\nAdds semantic meaning for accessibility. Doesn't trigger automatic validation or display an error. Implement validation logic yourself and use the `error` prop to show results.", + "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.", "isOptional": true, "defaultValue": "false" }, @@ -25927,7 +24683,7 @@ "isOptional": true } ], - "value": "export interface CheckboxElementProps extends Pick {\n command?: Extract;\n /**\n * The visual content to use as the control label. Use a string to provide a simple text label displayed to the user.\n *\n * If a `label` slot is also provided, the slot content takes precedence. [Learn more about slots](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox#slots-propertydetail-label).\n */\n label?: string;\n}" + "value": "export interface CheckboxElementProps extends Pick {\n command?: Extract;\n}" } }, "CheckboxEvents": { @@ -25935,7 +24691,6 @@ "filePath": "src/surfaces/checkout/components/Checkbox.ts", "name": "CheckboxEvents", "description": "", - "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/components/Checkbox.ts", @@ -25953,7 +24708,7 @@ "src/surfaces/checkout/components/Checkbox.ts": { "filePath": "src/surfaces/checkout/components/Checkbox.ts", "name": "CheckboxElementEvents", - "description": "", + "description": "The checkbox component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -25973,7 +24728,6 @@ "filePath": "src/surfaces/checkout/components/Checkbox.ts", "name": "CheckboxElement", "description": "", - "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/components/Checkbox.ts", @@ -26585,7 +25339,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -26594,7 +25348,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -27050,7 +25804,7 @@ "syntaxKind": "PropertySignature", "name": "label", "value": "string", - "description": "The visual content to use as the control label. Use a string to provide a simple text label displayed to the user.\n\nIf a `label` slot is also provided, the slot content takes precedence. [Learn more about slots](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox#slots-propertydetail-label).", + "description": "The text displayed as the control label, which identifies the purpose of the control to users. This label is associated with the control for accessibility.", "isOptional": true }, { @@ -28121,7 +26875,7 @@ "syntaxKind": "PropertySignature", "name": "required", "value": "boolean", - "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.\n\nAdds semantic meaning for accessibility. Doesn't trigger automatic validation or display an error. Implement validation logic yourself and use the `error` prop to show results.", + "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.", "isOptional": true, "defaultValue": "false" }, @@ -28348,31 +27102,11 @@ "value": "export interface CheckboxElement extends CheckboxElementProps, Omit {\n onchange: CheckboxEvents['onChange'];\n}" } }, - "CheckboxElementSlots": { - "src/surfaces/checkout/components/Checkbox.ts": { - "filePath": "src/surfaces/checkout/components/Checkbox.ts", - "name": "CheckboxElementSlots", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/components/Checkbox.ts", - "syntaxKind": "PropertySignature", - "name": "label", - "value": "HTMLElement", - "description": "The visual content to use as the control label.\n\nUse an `HTMLElement` as a rich control label composed of elements. Only an `s-text` element is supported with plain text and `s-link` as its only allowed children. Any other elements are stripped while preserving their text content.", - "isOptional": true - } - ], - "value": "export interface CheckboxElementSlots {\n /**\n * The visual content to use as the control label.\n *\n * Use an `HTMLElement` as a rich control label composed of elements. Only an `s-text` element is supported with plain text and `s-link` as its only allowed children. Any other elements are stripped while preserving their text content.\n */\n label?: HTMLElement;\n}" - } - }, "CheckboxProps": { "src/surfaces/checkout/components/Checkbox.ts": { "filePath": "src/surfaces/checkout/components/Checkbox.ts", "name": "CheckboxProps", "description": "", - "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/components/Checkbox.ts", @@ -28396,7 +27130,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -28405,7 +27139,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -28447,7 +27181,7 @@ "syntaxKind": "PropertySignature", "name": "label", "value": "string", - "description": "The visual content to use as the control label. Use a string to provide a simple text label displayed to the user.\n\nIf a `label` slot is also provided, the slot content takes precedence. [Learn more about slots](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox#slots-propertydetail-label).", + "description": "The text displayed as the control label, which identifies the purpose of the control to users. This label is associated with the control for accessibility.", "isOptional": true }, { @@ -28471,7 +27205,7 @@ "syntaxKind": "PropertySignature", "name": "required", "value": "boolean", - "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.\n\nAdds semantic meaning for accessibility. Doesn't trigger automatic validation or display an error. Implement validation logic yourself and use the `error` prop to show results.", + "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.", "isOptional": true, "defaultValue": "false" }, @@ -28491,7 +27225,7 @@ "src/surfaces/checkout/components/Chip.ts": { "filePath": "src/surfaces/checkout/components/Chip.ts", "name": "ChipElementProps", - "description": "", + "description": "Configure the following properties on the chip component.", "isPublicDocs": true, "members": [ { @@ -28518,7 +27252,7 @@ "src/surfaces/checkout/components/Chip.ts": { "filePath": "src/surfaces/checkout/components/Chip.ts", "name": "ChipElementSlots", - "description": "", + "description": "The chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -28526,11 +27260,11 @@ "syntaxKind": "PropertySignature", "name": "graphic", "value": "HTMLElement", - "description": "An optional graphic displayed at the start of the chip, such as an icon to visually reinforce the chip's label. Only the `s-icon` element and its `type` attribute are supported.", + "description": "The graphic to display inside of the chip.\n\nOnly `s-icon` element and its `type` attribute are supported.", "isOptional": true } ], - "value": "export interface ChipElementSlots {\n /**\n * An optional graphic displayed at the start of the chip, such as an icon to visually reinforce the chip's label. Only the `s-icon` element and its `type` attribute are supported.\n */\n graphic?: HTMLElement;\n}" + "value": "export interface ChipElementSlots {\n /**\n * The graphic to display inside of the chip.\n *\n * Only `s-icon` element and its `type` attribute are supported.\n */\n graphic?: HTMLElement;\n}" } }, "ChipProps": { @@ -30857,7 +29591,7 @@ "src/surfaces/checkout/components/Choice.ts": { "filePath": "src/surfaces/checkout/components/Choice.ts", "name": "ChoiceElementProps", - "description": "", + "description": "Configure the following properties on the choice component.", "isPublicDocs": true, "members": [ { @@ -30928,7 +29662,7 @@ "src/surfaces/checkout/components/Choice.ts": { "filePath": "src/surfaces/checkout/components/Choice.ts", "name": "ChoiceElementSlots", - "description": "", + "description": "The choice component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -33371,7 +32105,7 @@ "src/surfaces/checkout/components/ChoiceList.ts": { "filePath": "src/surfaces/checkout/components/ChoiceList.ts", "name": "ChoiceListElementProps", - "description": "", + "description": "Configure the following properties on the choice list component.", "isPublicDocs": true, "members": [ { @@ -33438,7 +32172,7 @@ "syntaxKind": "PropertySignature", "name": "values", "value": "string[]", - "description": "An array of `value` attributes for the currently selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.\n\nForm data captures the selected value strings only. Complex nested content inside choices is for display purposes and isn't included in form submissions.", + "description": "An array of the `value`s of the selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.", "isOptional": true }, { @@ -33446,7 +32180,7 @@ "syntaxKind": "PropertySignature", "name": "variant", "value": "'auto' | 'list' | 'inline' | 'block' | 'grid'", - "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.\n\nThe selected content slot is supported only in the default (stacked) variant. `inline` and `grid` ignore it.", + "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.", "isOptional": true, "defaultValue": "'auto'" } @@ -33476,7 +32210,7 @@ "src/surfaces/checkout/components/ChoiceList.ts": { "filePath": "src/surfaces/checkout/components/ChoiceList.ts", "name": "ChoiceListElementEvents", - "description": "", + "description": "The choice list component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -35814,7 +34548,7 @@ "syntaxKind": "PropertySignature", "name": "values", "value": "string[]", - "description": "An array of `value` attributes for the currently selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.\n\nForm data captures the selected value strings only. Complex nested content inside choices is for display purposes and isn't included in form submissions.", + "description": "An array of the `value`s of the selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.", "isOptional": true }, { @@ -35822,7 +34556,7 @@ "syntaxKind": "PropertySignature", "name": "variant", "value": "'auto' | 'list' | 'inline' | 'block' | 'grid'", - "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.\n\nThe selected content slot is supported only in the default (stacked) variant. `inline` and `grid` ignore it.", + "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.", "isOptional": true, "defaultValue": "'auto'" }, @@ -35923,7 +34657,7 @@ "syntaxKind": "PropertySignature", "name": "values", "value": "string[]", - "description": "An array of `value` attributes for the currently selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.\n\nForm data captures the selected value strings only. Complex nested content inside choices is for display purposes and isn't included in form submissions.", + "description": "An array of the `value`s of the selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.", "isOptional": true }, { @@ -35931,7 +34665,7 @@ "syntaxKind": "PropertySignature", "name": "variant", "value": "'auto' | 'list' | 'inline' | 'block' | 'grid'", - "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.\n\nThe selected content slot is supported only in the default (stacked) variant. `inline` and `grid` ignore it.", + "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.", "isOptional": true, "defaultValue": "'auto'" } @@ -35943,7 +34677,7 @@ "src/surfaces/checkout/components/Clickable.ts": { "filePath": "src/surfaces/checkout/components/Clickable.ts", "name": "ClickableElementProps", - "description": "", + "description": "Configure the following properties on the clickable component.", "isPublicDocs": true, "members": [ { @@ -35959,7 +34693,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -36034,7 +34768,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -36043,7 +34777,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -36060,7 +34794,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -36102,7 +34836,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).", + "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)", "isOptional": true, "defaultValue": "''" }, @@ -36237,12 +34971,12 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the clickable component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" } ], - "value": "export interface ClickableElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n target?: Extract;\n /**\n * The behavioral type of the clickable component, which determines what action it performs when activated.\n *\n * - `submit`: Submits the nearest containing form.\n * - `button`: Performs no default action, relying on the `click` event handler for behavior.\n *\n * This property is ignored if `href` or `commandFor`/`command` is set.\n *\n * @default 'button'\n */\n type?: Extract;\n}" + "value": "export interface ClickableElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n target?: Extract;\n type?: Extract;\n}" } }, "ClickableProps": { @@ -36264,7 +34998,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -36325,7 +35059,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -36334,7 +35068,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -36351,7 +35085,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -36393,7 +35127,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).", + "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)", "isOptional": true, "defaultValue": "''" }, @@ -36552,7 +35286,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the clickable component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" } @@ -36598,7 +35332,7 @@ "src/surfaces/checkout/components/Clickable.ts": { "filePath": "src/surfaces/checkout/components/Clickable.ts", "name": "ClickableElementEvents", - "description": "", + "description": "The clickable component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -36648,7 +35382,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -37297,7 +36031,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -37306,7 +36040,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -37386,7 +36120,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -37779,7 +36513,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).", + "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)", "isOptional": true, "defaultValue": "''" }, @@ -39158,7 +37892,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the clickable component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" }, @@ -39185,7 +37919,7 @@ "src/surfaces/checkout/components/ClickableChip.ts": { "filePath": "src/surfaces/checkout/components/ClickableChip.ts", "name": "ClickableChipElementProps", - "description": "", + "description": "Configure the following properties on the clickable chip component.", "isPublicDocs": true, "members": [ { @@ -39201,7 +37935,7 @@ "syntaxKind": "PropertySignature", "name": "disabled", "value": "boolean", - "description": "Disables the chip, preventing all user interaction including clicks and removal. Disabled chips are visually dimmed to indicate they are not interactive.", + "description": "Disables the chip, disallowing any interaction.", "isOptional": true, "defaultValue": "false" }, @@ -39210,7 +37944,7 @@ "syntaxKind": "PropertySignature", "name": "hidden", "value": "boolean", - "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.\n\nWhen using the `removable` variant, keep `hidden` synced with your app state. If `hidden` isn't updated after the chip is removed, the chip can become permanently hidden.", + "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.", "isOptional": true, "defaultValue": "false" }, @@ -39235,7 +37969,7 @@ "syntaxKind": "PropertySignature", "name": "removable", "value": "boolean", - "description": "Whether the chip displays a remove button, allowing users to dismiss it. When `true`, clicking the remove button fires the `remove` event.", + "description": "Whether the chip is removable.", "isOptional": true, "defaultValue": "false" } @@ -39254,7 +37988,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterHide", "value": "(event: Event) => void", - "description": "A callback fired when the chip has fully hidden after a removal animation.\n\nThe `hidden` property will be `true` when this event fires.", + "description": "Event handler when the chip has fully hidden.\n\nThe `hidden` property will be `true` when this event fires.", "isOptional": true }, { @@ -39262,7 +37996,7 @@ "syntaxKind": "PropertySignature", "name": "onClick", "value": "(event: Event) => void", - "description": "A callback fired when the chip is clicked. Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", + "description": "Callback when the chip is clicked.", "isOptional": true }, { @@ -39270,7 +38004,7 @@ "syntaxKind": "PropertySignature", "name": "onRemove", "value": "(event: Event) => void", - "description": "A callback fired when the chip is removed by the user clicking the remove button.", + "description": "Callback when the chip is removed.", "isOptional": true } ], @@ -39281,7 +38015,7 @@ "src/surfaces/checkout/components/ClickableChip.ts": { "filePath": "src/surfaces/checkout/components/ClickableChip.ts", "name": "ClickableChipElementEvents", - "description": "", + "description": "The clickable chip component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -39316,7 +38050,7 @@ "src/surfaces/checkout/components/ClickableChip.ts": { "filePath": "src/surfaces/checkout/components/ClickableChip.ts", "name": "ClickableChipElementSlots", - "description": "", + "description": "The clickable chip component supports slots for additional content placement. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -39324,11 +38058,11 @@ "syntaxKind": "PropertySignature", "name": "graphic", "value": "HTMLElement", - "description": "An optional graphic displayed at the start of the chip, such as an icon to visually reinforce the chip's label. Only the `s-icon` element and its `type` attribute are supported.", + "description": "The graphic to display inside of the chip.\n\nOnly `s-icon` element and its `type` attribute are supported.", "isOptional": true } ], - "value": "export interface ClickableChipElementSlots {\n /**\n * An optional graphic displayed at the start of the chip, such as an icon to visually reinforce the chip's label. Only the `s-icon` element and its `type` attribute are supported.\n */\n graphic?: HTMLElement;\n}" + "value": "export interface ClickableChipElementSlots {\n /**\n * The graphic to display inside of the chip.\n *\n * Only `s-icon` element and its `type` attribute are supported.\n */\n graphic?: HTMLElement;\n}" } }, "ClickableChipElement": { @@ -39994,7 +38728,7 @@ "syntaxKind": "PropertySignature", "name": "disabled", "value": "boolean", - "description": "Disables the chip, preventing all user interaction including clicks and removal. Disabled chips are visually dimmed to indicate they are not interactive.", + "description": "Disables the chip, disallowing any interaction.", "isOptional": true, "defaultValue": "false" }, @@ -40256,7 +38990,7 @@ "syntaxKind": "PropertySignature", "name": "hidden", "value": "boolean", - "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.\n\nWhen using the `removable` variant, keep `hidden` synced with your app state. If `hidden` isn't updated after the chip is removed, the chip can become permanently hidden.", + "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.", "isOptional": true, "defaultValue": "false" }, @@ -41371,7 +40105,7 @@ "syntaxKind": "PropertySignature", "name": "removable", "value": "boolean", - "description": "Whether the chip displays a remove button, allowing users to dismiss it. When `true`, clicking the remove button fires the `remove` event.", + "description": "Whether the chip is removable.", "isOptional": true, "defaultValue": "false" }, @@ -41686,7 +40420,7 @@ "syntaxKind": "PropertySignature", "name": "disabled", "value": "boolean", - "description": "Disables the chip, preventing all user interaction including clicks and removal. Disabled chips are visually dimmed to indicate they are not interactive.", + "description": "Disables the chip, disallowing any interaction.", "isOptional": true, "defaultValue": "false" }, @@ -41695,7 +40429,7 @@ "syntaxKind": "PropertySignature", "name": "hidden", "value": "boolean", - "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.\n\nWhen using the `removable` variant, keep `hidden` synced with your app state. If `hidden` isn't updated after the chip is removed, the chip can become permanently hidden.", + "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.", "isOptional": true, "defaultValue": "false" }, @@ -41720,7 +40454,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterHide", "value": "(event: Event) => void", - "description": "A callback fired when the chip has fully hidden after a removal animation.\n\nThe `hidden` property will be `true` when this event fires.", + "description": "Event handler when the chip has fully hidden.\n\nThe `hidden` property will be `true` when this event fires.", "isOptional": true }, { @@ -41728,7 +40462,7 @@ "syntaxKind": "PropertySignature", "name": "onClick", "value": "(event: Event) => void", - "description": "A callback fired when the chip is clicked. Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", + "description": "Callback when the chip is clicked.", "isOptional": true }, { @@ -41736,7 +40470,7 @@ "syntaxKind": "PropertySignature", "name": "onRemove", "value": "(event: Event) => void", - "description": "A callback fired when the chip is removed by the user clicking the remove button.", + "description": "Callback when the chip is removed.", "isOptional": true }, { @@ -41744,7 +40478,7 @@ "syntaxKind": "PropertySignature", "name": "removable", "value": "boolean", - "description": "Whether the chip displays a remove button, allowing users to dismiss it. When `true`, clicking the remove button fires the `remove` event.", + "description": "Whether the chip is removable.", "isOptional": true, "defaultValue": "false" } @@ -41756,7 +40490,7 @@ "src/surfaces/checkout/components/ClipboardItem.ts": { "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", "name": "ClipboardItemElementProps", - "description": "", + "description": "Configure the following properties on the clipboard item component.", "isPublicDocs": true, "members": [ { @@ -41772,7 +40506,7 @@ "syntaxKind": "PropertySignature", "name": "text", "value": "string", - "description": "Plain text to be written to the clipboard.\n\nRich text, HTML, and binary content aren't supported.", + "description": "Plain text to be written to the clipboard.", "isOptional": true, "defaultValue": "''" } @@ -41810,7 +40544,7 @@ "src/surfaces/checkout/components/ClipboardItem.ts": { "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", "name": "ClipboardItemElementEvents", - "description": "", + "description": "The clipboard item component provides event callbacks for handling copy interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -44070,7 +42804,7 @@ "syntaxKind": "PropertySignature", "name": "text", "value": "string", - "description": "Plain text to be written to the clipboard.\n\nRich text, HTML, and binary content aren't supported.", + "description": "Plain text to be written to the clipboard.", "isOptional": true, "defaultValue": "''" }, @@ -44170,7 +42904,7 @@ "syntaxKind": "PropertySignature", "name": "text", "value": "string", - "description": "Plain text to be written to the clipboard.\n\nRich text, HTML, and binary content aren't supported.", + "description": "Plain text to be written to the clipboard.", "isOptional": true, "defaultValue": "''" } @@ -44182,7 +42916,7 @@ "src/surfaces/checkout/components/ConsentCheckbox.ts": { "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", "name": "ConsentCheckboxElementProps", - "description": "", + "description": "Configure the following properties on the consent checkbox component.", "isPublicDocs": true, "members": [ { @@ -44207,7 +42941,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -44216,7 +42950,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -44273,8 +43007,8 @@ "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -44286,7 +43020,16 @@ "isOptional": true } ], - "value": "export interface ConsentCheckboxElementProps extends Pick {\n command?: Extract;\n /**\n * The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n *\n * - `sms-marketing`: Represents the policy for SMS marketing consent.\n */\n policy?: ConsentCheckboxProps$1['policy'];\n}" + "value": "export interface ConsentCheckboxElementProps extends Pick {\n command?: Extract;\n}" + } + }, + "ConsentPolicy": { + "src/surfaces/checkout/components/components.ts": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ConsentPolicy", + "value": "\"sms-marketing\"", + "description": "" } }, "ConsentCheckboxEvents": { @@ -44311,7 +43054,7 @@ "src/surfaces/checkout/components/ConsentCheckbox.ts": { "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", "name": "ConsentCheckboxElementEvents", - "description": "", + "description": "The consent checkbox component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -44942,7 +43685,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -44951,7 +43694,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -46335,8 +45078,8 @@ "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -46732,7 +45475,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -46741,7 +45484,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -46806,8 +45549,8 @@ "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -46928,9 +45671,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -49356,9 +48099,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -49525,9 +48268,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -49545,223 +48288,223 @@ "src/surfaces/checkout/components/ConsentPhoneField.ts": { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", "name": "ConsentPhoneFieldElementProps", + "description": "Configure the following properties on the consent phone field component.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "autocomplete", + "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", + "description": "A hint about the intended content of the field for browser autofill.\n\nWhen 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.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", + "isOptional": true, + "defaultValue": "'on'" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "defaultValue", + "value": "string", + "description": "The initial value of the field when it 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 typing, their input replaces this value.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Whether the field is disabled, preventing any user interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "error", + "value": "string", + "description": "An error message displayed below the field to indicate validation problems. When set, the field is styled with error indicators and the message is announced to screen readers.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "label", + "value": "string", + "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "labelAccessibilityVisibility", + "value": "'visible' | 'exclusive'", + "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone.\n- `exclusive`: The label is visually hidden but still announced by screen readers.", + "isOptional": true, + "defaultValue": "'visible'" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "name", + "value": "string", + "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "placeholder", + "value": "string", + "description": "", + "isOptional": true, + "deprecationMessage": "Use `label` instead.", + "isPrivate": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "policy", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "readOnly", + "value": "boolean", + "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "required", + "value": "boolean", + "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.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'mobile' | ''", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", + "isOptional": true, + "defaultValue": "'' meaning no specific kind of phone number" + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "value", + "value": "string", + "description": "The current value for the field. If omitted, the field will be empty.", + "isOptional": true + } + ], + "value": "export interface ConsentPhoneFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" + } + }, + "ConsentPhoneFieldEvents": { + "src/surfaces/checkout/components/ConsentPhoneField.ts": { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "name": "ConsentPhoneFieldEvents", "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "onBlur", + "value": "(event: FocusEvent) => void", + "description": "A callback fired when the element loses focus. Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "onChange", + "value": "(event: Event) => void", + "description": "A callback fired when the user has **finished editing** a field, such as when they blur the field or press Enter.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "onFocus", + "value": "(event: FocusEvent) => void", + "description": "A callback fired when the element receives focus. Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "onInput", + "value": "(event: Event) => void", + "description": "A callback fired when the user makes any changes in the field, such as typing a character.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).", + "isOptional": true + } + ], + "value": "export interface ConsentPhoneFieldEvents extends Pick {\n}" + } + }, + "ConsentPhoneFieldElementEvents": { + "src/surfaces/checkout/components/ConsentPhoneField.ts": { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "name": "ConsentPhoneFieldElementEvents", + "description": "The consent phone field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "autocomplete", - "value": "AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | \"on\" | \"off\"", - "description": "A hint about the intended content of the field for browser autofill.\n\nWhen 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.\n\nWhen set to `off`, you are indicating that this field contains sensitive information, or contents that are never saved, like one-time codes.\n\nAlternatively, you can provide value which describes the specific data you would like to be entered into this field during autofill.\n\nLearn more about the set of [autocomplete values](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens) supported in browsers.", - "isOptional": true, - "defaultValue": "'on'" - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "defaultValue", - "value": "string", - "description": "The initial value of the field when it 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 typing, their input replaces this value.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Whether the field is disabled, preventing any user interaction.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "error", - "value": "string", - "description": "An error message displayed below the field to indicate validation problems. When set, the field is styled with error indicators and the message is announced to screen readers.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the element. Use this to reference the element in JavaScript, link labels to form controls, or target specific elements for styling or scripting.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "label", - "value": "string", - "description": "The text displayed as the field label, which identifies the purpose of the field to users. This label is associated with the field for accessibility and helps users understand what information to provide.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "labelAccessibilityVisibility", - "value": "'visible' | 'exclusive'", - "description": "Controls whether the label is visible to all users or only to screen readers.\n\n- `visible`: The label is shown to everyone.\n- `exclusive`: The label is visually hidden but still announced by screen readers.", - "isOptional": true, - "defaultValue": "'visible'" - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "name", - "value": "string", - "description": "The name attribute for the field, used to identify the field's value when the form is submitted. Must be unique within the nearest containing form.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "placeholder", - "value": "string", - "description": "", - "isOptional": true, - "deprecationMessage": "Use `label` instead.", - "isPrivate": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "readOnly", - "value": "boolean", - "description": "Whether the field is read-only and can't be edited. Read-only fields remain focusable and their content is announced by screen readers.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "required", - "value": "boolean", - "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.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", - "isOptional": true, - "defaultValue": "''" - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "value", - "value": "string", - "description": "The current value for the field. If omitted, the field will be empty.", - "isOptional": true - } - ], - "value": "export interface ConsentPhoneFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n /**\n * The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n *\n * - `sms-marketing`: Represents the policy for SMS marketing consent.\n */\n policy?: ConsentPhoneFieldProps$1['policy'];\n}" - } - }, - "ConsentPhoneFieldEvents": { - "src/surfaces/checkout/components/ConsentPhoneField.ts": { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "name": "ConsentPhoneFieldEvents", - "description": "", - "members": [ - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "onBlur", - "value": "(event: FocusEvent) => void", - "description": "A callback fired when the element loses focus. Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "onChange", - "value": "(event: Event) => void", - "description": "A callback fired when the user has **finished editing** a field, such as when they blur the field or press Enter.", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "onFocus", - "value": "(event: FocusEvent) => void", - "description": "A callback fired when the element receives focus. Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "onInput", - "value": "(event: Event) => void", - "description": "A callback fired when the user makes any changes in the field, such as typing a character.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event).", - "isOptional": true - } - ], - "value": "export interface ConsentPhoneFieldEvents extends Pick {\n}" - } - }, - "ConsentPhoneFieldElementEvents": { - "src/surfaces/checkout/components/ConsentPhoneField.ts": { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "name": "ConsentPhoneFieldElementEvents", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "blur", - "value": "CallbackEventListener", - "description": "A callback fired when the consent phone field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "change", - "value": "CallbackEventListener", - "description": "A callback fired when the consent phone field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "focus", - "value": "CallbackEventListener", - "description": "A callback fired when the consent phone field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", - "isOptional": true - }, - { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "syntaxKind": "PropertySignature", - "name": "input", - "value": "CallbackEventListener", - "description": "A callback fired when the user inputs data into the consent phone field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", - "isOptional": true - } - ], - "value": "export interface ConsentPhoneFieldElementEvents {\n /**\n * A callback fired when the consent phone field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur?: CallbackEventListener;\n /**\n * A callback fired when the consent phone field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change?: CallbackEventListener;\n /**\n * A callback fired when the consent phone field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus?: CallbackEventListener;\n /**\n * A callback fired when the user inputs data into the consent phone field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input?: CallbackEventListener;\n}" - } - }, - "ConsentPhoneFieldElement": { - "src/surfaces/checkout/components/ConsentPhoneField.ts": { - "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", - "name": "ConsentPhoneFieldElement", - "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "blur", + "value": "CallbackEventListener", + "description": "A callback fired when the consent phone field loses focus.\n\nLearn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "change", + "value": "CallbackEventListener", + "description": "A callback fired when the consent phone field value changes.\n\nLearn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "focus", + "value": "CallbackEventListener", + "description": "A callback fired when the consent phone field receives focus.\n\nLearn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "syntaxKind": "PropertySignature", + "name": "input", + "value": "CallbackEventListener", + "description": "A callback fired when the user inputs data into the consent phone field.\n\nLearn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).", + "isOptional": true + } + ], + "value": "export interface ConsentPhoneFieldElementEvents {\n /**\n * A callback fired when the consent phone field loses focus.\n *\n * Learn more about the [blur event](https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event).\n */\n blur?: CallbackEventListener;\n /**\n * A callback fired when the consent phone field value changes.\n *\n * Learn more about the [change event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event).\n */\n change?: CallbackEventListener;\n /**\n * A callback fired when the consent phone field receives focus.\n *\n * Learn more about the [focus event](https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event).\n */\n focus?: CallbackEventListener;\n /**\n * A callback fired when the user inputs data into the consent phone field.\n *\n * Learn more about the [input event](https://developer.mozilla.org/en-US/docs/Web/API/Element/input_event).\n */\n input?: CallbackEventListener;\n}" + } + }, + "ConsentPhoneFieldElement": { + "src/surfaces/checkout/components/ConsentPhoneField.ts": { + "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", + "name": "ConsentPhoneFieldElement", + "description": "", "members": [ { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -49872,8 +48615,8 @@ "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -49899,9 +48642,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -49919,7 +48662,7 @@ "src/surfaces/checkout/components/ConsentPhoneField.ts": { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", "name": "ConsentPhoneFieldElementSlots", - "description": "", + "description": "The consent phone field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -50053,8 +48796,8 @@ "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -50080,9 +48823,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -50100,7 +48843,7 @@ "src/surfaces/checkout/components/DateField.ts": { "filePath": "src/surfaces/checkout/components/DateField.ts", "name": "DateFieldElementProps", - "description": "", + "description": "Configure the following properties on the date field component.", "isPublicDocs": true, "members": [ { @@ -50108,7 +48851,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -50129,7 +48872,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -50184,7 +48927,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -50344,7 +49087,7 @@ "syntaxKind": "PropertySignature", "name": "onInvalid", "value": "(event: Event) => void", - "description": "Callback when the field has an invalid date. This callback will be called, if the date typed is invalid or disabled.\n\nDates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:\n- 2021-02-31: February doesn’t have 31 days\n- 2021-02-00: The day can’t be 00\n\nDisallowed dates are considered invalid.\n\nThis callback fires only when the user finishes editing the date, right after the `change` callback. The field isn't validated on every change to the input. Once the user has finished editing the field (typically by blurring it), the field is validated and the callback fires if the value is invalid.", + "description": "Callback when the field has an invalid date. This callback will be called, if the date typed is invalid or disabled.\n\nDates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:\n- 2021-02-31: February doesn’t have 31 days\n- 2021-02-00: The day can’t be 00\n\nDisallowed dates are considered invalid.\n\nIt’s important to note that this callback will be called only when the user **finishes editing** the date, and it’s called right after the `onChange` callback. The field is **not** validated on every change to the input. Once the buyer has signalled that they have finished editing the field (typically, by blurring the field), the field gets validated and the callback is run if the value is invalid.", "isOptional": true }, { @@ -50363,7 +49106,7 @@ "src/surfaces/checkout/components/DateField.ts": { "filePath": "src/surfaces/checkout/components/DateField.ts", "name": "DateFieldElementEvents", - "description": "", + "description": "The date field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -50457,7 +49200,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -50478,7 +49221,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -51149,7 +49892,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -52894,7 +51637,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -52915,7 +51658,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -52970,7 +51713,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -53076,7 +51819,7 @@ "syntaxKind": "PropertySignature", "name": "onInvalid", "value": "(event: Event) => void", - "description": "Callback when the field has an invalid date. This callback will be called, if the date typed is invalid or disabled.\n\nDates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:\n- 2021-02-31: February doesn’t have 31 days\n- 2021-02-00: The day can’t be 00\n\nDisallowed dates are considered invalid.\n\nThis callback fires only when the user finishes editing the date, right after the `change` callback. The field isn't validated on every change to the input. Once the user has finished editing the field (typically by blurring it), the field is validated and the callback fires if the value is invalid.", + "description": "Callback when the field has an invalid date. This callback will be called, if the date typed is invalid or disabled.\n\nDates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:\n- 2021-02-31: February doesn’t have 31 days\n- 2021-02-00: The day can’t be 00\n\nDisallowed dates are considered invalid.\n\nIt’s important to note that this callback will be called only when the user **finishes editing** the date, and it’s called right after the `onChange` callback. The field is **not** validated on every change to the input. Once the buyer has signalled that they have finished editing the field (typically, by blurring the field), the field gets validated and the callback is run if the value is invalid.", "isOptional": true }, { @@ -53139,7 +51882,7 @@ "src/surfaces/checkout/components/DatePicker.ts": { "filePath": "src/surfaces/checkout/components/DatePicker.ts", "name": "DatePickerElementProps", - "description": "", + "description": "Configure the following properties on the date picker component.", "isPublicDocs": true, "members": [ { @@ -53147,7 +51890,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -53168,7 +51911,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -53215,7 +51958,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -53282,7 +52025,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "string", - "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.\n\nSingle dates use ISO 8601 format (`YYYY-MM-DD`); ranges use `YYYY-MM-DD--YYYY-MM-DD`. Locale-specific formats aren't supported.", + "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.", "isOptional": true, "defaultValue": "\"\"" }, @@ -53352,7 +52095,7 @@ "src/surfaces/checkout/components/DatePicker.ts": { "filePath": "src/surfaces/checkout/components/DatePicker.ts", "name": "DatePickerElementEvents", - "description": "", + "description": "The date picker component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -53438,7 +52181,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -53459,7 +52202,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -54122,7 +52865,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -55805,7 +54548,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "string", - "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.\n\nSingle dates use ISO 8601 format (`YYYY-MM-DD`); ranges use `YYYY-MM-DD--YYYY-MM-DD`. Locale-specific formats aren't supported.", + "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.", "isOptional": true, "defaultValue": "\"\"" }, @@ -55847,7 +54590,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -55868,7 +54611,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -55915,7 +54658,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -56022,7 +54765,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "string", - "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.\n\nSingle dates use ISO 8601 format (`YYYY-MM-DD`); ranges use `YYYY-MM-DD--YYYY-MM-DD`. Locale-specific formats aren't supported.", + "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.", "isOptional": true, "defaultValue": "\"\"" }, @@ -56042,7 +54785,7 @@ "src/surfaces/checkout/components/Details.ts": { "filePath": "src/surfaces/checkout/components/Details.ts", "name": "DetailsElementProps", - "description": "", + "description": "The element props interface for the Details component.", "isPublicDocs": true, "members": [ { @@ -56050,7 +54793,7 @@ "syntaxKind": "PropertySignature", "name": "defaultOpen", "value": "boolean", - "description": "Whether the element should be open when it first renders. Use this for uncontrolled behavior where the component manages its own open state after the initial render.", + "description": "Indicates whether the element should be open by default.\n\nThis reflects to the `open` attribute.", "isOptional": true, "defaultValue": "false" }, @@ -56067,7 +54810,7 @@ "syntaxKind": "PropertySignature", "name": "open", "value": "boolean", - "description": "Whether the element is currently open and showing its content. Use this for controlled behavior where you manage the open state yourself.", + "description": "Whether the element is open.\n\nThis does not reflect to any attribute.", "isOptional": true, "defaultValue": "false" }, @@ -56076,7 +54819,7 @@ "syntaxKind": "PropertySignature", "name": "toggleTransition", "value": "'none' | 'auto'", - "description": "Sets the animation transition between the open and closed states.\n\n- `none`: Disables all transition animations.\n- `auto`: Uses the default transition animation.", + "description": "Sets the transition between the two states.", "isOptional": true, "defaultValue": "'auto'" } @@ -56095,7 +54838,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -56103,7 +54846,7 @@ "syntaxKind": "PropertySignature", "name": "onToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.", + "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true } ], @@ -56114,7 +54857,7 @@ "src/surfaces/checkout/components/Details.ts": { "filePath": "src/surfaces/checkout/components/Details.ts", "name": "DetailsElementEvents", - "description": "", + "description": "The events interface for the Details component.", "isPublicDocs": true, "members": [ { @@ -56122,7 +54865,7 @@ "syntaxKind": "PropertySignature", "name": "aftertoggle", "value": "CallbackEventListener", - "description": "A callback fired when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "Callback fired when the element state changes **after** any animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.", "isOptional": true }, { @@ -56130,11 +54873,11 @@ "syntaxKind": "PropertySignature", "name": "toggle", "value": "CallbackEventListener", - "description": "A callback fired immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.", + "description": "Callback straight after the element state changes.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.", "isOptional": true } ], - "value": "export interface DetailsElementEvents {\n /**\n * A callback fired immediately when the element state changes, before any animations.\n *\n * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.\n */\n toggle?: CallbackEventListener;\n /**\n * A callback fired when the element state changes, after any toggle animations have finished.\n *\n * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).\n */\n aftertoggle?: CallbackEventListener;\n}" + "value": "export interface DetailsElementEvents {\n /**\n * Callback straight after the element state changes.\n *\n * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState\n */\n toggle?: CallbackEventListener;\n /**\n * Callback fired when the element state changes **after** any animations have finished.\n *\n * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState\n */\n aftertoggle?: CallbackEventListener;\n}" } }, "DetailsElement": { @@ -58433,7 +57176,7 @@ "syntaxKind": "PropertySignature", "name": "defaultOpen", "value": "boolean", - "description": "Whether the element should be open when it first renders. Use this for uncontrolled behavior where the component manages its own open state after the initial render.", + "description": "Indicates whether the element should be open by default.\n\nThis reflects to the `open` attribute.", "isOptional": true, "defaultValue": "false" }, @@ -58450,7 +57193,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -58458,7 +57201,7 @@ "syntaxKind": "PropertySignature", "name": "onToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.", + "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -58466,7 +57209,7 @@ "syntaxKind": "PropertySignature", "name": "open", "value": "boolean", - "description": "Whether the element is currently open and showing its content. Use this for controlled behavior where you manage the open state yourself.", + "description": "Whether the element is open.\n\nThis does not reflect to any attribute.", "isOptional": true, "defaultValue": "false" }, @@ -58475,7 +57218,7 @@ "syntaxKind": "PropertySignature", "name": "toggleTransition", "value": "'none' | 'auto'", - "description": "Sets the animation transition between the open and closed states.\n\n- `none`: Disables all transition animations.\n- `auto`: Uses the default transition animation.", + "description": "Sets the transition between the two states.", "isOptional": true, "defaultValue": "'auto'" } @@ -58495,7 +57238,7 @@ "syntaxKind": "PropertySignature", "name": "direction", "value": "'inline' | 'block'", - "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally. Requires a parent with a defined height to render visibly.", + "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally.", "isOptional": true, "defaultValue": "'inline'" }, @@ -59166,7 +57909,7 @@ "syntaxKind": "PropertySignature", "name": "direction", "value": "'inline' | 'block'", - "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally. Requires a parent with a defined height to render visibly.", + "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally.", "isOptional": true, "defaultValue": "'inline'" }, @@ -60817,7 +59560,7 @@ "syntaxKind": "PropertySignature", "name": "direction", "value": "'inline' | 'block'", - "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally. Requires a parent with a defined height to render visibly.", + "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally.", "isOptional": true, "defaultValue": "'inline'" }, @@ -60837,7 +59580,7 @@ "src/surfaces/checkout/components/DropZone.ts": { "filePath": "src/surfaces/checkout/components/DropZone.ts", "name": "DropZoneElementProps", - "description": "", + "description": "Configure the following properties on the drop zone component.", "isPublicDocs": true, "members": [ { @@ -60967,7 +59710,7 @@ "src/surfaces/checkout/components/DropZone.ts": { "filePath": "src/surfaces/checkout/components/DropZone.ts", "name": "DropZoneElementEvents", - "description": "", + "description": "The drop zone component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -63491,7 +62234,7 @@ "src/surfaces/checkout/components/EmailField.ts": { "filePath": "src/surfaces/checkout/components/EmailField.ts", "name": "EmailFieldElementProps", - "description": "", + "description": "Configure the following properties on the email field component.", "isPublicDocs": true, "members": [ { @@ -63665,7 +62408,7 @@ "src/surfaces/checkout/components/EmailField.ts": { "filePath": "src/surfaces/checkout/components/EmailField.ts", "name": "EmailFieldElementEvents", - "description": "", + "description": "The email field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -63708,7 +62451,7 @@ "src/surfaces/checkout/components/EmailField.ts": { "filePath": "src/surfaces/checkout/components/EmailField.ts", "name": "EmailFieldElementSlots", - "description": "", + "description": "The email field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -66282,7 +65025,7 @@ "src/surfaces/checkout/components/Form.ts": { "filePath": "src/surfaces/checkout/components/Form.ts", "name": "FormElementProps", - "description": "", + "description": "Configure the following properties on the form component.", "isPublicDocs": true, "members": [ { @@ -66330,7 +65073,7 @@ "src/surfaces/checkout/components/Form.ts": { "filePath": "src/surfaces/checkout/components/Form.ts", "name": "FormElementEvents", - "description": "", + "description": "The form component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -68748,7 +67491,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -68859,7 +67602,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -69092,7 +67835,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -69191,7 +67934,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -69433,7 +68176,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -70183,7 +68926,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -72034,7 +70777,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -72118,7 +70861,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -72297,7 +71040,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -72369,7 +71112,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -72548,7 +71291,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -73271,7 +72014,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -75043,7 +73786,7 @@ "src/surfaces/checkout/components/Heading.ts": { "filePath": "src/surfaces/checkout/components/Heading.ts", "name": "HeadingElementProps", - "description": "", + "description": "The element props interface for the Heading component.", "isPublicDocs": true, "members": [ { @@ -75051,7 +73794,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityRole", "value": "'heading' | 'none' | 'presentation'", - "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.\n\n- `presentation`: Removes semantic meaning, making the element purely decorative and ignored by screen readers.\n- `none`: Completely hides the element and its content from assistive technologies.", + "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.\n\n- `heading`: defines the element as a heading to a page or section.\n- `presentation`: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree.\n- `none`: a synonym for the `presentation` role.", "isOptional": true, "defaultValue": "'heading'" }, @@ -75078,7 +73821,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityRole", "value": "'heading' | 'none' | 'presentation'", - "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.\n\n- `presentation`: Removes semantic meaning, making the element purely decorative and ignored by screen readers.\n- `none`: Completely hides the element and its content from assistive technologies.", + "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.\n\n- `heading`: defines the element as a heading to a page or section.\n- `presentation`: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree.\n- `none`: a synonym for the `presentation` role.", "isOptional": true, "defaultValue": "'heading'" }, @@ -77373,7 +76116,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityRole", "value": "'heading' | 'none' | 'presentation'", - "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.\n\n- `presentation`: Removes semantic meaning, making the element purely decorative and ignored by screen readers.\n- `none`: Completely hides the element and its content from assistive technologies.", + "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.\n\n- `heading`: defines the element as a heading to a page or section.\n- `presentation`: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree.\n- `none`: a synonym for the `presentation` role.", "isOptional": true, "defaultValue": "'heading'" }, @@ -82467,7 +81210,7 @@ "src/surfaces/checkout/components/Link.ts": { "filePath": "src/surfaces/checkout/components/Link.ts", "name": "LinkElementProps", - "description": "", + "description": "Configure the following properties on the link component.", "isPublicDocs": true, "members": [ { @@ -82483,7 +81226,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -82492,7 +81235,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -82571,7 +81314,7 @@ "src/surfaces/checkout/components/Link.ts": { "filePath": "src/surfaces/checkout/components/Link.ts", "name": "LinkElementEvents", - "description": "", + "description": "The link component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -83193,7 +81936,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -83202,7 +81945,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -84951,7 +83694,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -84960,7 +83703,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -85029,7 +83772,7 @@ "src/surfaces/checkout/components/ListItem.ts": { "filePath": "src/surfaces/checkout/components/ListItem.ts", "name": "ListItemElementProps", - "description": "", + "description": "The element props interface for the ListItem component.", "isPublicDocs": true, "members": [ { @@ -90827,7 +89570,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", + "description": "Sets the action the `commandFor` target should take when this marker is activated. See the documentation of particular components for the actions they support. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -90836,7 +89579,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", + "description": "The ID of a component that should respond to activations (for example, clicks) on this component. Refer to the `command` property for how to control the behavior of the target. Learn more about the [`commandfor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -90867,7 +89610,7 @@ "defaultValue": "0" } ], - "value": "export interface MapMarkerElementProps extends Pick {\n /**\n * Sets the action the `commandFor` target should take when this component is activated. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n *\n * - `--auto`: a default action for the target component.\n * - `--show`: shows the target component.\n * - `--hide`: hides the target component.\n * - `--toggle`: toggles the target component.\n *\n * @default '--auto'\n */\n command?: Extract;\n /**\n * The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n */\n commandFor?: MapMarkerProps$1['commandFor'];\n}" + "value": "export interface MapMarkerElementProps extends Pick {\n /**\n * Sets the action the `commandFor` target should take when this marker is activated. See the documentation of particular components for the actions they support. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n *\n * - `--auto`: a default action for the target component.\n * - `--show`: shows the target component.\n * - `--hide`: hides the target component.\n * - `--toggle`: toggles the target component.\n *\n * @default '--auto'\n */\n command?: Extract;\n /**\n * The ID of a component that should respond to activations (for example, clicks) on this component. Refer to the `command` property for how to control the behavior of the target. Learn more about the [`commandfor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n */\n commandFor?: MapMarkerProps$1['commandFor'];\n}" } }, "MapMarkerEvents": { @@ -90911,7 +89654,7 @@ "src/surfaces/checkout/components/MapMarker.ts": { "filePath": "src/surfaces/checkout/components/MapMarker.ts", "name": "MapMarkerElementSlots", - "description": "", + "description": "The named slots for the map marker component. Slots allow you to insert custom content into specific areas of the marker.", "isPublicDocs": true, "members": [ { @@ -91551,7 +90294,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", + "description": "Sets the action the `commandFor` target should take when this marker is activated. See the documentation of particular components for the actions they support. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -91560,7 +90303,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", + "description": "The ID of a component that should respond to activations (for example, clicks) on this component. Refer to the `command` property for how to control the behavior of the target. Learn more about the [`commandfor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -93311,7 +92054,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", + "description": "Sets the action the `commandFor` target should take when this marker is activated. See the documentation of particular components for the actions they support. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -93320,7 +92063,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", + "description": "The ID of a component that should respond to activations (for example, clicks) on this component. Refer to the `command` property for how to control the behavior of the target. Learn more about the [`commandfor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -95946,7 +94689,7 @@ "src/surfaces/checkout/components/MoneyField.ts": { "filePath": "src/surfaces/checkout/components/MoneyField.ts", "name": "MoneyFieldElementProps", - "description": "", + "description": "Configure the following properties on the money field component.", "isPublicDocs": true, "members": [ { @@ -96119,7 +94862,7 @@ "src/surfaces/checkout/components/MoneyField.ts": { "filePath": "src/surfaces/checkout/components/MoneyField.ts", "name": "MoneyFieldElementEvents", - "description": "", + "description": "The money field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -96482,7 +95225,7 @@ "src/surfaces/checkout/components/NumberField.ts": { "filePath": "src/surfaces/checkout/components/NumberField.ts", "name": "NumberFieldElementProps", - "description": "", + "description": "Configure the following properties on the number field component.", "isPublicDocs": true, "members": [ { @@ -96532,7 +95275,7 @@ "filePath": "src/surfaces/checkout/components/NumberField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'cart' | 'note' | 'settings' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true, "defaultValue": "''" @@ -96710,7 +95453,7 @@ "src/surfaces/checkout/components/NumberField.ts": { "filePath": "src/surfaces/checkout/components/NumberField.ts", "name": "NumberFieldElementEvents", - "description": "", + "description": "The number field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -96753,7 +95496,7 @@ "src/surfaces/checkout/components/NumberField.ts": { "filePath": "src/surfaces/checkout/components/NumberField.ts", "name": "NumberFieldElementSlots", - "description": "", + "description": "The number field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -97732,7 +96475,7 @@ "filePath": "src/surfaces/checkout/components/NumberField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'cart' | 'note' | 'settings' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true }, @@ -99259,7 +98002,7 @@ "filePath": "src/surfaces/checkout/components/NumberField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'cart' | 'note' | 'settings' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true }, @@ -99426,7 +98169,7 @@ "src/surfaces/checkout/components/Option.ts": { "filePath": "src/surfaces/checkout/components/Option.ts", "name": "OptionElementProps", - "description": "", + "description": "Configure the following properties on the option component.", "isPublicDocs": true, "members": [ { @@ -101878,7 +100621,7 @@ "src/surfaces/checkout/components/OrderedList.ts": { "filePath": "src/surfaces/checkout/components/OrderedList.ts", "name": "OrderedListElementProps", - "description": "", + "description": "The element props interface for the OrderedList component.", "isPublicDocs": true, "members": [ { @@ -104201,7 +102944,7 @@ "src/surfaces/checkout/components/Paragraph.ts": { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "name": "ParagraphElementProps", - "description": "", + "description": "The element props interface for the Paragraph component.", "isPublicDocs": true, "members": [ { @@ -104209,7 +102952,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -104218,7 +102961,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -104227,7 +102970,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -104244,25 +102987,16 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, - { - "filePath": "src/surfaces/checkout/components/Paragraph.ts", - "syntaxKind": "PropertySignature", - "name": "textAlign", - "value": "'start' | 'end' | 'center' | 'auto'", - "description": "Sets the alignment of the text.", - "isOptional": true, - "defaultValue": "'auto'" - }, { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "syntaxKind": "PropertySignature", "name": "tone", "value": "'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -104271,12 +103005,12 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "ParagraphType", - "description": "The semantic type and styling treatment for the paragraph content.\n\nOther presentation properties on `s-paragraph` override the default styling.", + "description": "Provide semantic meaning and default styling to the paragraph.\n\nOther presentation properties on `s-paragraph` override the default styling.", "isOptional": true, "defaultValue": "'paragraph'" } ], - "value": "export interface ParagraphElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n /**\n * Sets the alignment of the text.\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align\n *\n * @default 'auto'\n */\n textAlign?: 'start' | 'end' | 'center' | 'auto';\n}" + "value": "export interface ParagraphElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n}" } }, "ParagraphType": { @@ -104293,14 +103027,13 @@ "filePath": "src/surfaces/checkout/components/Paragraph.ts", "name": "ParagraphElement", "description": "", - "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -104897,7 +103630,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -104955,7 +103688,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -105330,7 +104063,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, @@ -106543,15 +105276,6 @@ "value": "3", "description": "node is a Text node." }, - { - "filePath": "src/surfaces/checkout/components/Paragraph.ts", - "syntaxKind": "PropertySignature", - "name": "textAlign", - "value": "'start' | 'end' | 'center' | 'auto'", - "description": "Sets the alignment of the text.", - "isOptional": true, - "defaultValue": "'auto'" - }, { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "syntaxKind": "GetAccessor", @@ -106585,7 +105309,7 @@ "syntaxKind": "PropertySignature", "name": "tone", "value": "'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -106601,7 +105325,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "ParagraphType", - "description": "The semantic type and styling treatment for the paragraph content.\n\nOther presentation properties on `s-paragraph` override the default styling.", + "description": "Provide semantic meaning and default styling to the paragraph.\n\nOther presentation properties on `s-paragraph` override the default styling.", "isOptional": true, "defaultValue": "'paragraph'" }, @@ -106629,14 +105353,13 @@ "filePath": "src/surfaces/checkout/components/Paragraph.ts", "name": "ParagraphProps", "description": "", - "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -106645,7 +105368,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -106654,7 +105377,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -106671,25 +105394,16 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, - { - "filePath": "src/surfaces/checkout/components/Paragraph.ts", - "syntaxKind": "PropertySignature", - "name": "textAlign", - "value": "'start' | 'end' | 'center' | 'auto'", - "description": "Sets the alignment of the text.", - "isOptional": true, - "defaultValue": "'auto'" - }, { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "syntaxKind": "PropertySignature", "name": "tone", "value": "'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -106698,7 +105412,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "ParagraphType", - "description": "The semantic type and styling treatment for the paragraph content.\n\nOther presentation properties on `s-paragraph` override the default styling.", + "description": "Provide semantic meaning and default styling to the paragraph.\n\nOther presentation properties on `s-paragraph` override the default styling.", "isOptional": true, "defaultValue": "'paragraph'" } @@ -106710,7 +105424,7 @@ "src/surfaces/checkout/components/PasswordField.ts": { "filePath": "src/surfaces/checkout/components/PasswordField.ts", "name": "PasswordFieldElementProps", - "description": "", + "description": "Configure the following properties on the password field component.", "isPublicDocs": true, "members": [ { @@ -106874,7 +105588,7 @@ "src/surfaces/checkout/components/PasswordField.ts": { "filePath": "src/surfaces/checkout/components/PasswordField.ts", "name": "PasswordFieldElementEvents", - "description": "", + "description": "The password field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -106917,7 +105631,7 @@ "src/surfaces/checkout/components/PasswordField.ts": { "filePath": "src/surfaces/checkout/components/PasswordField.ts", "name": "PasswordFieldElementSlots", - "description": "", + "description": "The password field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -111888,7 +110602,7 @@ "src/surfaces/checkout/components/PhoneField.ts": { "filePath": "src/surfaces/checkout/components/PhoneField.ts", "name": "PhoneFieldElementEvents", - "description": "", + "description": "The phone field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -111931,7 +110645,7 @@ "src/surfaces/checkout/components/PhoneField.ts": { "filePath": "src/surfaces/checkout/components/PhoneField.ts", "name": "PhoneFieldElementSlots", - "description": "", + "description": "The phone field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -114518,7 +113232,7 @@ "src/surfaces/checkout/components/PressButton.ts": { "filePath": "src/surfaces/checkout/components/PressButton.ts", "name": "PressButtonElementProps", - "description": "", + "description": "Configure the following properties on the press button component.", "isPublicDocs": true, "members": [ { @@ -114632,7 +113346,7 @@ "src/surfaces/checkout/components/PressButton.ts": { "filePath": "src/surfaces/checkout/components/PressButton.ts", "name": "PressButtonElementEvents", - "description": "", + "description": "The press button component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -119576,7 +118290,7 @@ "syntaxKind": "PropertySignature", "name": "max", "value": "number", - "description": "The total amount of work the task requires. Must be a value greater than `0` and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", + "description": "The total amount of work the task requires. Must be a value greater than 0 and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", "isOptional": true, "defaultValue": "1" }, @@ -119594,11 +118308,11 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "number", - "description": "How much of the task has been completed. Must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", + "description": "How much of the task has been completed. Must be a valid floating point number between 0 and `max`, or between 0 and 1 if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", "isOptional": true } ], - "value": "export interface ProgressElementProps extends Pick {\n /**\n * A label announced by assistive technologies that describes what is progressing. Use this to provide context about the ongoing task, such as \"Loading order details\" or \"Uploading file\".\n */\n accessibilityLabel?: ProgressProps$1['accessibilityLabel'];\n /**\n * The total amount of work the task requires. Must be a value greater than `0` and a valid floating point number.\n *\n * Learn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).\n *\n * @default 1\n */\n max?: ProgressProps$1['max'];\n /**\n * The semantic meaning and color treatment of the progress indicator.\n *\n * - `auto`: Automatically determined based on context.\n * - `critical`: Indicates an urgent or error state requiring immediate attention.\n *\n * @default 'auto'\n */\n tone?: Extract;\n /**\n * How much of the task has been completed. Must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n *\n * Learn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).\n */\n value?: ProgressProps$1['value'];\n}" + "value": "export interface ProgressElementProps extends Pick {\n /**\n * A label announced by assistive technologies that describes what is progressing. Use this to provide context about the ongoing task, such as \"Loading order details\" or \"Uploading file\".\n */\n accessibilityLabel?: ProgressProps$1['accessibilityLabel'];\n /**\n * The total amount of work the task requires. Must be a value greater than 0 and a valid floating point number.\n *\n * Learn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).\n *\n * @default 1\n */\n max?: ProgressProps$1['max'];\n /**\n * The semantic meaning and color treatment of the progress indicator.\n *\n * - `auto`: Automatically determined based on context.\n * - `critical`: Indicates an urgent or error state requiring immediate attention.\n *\n * @default 'auto'\n */\n tone?: Extract;\n /**\n * How much of the task has been completed. Must be a valid floating point number between 0 and `max`, or between 0 and 1 if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n *\n * Learn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).\n */\n value?: ProgressProps$1['value'];\n}" } }, "ProgressElement": { @@ -120679,7 +119393,7 @@ "syntaxKind": "PropertySignature", "name": "max", "value": "number", - "description": "The total amount of work the task requires. Must be a value greater than `0` and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", + "description": "The total amount of work the task requires. Must be a value greater than 0 and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", "isOptional": true, "defaultValue": "1" }, @@ -121899,7 +120613,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "number", - "description": "How much of the task has been completed. Must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", + "description": "How much of the task has been completed. Must be a valid floating point number between 0 and `max`, or between 0 and 1 if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", "isOptional": true }, { @@ -121948,7 +120662,7 @@ "syntaxKind": "PropertySignature", "name": "max", "value": "number", - "description": "The total amount of work the task requires. Must be a value greater than `0` and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", + "description": "The total amount of work the task requires. Must be a value greater than 0 and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", "isOptional": true, "defaultValue": "1" }, @@ -121966,7 +120680,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "number", - "description": "How much of the task has been completed. Must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", + "description": "How much of the task has been completed. Must be a valid floating point number between 0 and `max`, or between 0 and 1 if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", "isOptional": true } ], @@ -126865,7 +125579,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -126949,7 +125663,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -127110,7 +125824,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -127182,7 +125896,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -127352,7 +126066,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -128075,7 +126789,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -132202,7 +130916,7 @@ "src/surfaces/checkout/components/Select.ts": { "filePath": "src/surfaces/checkout/components/Select.ts", "name": "SelectElementProps", - "description": "", + "description": "Configure the following properties on the select component.", "isPublicDocs": true, "members": [ { @@ -132322,7 +131036,7 @@ "src/surfaces/checkout/components/Select.ts": { "filePath": "src/surfaces/checkout/components/Select.ts", "name": "SelectElementEvents", - "description": "", + "description": "The select component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -137428,7 +136142,7 @@ "src/surfaces/checkout/components/SkeletonParagraph.ts": { "filePath": "src/surfaces/checkout/components/SkeletonParagraph.ts", "name": "SkeletonParagraphElementProps", - "description": "", + "description": "The element props interface for the SkeletonParagraph component.", "isPublicDocs": true, "members": [ { @@ -142279,7 +140993,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -142557,7 +141271,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -143486,7 +142200,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -145267,7 +143981,7 @@ "src/surfaces/checkout/components/Summary.ts": { "filePath": "src/surfaces/checkout/components/Summary.ts", "name": "SummaryElementProps", - "description": "", + "description": "The element props interface for the Summary component.", "isPublicDocs": true, "members": [ { @@ -147590,7 +146304,7 @@ "src/surfaces/checkout/components/Switch.ts": { "filePath": "src/surfaces/checkout/components/Switch.ts", "name": "SwitchElementProps", - "description": "", + "description": "Configure the following properties on the switch component.", "isPublicDocs": true, "members": [ { @@ -147615,7 +146329,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -147624,7 +146338,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -147703,7 +146417,7 @@ "src/surfaces/checkout/components/Switch.ts": { "filePath": "src/surfaces/checkout/components/Switch.ts", "name": "SwitchElementEvents", - "description": "", + "description": "The switch component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -148334,7 +147048,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -148343,7 +147057,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -150108,7 +148822,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -150117,7 +148831,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -150186,7 +148900,7 @@ "src/surfaces/checkout/components/Text.ts": { "filePath": "src/surfaces/checkout/components/Text.ts", "name": "TextElementProps", - "description": "", + "description": "The element props interface for the Text component.", "isPublicDocs": true, "members": [ { @@ -150194,7 +148908,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -150203,7 +148917,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -150212,7 +148926,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -150221,7 +148935,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -150238,7 +148952,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, @@ -150247,7 +148961,7 @@ "syntaxKind": "PropertySignature", "name": "tone", "value": "'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -150256,12 +148970,12 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'small' | 'address' | 'mark' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'", - "description": "The semantic type and styling treatment for the text content.\n\nOther presentation properties on `s-text` override the default styling.\n\n- `address`: A semantic type that indicates the text is contact information. Typically used for addresses.\n- `redundant`: A semantic type that indicates the text is no longer accurate or no longer relevant. One such use-case is discounted prices.\n- `mark`: A semantic type that indicates the text is marked or highlighted and relevant to the user's current action.\n- `emphasis`: A semantic type that indicates emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.\n- `offset`: A semantic type that indicates an offset from the normal prose of the text.\n- `strong`: A semantic type that indicates strong importance, seriousness, or urgency.\n- `small`: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.\n- `generic`: No additional semantics or styling is applied.", + "description": "Provide semantic meaning and default styling to the text.\n\nOther presentation properties on Text override the default styling.", "isOptional": true, "defaultValue": "'generic'" } ], - "value": "export interface TextElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n /**\n * The semantic type and styling treatment for the text content.\n *\n * Other presentation properties on `s-text` override the default styling.\n *\n * - `address`: A semantic type that indicates the text is contact information. Typically used for addresses.\n * - `redundant`: A semantic type that indicates the text is no longer accurate or no longer relevant. One such use-case is discounted prices.\n * - `mark`: A semantic type that indicates the text is marked or highlighted and relevant to the user's current action.\n * - `emphasis`: A semantic type that indicates emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.\n * - `offset`: A semantic type that indicates an offset from the normal prose of the text.\n * - `strong`: A semantic type that indicates strong importance, seriousness, or urgency.\n * - `small`: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.\n * - `generic`: No additional semantics or styling is applied.\n *\n * @default 'generic'\n */\n type?: Extract;\n}" + "value": "export interface TextElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n type?: Extract;\n}" } }, "TextElement": { @@ -150275,7 +148989,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -150872,7 +149586,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -150930,7 +149644,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -150946,7 +149660,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -151314,7 +150028,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, @@ -152560,7 +151274,7 @@ "syntaxKind": "PropertySignature", "name": "tone", "value": "'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -152576,7 +151290,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'small' | 'address' | 'mark' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'", - "description": "The semantic type and styling treatment for the text content.\n\nOther presentation properties on `s-text` override the default styling.\n\n- `address`: A semantic type that indicates the text is contact information. Typically used for addresses.\n- `redundant`: A semantic type that indicates the text is no longer accurate or no longer relevant. One such use-case is discounted prices.\n- `mark`: A semantic type that indicates the text is marked or highlighted and relevant to the user's current action.\n- `emphasis`: A semantic type that indicates emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.\n- `offset`: A semantic type that indicates an offset from the normal prose of the text.\n- `strong`: A semantic type that indicates strong importance, seriousness, or urgency.\n- `small`: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.\n- `generic`: No additional semantics or styling is applied.", + "description": "Provide semantic meaning and default styling to the text.\n\nOther presentation properties on Text override the default styling.", "isOptional": true, "defaultValue": "'generic'" }, @@ -152610,7 +151324,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -152619,7 +151333,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -152628,7 +151342,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -152637,7 +151351,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -152654,7 +151368,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, @@ -152663,7 +151377,7 @@ "syntaxKind": "PropertySignature", "name": "tone", "value": "'custom' | 'success' | 'info' | 'auto' | 'neutral' | 'warning' | 'critical'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -152672,7 +151386,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'small' | 'address' | 'mark' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'", - "description": "The semantic type and styling treatment for the text content.\n\nOther presentation properties on `s-text` override the default styling.\n\n- `address`: A semantic type that indicates the text is contact information. Typically used for addresses.\n- `redundant`: A semantic type that indicates the text is no longer accurate or no longer relevant. One such use-case is discounted prices.\n- `mark`: A semantic type that indicates the text is marked or highlighted and relevant to the user's current action.\n- `emphasis`: A semantic type that indicates emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.\n- `offset`: A semantic type that indicates an offset from the normal prose of the text.\n- `strong`: A semantic type that indicates strong importance, seriousness, or urgency.\n- `small`: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.\n- `generic`: No additional semantics or styling is applied.", + "description": "Provide semantic meaning and default styling to the text.\n\nOther presentation properties on Text override the default styling.", "isOptional": true, "defaultValue": "'generic'" } @@ -152684,7 +151398,7 @@ "src/surfaces/checkout/components/TextArea.ts": { "filePath": "src/surfaces/checkout/components/TextArea.ts", "name": "TextAreaElementProps", - "description": "", + "description": "Configure the following properties on the text area component.", "isPublicDocs": true, "members": [ { @@ -152867,7 +151581,7 @@ "src/surfaces/checkout/components/TextArea.ts": { "filePath": "src/surfaces/checkout/components/TextArea.ts", "name": "TextAreaElementEvents", - "description": "", + "description": "The text area component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -155490,7 +154204,7 @@ "src/surfaces/checkout/components/TextField.ts": { "filePath": "src/surfaces/checkout/components/TextField.ts", "name": "TextFieldElementProps", - "description": "", + "description": "Configure the following properties on the text field component.", "isPublicDocs": true, "members": [ { @@ -155531,7 +154245,7 @@ "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'cart' | 'note' | 'settings' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true, "defaultValue": "''" @@ -155691,7 +154405,7 @@ "src/surfaces/checkout/components/TextField.ts": { "filePath": "src/surfaces/checkout/components/TextField.ts", "name": "TextFieldElementEvents", - "description": "", + "description": "The text field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -155734,7 +154448,7 @@ "src/surfaces/checkout/components/TextField.ts": { "filePath": "src/surfaces/checkout/components/TextField.ts", "name": "TextFieldElementSlots", - "description": "", + "description": "The text field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -156704,7 +155418,7 @@ "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'cart' | 'note' | 'settings' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true }, @@ -158211,7 +156925,7 @@ "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'cart' | 'note' | 'settings' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true }, @@ -158360,7 +157074,7 @@ "src/surfaces/checkout/components/Time.ts": { "filePath": "src/surfaces/checkout/components/Time.ts", "name": "TimeElementProps", - "description": "", + "description": "The element props interface for the Time component.", "isPublicDocs": true, "members": [ { @@ -158368,7 +157082,7 @@ "syntaxKind": "PropertySignature", "name": "dateTime", "value": "string", - "description": "The machine-readable date and/or time value for the element. Use this to provide a datetime string that browsers, search engines, and assistive technologies can parse for improved semantics and functionality.\n\nThe value must be a [valid datetime string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values), such as `2024-01-15`, `14:30`, or `2024-01-15T14:30:00`.", + "description": "Set the time and/or date of the element.\n\nIt must be a [valid date string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values).", "isOptional": true, "defaultValue": "''" }, @@ -159032,7 +157746,7 @@ "syntaxKind": "PropertySignature", "name": "dateTime", "value": "string", - "description": "The machine-readable date and/or time value for the element. Use this to provide a datetime string that browsers, search engines, and assistive technologies can parse for improved semantics and functionality.\n\nThe value must be a [valid datetime string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values), such as `2024-01-15`, `14:30`, or `2024-01-15T14:30:00`.", + "description": "Set the time and/or date of the element.\n\nIt must be a [valid date string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values).", "isOptional": true, "defaultValue": "''" }, @@ -160690,7 +159404,7 @@ "syntaxKind": "PropertySignature", "name": "dateTime", "value": "string", - "description": "The machine-readable date and/or time value for the element. Use this to provide a datetime string that browsers, search engines, and assistive technologies can parse for improved semantics and functionality.\n\nThe value must be a [valid datetime string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values), such as `2024-01-15`, `14:30`, or `2024-01-15T14:30:00`.", + "description": "Set the time and/or date of the element.\n\nIt must be a [valid date string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values).", "isOptional": true, "defaultValue": "''" }, @@ -160765,7 +159479,7 @@ "src/surfaces/checkout/components/UnorderedList.ts": { "filePath": "src/surfaces/checkout/components/UnorderedList.ts", "name": "UnorderedListElementProps", - "description": "", + "description": "The element props interface for the UnorderedList component.", "isPublicDocs": true, "members": [ { @@ -163088,7 +161802,7 @@ "src/surfaces/checkout/components/UrlField.ts": { "filePath": "src/surfaces/checkout/components/UrlField.ts", "name": "URLFieldElementProps", - "description": "", + "description": "Configure the following properties on the URL field component.", "isPublicDocs": true, "members": [ { @@ -163252,7 +161966,7 @@ "src/surfaces/checkout/components/UrlField.ts": { "filePath": "src/surfaces/checkout/components/UrlField.ts", "name": "URLFieldElementEvents", - "description": "", + "description": "The URL field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -163295,7 +162009,7 @@ "src/surfaces/checkout/components/UrlField.ts": { "filePath": "src/surfaces/checkout/components/UrlField.ts", "name": "URLFieldElementSlots", - "description": "", + "description": "The URL field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -165844,5 +164558,1241 @@ ], "value": "export interface UrlFieldProps extends URLFieldElementProps, UrlFieldEvents {\n}" } + }, + "UseApiGeneratedType": { + "src/surfaces/checkout/preact/api.ts": { + "filePath": "src/surfaces/checkout/preact/api.ts", + "name": "UseApiGeneratedType", + "description": "Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties.\n\nFor example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout.\n\nFor a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets).\n\n> Note: > As of version 2025-10, you no longer need this hook. The full API object is accessible via > the global `shopify` object.", + "isPublicDocs": true, + "params": [ + { + "name": "_target", + "description": "", + "value": "Target extends keyof RenderExtensionTargets", + "isOptional": true, + "filePath": "src/surfaces/checkout/preact/api.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/preact/api.ts", + "description": "", + "name": "ApiForExtension", + "value": "ApiForExtension" + }, + "value": "export function useApi<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(_target?: Target): ApiForExtension {\n const api = (globalThis as any)?.shopify as ApiForExtension;\n\n if (!api) {\n throw new CheckoutUIExtensionError(\n 'You can only call this hook when running as a checkout UI extension on at least API version 2025-10.',\n );\n }\n return api;\n}" + } + }, + "UseExtensionApiGeneratedType": { + "src/surfaces/checkout/preact/api.ts": { + "filePath": "src/surfaces/checkout/preact/api.ts", + "name": "UseExtensionApiGeneratedType", + "description": "Returns the full API object that was passed in to your extension when it was created. Depending on the extension target, this object can contain different properties.\n\nFor example, the `purchase.checkout.cart-line-item.render-after` extension target will return the [CartLineDetailsApi](/docs/api/checkout-ui-extensions/apis/cartlinedetailsapi) object. Other targets may only have access to the [StandardApi](/docs/api/checkout-ui-extensions/apis/standardapi) object, which contains a basic set of properties about the checkout.\n\nFor a full list of the API available to each extension target, see the [ExtensionTargets type](/docs/api/checkout-ui-extensions/apis/extensiontargets).\n\n> Caution: This is deprecated, use `useApi` instead.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/api.ts", + "description": "", + "name": "ApiForExtension", + "value": "ApiForExtension" + }, + "value": "export function useExtensionApi<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): ApiForExtension {\n return useApi();\n}" + } + }, + "UseSubscriptionGeneratedType": { + "src/surfaces/checkout/preact/subscription.ts": { + "filePath": "src/surfaces/checkout/preact/subscription.ts", + "name": "UseSubscriptionGeneratedType", + "description": "Subscribes to the special wrapper type that all \"changeable\" values in the checkout use. This hook extracts the most recent value from that object, and subscribes to update the value when changes occur in the checkout.\n\n> Note: > As of version 2025-10, you no longer need this hook. When you access `.value` > (instead of `.current`) on subscribable properties, Preact will automatically > re-render as `.value` changes.", + "isPublicDocs": true, + "params": [ + { + "name": "subscription", + "description": "", + "value": "SubscribableSignalLike", + "filePath": "src/surfaces/checkout/preact/subscription.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/preact/subscription.ts", + "description": "", + "name": "Value", + "value": "Value" + }, + "value": "export function useSubscription(\n subscription: SubscribableSignalLike,\n): Value {\n const [, setValue] = useState(subscription.value);\n\n useEffect(() => {\n let didUnsubscribe = false;\n\n const checkForUpdates: Subscriber = (newValue) => {\n if (didUnsubscribe) {\n return;\n }\n\n setValue(newValue);\n };\n\n const unsubscribe = subscription.subscribe(checkForUpdates);\n\n // Because we're subscribing in a passive effect,\n // it's possible for an update to occur between render and the effect handler.\n // Check for this and schedule an update if work has occurred.\n checkForUpdates(subscription.value);\n\n return () => {\n didUnsubscribe = true;\n unsubscribe();\n };\n }, [subscription]);\n\n return subscription.value;\n}" + } + }, + "UseAppMetafieldsGeneratedType": { + "src/surfaces/checkout/preact/app-metafields.ts": { + "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "name": "UseAppMetafieldsGeneratedType", + "description": "Returns the metafields configured with `shopify.extension.toml`.", + "isPublicDocs": true, + "params": [ + { + "name": "filters", + "description": "", + "value": "AppMetafieldFilters", + "isOptional": true, + "defaultValue": "{}", + "filePath": "src/surfaces/checkout/preact/app-metafields.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "description": "", + "name": "AppMetafieldEntry[]", + "value": "AppMetafieldEntry[]" + }, + "value": "export function useAppMetafields<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(filters: AppMetafieldFilters = {}): AppMetafieldEntry[] {\n const appMetafields = useSubscription(useApi().appMetafields);\n\n return useMemo(() => {\n if (filters.key && !filters.namespace) {\n throw new CheckoutUIExtensionError(\n 'You must pass in a namespace with a key',\n );\n }\n\n const filterKeys = Object.keys(filters) as AppMetafieldFilterKeys[];\n\n if (filterKeys.length) {\n return appMetafields.filter((app) => {\n return filterKeys.every((key) => {\n if (key === 'id' || key === 'type') {\n return app.target[key] === filters[key];\n }\n\n return app.metafield[key] === filters[key];\n });\n });\n }\n\n return appMetafields;\n }, [filters, appMetafields]);\n}" + } + }, + "AppMetafieldFilters": { + "src/surfaces/checkout/preact/app-metafields.ts": { + "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "name": "AppMetafieldFilters", + "description": "", + "members": [ + { + "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "syntaxKind": "PropertySignature", + "name": "key", + "value": "string", + "description": "", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "syntaxKind": "PropertySignature", + "name": "namespace", + "value": "string", + "description": "To filter for app owned metafields, use the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported.\n\nSee [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.", + "isOptional": true + }, + { + "filePath": "src/surfaces/checkout/preact/app-metafields.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'customer' | 'product' | 'shop' | 'shopUser' | 'variant' | 'company' | 'companyLocation' | 'cart'", + "description": "", + "isOptional": true + } + ], + "value": "interface AppMetafieldFilters {\n id?: AppMetafieldEntryTarget['id'];\n type?: AppMetafieldEntryTarget['type'];\n /**\n * To filter for app owned metafields, use the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported.\n *\n * See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n */\n namespace?: Metafield['namespace'];\n key?: Metafield['key'];\n}" + } + }, + "UseAttributesGeneratedType": { + "src/surfaces/checkout/preact/attributes.ts": { + "filePath": "src/surfaces/checkout/preact/attributes.ts", + "name": "UseAttributesGeneratedType", + "description": "Returns the proposed `attributes` applied to the checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/attributes.ts", + "description": "", + "name": "Attribute[]", + "value": "Attribute[]" + }, + "value": "export function useAttributes<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Attribute[] {\n return useSubscription(useApi().attributes);\n}" + } + }, + "UseAttributeValuesGeneratedType": { + "src/surfaces/checkout/preact/attributes.ts": { + "filePath": "src/surfaces/checkout/preact/attributes.ts", + "name": "UseAttributeValuesGeneratedType", + "description": "Returns the values for the specified `attributes` applied to the checkout.", + "isPublicDocs": true, + "params": [ + { + "name": "keys", + "description": "An array of attribute keys.", + "value": "string[]", + "filePath": "src/surfaces/checkout/preact/attributes.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/preact/attributes.ts", + "description": "", + "name": "(string | undefined)[]", + "value": "(string | undefined)[]" + }, + "value": "export function useAttributeValues<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(keys: string[]): (string | undefined)[] {\n const attributes = useAttributes();\n\n if (!attributes.length) {\n return [];\n }\n\n return keys.map((key) => {\n const attribute = attributes.find((attribute) => attribute.key === key);\n return attribute?.value;\n });\n}" + } + }, + "UseApplyAttributeChangeGeneratedType": { + "src/surfaces/checkout/preact/attributes.ts": { + "filePath": "src/surfaces/checkout/preact/attributes.ts", + "name": "UseApplyAttributeChangeGeneratedType", + "description": "Returns a function to mutate the `attributes` property of the checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/attributes.ts", + "description": "", + "name": "(change: AttributeChange) => Promise", + "value": "(change: AttributeChange) => Promise" + }, + "value": "export function useApplyAttributeChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: AttributeChange) => Promise {\n const api = useApi();\n\n if ('applyAttributeChange' in api) {\n return api.applyAttributeChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyAttributeChange',\n api.extension.target,\n );\n}" + } + }, + "UseBillingAddressGeneratedType": { + "src/surfaces/checkout/preact/billing-address.ts": { + "filePath": "src/surfaces/checkout/preact/billing-address.ts", + "name": "UseBillingAddressGeneratedType", + "description": "Returns the proposed `billingAddress` applied to the checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/billing-address.ts", + "description": "", + "name": "MailingAddress | undefined", + "value": "MailingAddress | undefined" + }, + "value": "export function useBillingAddress<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): MailingAddress | undefined {\n const billingAddress = useApi().billingAddress;\n\n if (!billingAddress) {\n throw new ScopeNotGrantedError(\n 'Using billing address requires having billing address permissions granted to your app.',\n );\n }\n\n return useSubscription(billingAddress);\n}" + } + }, + "UseCustomerGeneratedType": { + "src/surfaces/checkout/preact/buyer-identity.ts": { + "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", + "name": "UseCustomerGeneratedType", + "description": "Returns the current `Customer`.\n\nThe value is `undefined` if the buyer isn't a known customer for this shop or if they haven't logged in yet.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", + "description": "", + "name": "Customer | undefined", + "value": "Customer | undefined" + }, + "value": "export function useCustomer<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Customer | undefined {\n const buyerIdentity = useApi().buyerIdentity;\n\n if (!buyerIdentity) {\n throw new ScopeNotGrantedError(\n 'Using buyer identity requires having personal customer data permissions granted to your app.',\n );\n }\n\n return useSubscription(buyerIdentity.customer);\n}" + } + }, + "UseEmailGeneratedType": { + "src/surfaces/checkout/preact/buyer-identity.ts": { + "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", + "name": "UseEmailGeneratedType", + "description": "Returns the email address of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", + "description": "", + "name": "string | undefined", + "value": "string | undefined" + }, + "value": "export function useEmail<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): string | undefined {\n const buyerIdentity = useApi().buyerIdentity;\n\n if (!buyerIdentity) {\n throw new ScopeNotGrantedError(\n 'Using buyer identity requires having personal customer data permissions granted to your app.',\n );\n }\n\n return useSubscription(buyerIdentity.email);\n}" + } + }, + "UsePhoneGeneratedType": { + "src/surfaces/checkout/preact/buyer-identity.ts": { + "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", + "name": "UsePhoneGeneratedType", + "description": "Returns the phone number of the buyer that is interacting with the cart. The value is `undefined` if the app does not have access to customer data.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", + "description": "", + "name": "string | undefined", + "value": "string | undefined" + }, + "value": "export function usePhone<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): string | undefined {\n const buyerIdentity = useApi().buyerIdentity;\n\n if (!buyerIdentity) {\n throw new ScopeNotGrantedError(\n 'Using buyer identity requires having personal customer data permissions granted to your app.',\n );\n }\n\n return useSubscription(buyerIdentity.phone);\n}" + } + }, + "UsePurchasingCompanyGeneratedType": { + "src/surfaces/checkout/preact/buyer-identity.ts": { + "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", + "name": "UsePurchasingCompanyGeneratedType", + "description": "Provides information about the company and its location that the business customer is purchasing on behalf of during a B2B checkout. It includes details that can be utilized to identify both the company and its corresponding location to which the business customer belongs.\n\nThe value is `undefined` if a business customer isn't logged in. This function throws an error if the app doesn't have access to customer data.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/buyer-identity.ts", + "description": "", + "name": "PurchasingCompany | undefined", + "value": "PurchasingCompany | undefined" + }, + "value": "export function usePurchasingCompany<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): PurchasingCompany | undefined {\n const buyerIdentity = useApi().buyerIdentity;\n\n if (!buyerIdentity) {\n throw new ScopeNotGrantedError(\n 'Using buyer identity requires having personal customer data permissions granted to your app.',\n );\n }\n\n return useSubscription(buyerIdentity.purchasingCompany);\n}" + } + }, + "UseBuyerJourneyGeneratedType": { + "src/surfaces/checkout/preact/buyer-journey.ts": { + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", + "name": "UseBuyerJourneyGeneratedType", + "description": "Returns the `buyerJourney` details on buyer progression in checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", + "description": "", + "name": "BuyerJourney", + "value": "BuyerJourney" + }, + "value": "export function useBuyerJourney<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): BuyerJourney {\n const api = useApi();\n\n return api.buyerJourney;\n}" + } + }, + "UseBuyerJourneyCompletedGeneratedType": { + "src/surfaces/checkout/preact/buyer-journey.ts": { + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", + "name": "UseBuyerJourneyCompletedGeneratedType", + "description": "Returns true if the buyer completed submitting their order.\n\nFor example, when viewing the **Order status** page after submitting payment, the buyer will have completed their order.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", + "description": "", + "name": "false | true", + "value": "false | true" + }, + "value": "export function useBuyerJourneyCompleted<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): boolean {\n const api = useApi();\n return useSubscription(api.buyerJourney.completed);\n}" + } + }, + "UseBuyerJourneyInterceptGeneratedType": { + "src/surfaces/checkout/preact/buyer-journey.ts": { + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", + "name": "UseBuyerJourneyInterceptGeneratedType", + "description": "Installs a function for intercepting and preventing progress on checkout.\n\nTo block checkout progress, you must set the [block_progress](/docs/api/checkout-ui-extensions/configuration#block-progress) capability in your extension's configuration.\n\nIf you do, then you're expected to inform the buyer why navigation was blocked, either by passing validation errors to the checkout UI or rendering the errors in your extension.\n\n`useBuyerJourneyIntercept()` should be called at the top level of the extension, not within an embedded or child component, to avoid errors should the child component get destroyed.\n\nIt is good practice to show a warning in the checkout editor when the merchant has not given permission for your extension to block checkout progress.", + "isPublicDocs": true, + "params": [ + { + "name": "interceptor", + "description": "", + "value": "Interceptor", + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", + "description": "", + "name": "void", + "value": "void" + }, + "value": "export function useBuyerJourneyIntercept<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(interceptor: Interceptor): void {\n const api = useApi();\n\n const interceptorRef = useRef(interceptor);\n interceptorRef.current = interceptor;\n\n return useEffect(() => {\n const teardownPromise = api.buyerJourney.intercept((interceptorProps) =>\n interceptorRef.current(interceptorProps),\n );\n\n return () => {\n teardownPromise.then((teardown) => teardown()).catch(() => {});\n };\n }, [api.buyerJourney]);\n}" + } + }, + "UseBuyerJourneyStepsGeneratedType": { + "src/surfaces/checkout/preact/buyer-journey.ts": { + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", + "name": "UseBuyerJourneyStepsGeneratedType", + "description": "Returns all possible steps a buyer can take to complete the checkout. These steps may vary depending on the type of checkout or the shop's configuration.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", + "description": "", + "name": "BuyerJourneyStep[]", + "value": "BuyerJourneyStep[]" + }, + "value": "export function useBuyerJourneySteps<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): BuyerJourneyStep[] {\n const api = useApi();\n\n if (!('buyerJourney' in api) || !api.buyerJourney) {\n throw new ExtensionHasNoMethodError('buyerJourney', api.extension.target);\n }\n\n return useSubscription(api.buyerJourney.steps);\n}" + } + }, + "UseBuyerJourneyActiveStepGeneratedType": { + "src/surfaces/checkout/preact/buyer-journey.ts": { + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", + "name": "UseBuyerJourneyActiveStepGeneratedType", + "description": "Returns the buyer journey step that the buyer is currently on.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/buyer-journey.ts", + "description": "", + "name": "BuyerJourneyStep | undefined", + "value": "BuyerJourneyStep | undefined" + }, + "value": "export function useBuyerJourneyActiveStep<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): BuyerJourneyStep | undefined {\n const api = useApi();\n\n if (!('buyerJourney' in api) || !api.buyerJourney) {\n throw new ExtensionHasNoMethodError('buyerJourney', api.extension.target);\n }\n\n const steps = useSubscription(api.buyerJourney.steps);\n const activeStep = useSubscription(api.buyerJourney.activeStep);\n\n return activeStep\n ? steps.find(({handle}) => handle === activeStep.handle)\n : undefined;\n}" + } + }, + "UseExtensionCapabilitiesGeneratedType": { + "src/surfaces/checkout/preact/capabilities.ts": { + "filePath": "src/surfaces/checkout/preact/capabilities.ts", + "name": "UseExtensionCapabilitiesGeneratedType", + "description": "Returns a list of an extension's granted capabilities.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/capabilities.ts", + "description": "", + "name": "Capability[]", + "value": "Capability[]" + }, + "value": "export function useExtensionCapabilities(): Capability[] {\n return useSubscription(useApi().extension.capabilities);\n}" + } + }, + "UseExtensionCapabilityGeneratedType": { + "src/surfaces/checkout/preact/capabilities.ts": { + "filePath": "src/surfaces/checkout/preact/capabilities.ts", + "name": "UseExtensionCapabilityGeneratedType", + "description": "Returns whether or not a given capability of an extension is granted.", + "isPublicDocs": true, + "params": [ + { + "name": "capability", + "description": "", + "value": "Capability", + "filePath": "src/surfaces/checkout/preact/capabilities.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/preact/capabilities.ts", + "description": "", + "name": "boolean", + "value": "boolean" + }, + "value": "export function useExtensionCapability(capability: Capability): boolean {\n return useExtensionCapabilities().includes(capability);\n}" + } + }, + "UseCartLineTargetGeneratedType": { + "src/surfaces/checkout/preact/cart-line-target.ts": { + "filePath": "src/surfaces/checkout/preact/cart-line-target.ts", + "name": "UseCartLineTargetGeneratedType", + "description": "Returns the cart line the extension is attached to. This hook can only be used by extensions in the following extension targets:\n- `purchase.cart-line-item.line-components.render`\n- `purchase.checkout.cart-line-item.render-after`\n- `purchase.thank-you.cart-line-item.render-after`", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/cart-line-target.ts", + "description": "", + "name": "CartLine", + "value": "CartLine" + }, + "value": "export function useCartLineTarget(): CartLine {\n const api = useApi<\n | 'purchase.cart-line-item.line-components.render'\n | 'purchase.checkout.cart-line-item.render-after'\n | 'purchase.thank-you.cart-line-item.render-after'\n >();\n if (!api.target) {\n throw new ExtensionHasNoTargetError(\n 'useCartLineTarget',\n api.extension.target,\n );\n }\n\n return useSubscription(api.target);\n}" + } + }, + "UseCartLinesGeneratedType": { + "src/surfaces/checkout/preact/cart-lines.ts": { + "filePath": "src/surfaces/checkout/preact/cart-lines.ts", + "name": "UseCartLinesGeneratedType", + "description": "Returns the current line items for the checkout, and automatically re-renders your component if line items are added, removed, or updated.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/cart-lines.ts", + "description": "", + "name": "CartLine[]", + "value": "CartLine[]" + }, + "value": "export function useCartLines<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CartLine[] {\n const {lines} = useApi();\n\n return useSubscription(lines);\n}" + } + }, + "UseApplyCartLinesChangeGeneratedType": { + "src/surfaces/checkout/preact/cart-lines.ts": { + "filePath": "src/surfaces/checkout/preact/cart-lines.ts", + "name": "UseApplyCartLinesChangeGeneratedType", + "description": "Returns a function to mutate the `lines` property of checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/cart-lines.ts", + "description": "", + "name": "(change: CartLineChange) => Promise", + "value": "(change: CartLineChange) => Promise" + }, + "value": "export function useApplyCartLinesChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: CartLineChange) => Promise {\n const api = useApi();\n\n if ('applyCartLinesChange' in api) {\n return api.applyCartLinesChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyCartLinesChange',\n api.extension.target,\n );\n}" + } + }, + "UseCheckoutSettingsGeneratedType": { + "src/surfaces/checkout/preact/checkout-settings.ts": { + "filePath": "src/surfaces/checkout/preact/checkout-settings.ts", + "name": "UseCheckoutSettingsGeneratedType", + "description": "Returns the `checkoutSettings` applied to the checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/checkout-settings.ts", + "description": "", + "name": "CheckoutSettings", + "value": "CheckoutSettings" + }, + "value": "export function useCheckoutSettings<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CheckoutSettings {\n return useSubscription(useApi().checkoutSettings);\n}" + } + }, + "UseCheckoutTokenGeneratedType": { + "src/surfaces/checkout/preact/checkout-token.ts": { + "filePath": "src/surfaces/checkout/preact/checkout-token.ts", + "name": "UseCheckoutTokenGeneratedType", + "description": "A stable id that represents the current checkout.\n\nMatches the `token` field in the [WebPixel checkout payload](/docs/api/pixels/customer-events#checkout) and the `checkout_token` field in the [Admin REST API Order resource](/docs/api/admin-rest/unstable/resources/order#resource-object).", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/checkout-token.ts", + "description": "", + "name": "CheckoutToken | undefined", + "value": "CheckoutToken | undefined" + }, + "value": "export function useCheckoutToken<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CheckoutToken | undefined {\n return useSubscription(useApi().checkoutToken);\n}" + } + }, + "UseSubtotalAmountGeneratedType": { + "src/surfaces/checkout/preact/cost.ts": { + "filePath": "src/surfaces/checkout/preact/cost.ts", + "name": "UseSubtotalAmountGeneratedType", + "description": "A `Money` value representing the subtotal value of the items in the cart at the current step of checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/cost.ts", + "description": "", + "name": "Money", + "value": "Money" + }, + "value": "export function useSubtotalAmount<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Money {\n return useSubscription(useApi().cost.subtotalAmount);\n}" + } + }, + "UseTotalShippingAmountGeneratedType": { + "src/surfaces/checkout/preact/cost.ts": { + "filePath": "src/surfaces/checkout/preact/cost.ts", + "name": "UseTotalShippingAmountGeneratedType", + "description": "A `Money` value representing the total shipping a buyer can expect to pay at the current step of checkout. This value includes shipping discounts. Returns undefined if shipping has not been negotiated yet, such as on the information step.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/cost.ts", + "description": "", + "name": "Money | undefined", + "value": "Money | undefined" + }, + "value": "export function useTotalShippingAmount<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Money | undefined {\n return useSubscription(useApi().cost.totalShippingAmount);\n}" + } + }, + "UseTotalTaxAmountGeneratedType": { + "src/surfaces/checkout/preact/cost.ts": { + "filePath": "src/surfaces/checkout/preact/cost.ts", + "name": "UseTotalTaxAmountGeneratedType", + "description": "A `Money` value representing the total tax a buyer can expect to pay at the current step of checkout or the total tax included in product and shipping prices. Returns undefined if taxes are unavailable.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/cost.ts", + "description": "", + "name": "Money | undefined", + "value": "Money | undefined" + }, + "value": "export function useTotalTaxAmount<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Money | undefined {\n return useSubscription(useApi().cost.totalTaxAmount);\n}" + } + }, + "UseTotalAmountGeneratedType": { + "src/surfaces/checkout/preact/cost.ts": { + "filePath": "src/surfaces/checkout/preact/cost.ts", + "name": "UseTotalAmountGeneratedType", + "description": "Returns a `Money` value representing the minimum a buyer can expect to pay at the current step of checkout. This value excludes amounts yet to be negotiated. For example, the information step might not have delivery costs calculated.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/cost.ts", + "description": "", + "name": "Money", + "value": "Money" + }, + "value": "export function useTotalAmount<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Money {\n return useSubscription(useApi().cost.totalAmount);\n}" + } + }, + "UseLocalizationCountryGeneratedType": { + "src/surfaces/checkout/preact/country.ts": { + "filePath": "src/surfaces/checkout/preact/country.ts", + "name": "UseLocalizationCountryGeneratedType", + "description": "Returns the country of the checkout, and automatically re-renders your component if the country changes.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/country.ts", + "description": "", + "name": "Country | undefined", + "value": "Country | undefined" + }, + "value": "export function useLocalizationCountry<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Country | undefined {\n const {localization} = useApi();\n\n return useSubscription(localization.country);\n}" + } + }, + "UseCurrencyGeneratedType": { + "src/surfaces/checkout/preact/currency.ts": { + "filePath": "src/surfaces/checkout/preact/currency.ts", + "name": "UseCurrencyGeneratedType", + "description": "Returns the currency of the checkout, and automatically re-renders your component if the currency changes.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/currency.ts", + "description": "", + "name": "Currency", + "value": "Currency" + }, + "value": "export function useCurrency<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Currency {\n const {localization} = useApi();\n\n return useSubscription(localization.currency);\n}" + } + }, + "UseCustomerPrivacyGeneratedType": { + "src/surfaces/checkout/preact/customer-privacy.ts": { + "filePath": "src/surfaces/checkout/preact/customer-privacy.ts", + "name": "UseCustomerPrivacyGeneratedType", + "description": "Returns the current customer privacy settings and metadata and re-renders your component if the customer privacy settings change.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/customer-privacy.ts", + "description": "", + "name": "CustomerPrivacy", + "value": "CustomerPrivacy" + }, + "value": "export function useCustomerPrivacy<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CustomerPrivacy {\n return useSubscription(useApi().customerPrivacy);\n}" + } + }, + "UseDeliveryGroupListTargetGeneratedType": { + "src/surfaces/checkout/preact/delivery-group-list-target.ts": { + "filePath": "src/surfaces/checkout/preact/delivery-group-list-target.ts", + "name": "UseDeliveryGroupListTargetGeneratedType", + "description": "Returns the delivery group list the extension is attached to. This hook can only be used by extensions in the following extension targets:\n- purchase.checkout.shipping-option-list.render-before\n- purchase.checkout.shipping-option-list.render-after", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/delivery-group-list-target.ts", + "description": "", + "name": "DeliveryGroupList | undefined", + "value": "DeliveryGroupList | undefined" + }, + "value": "export function useDeliveryGroupListTarget(): DeliveryGroupList | undefined {\n const api = useApi<\n | 'purchase.checkout.shipping-option-list.render-before'\n | 'purchase.checkout.shipping-option-list.render-after'\n >();\n\n return useSubscription(api.target);\n}" + } + }, + "UseDeliveryGroupTargetGeneratedType": { + "src/surfaces/checkout/preact/delivery-group-target.ts": { + "filePath": "src/surfaces/checkout/preact/delivery-group-target.ts", + "name": "UseDeliveryGroupTargetGeneratedType", + "description": "Returns the delivery group the extension is attached to. This hook can only be used by extensions in the following extension targets:\n- purchase.checkout.shipping-option-list.render-before\n- purchase.checkout.shipping-option-list.render-after\n\n> Caution: Deprecated as of version `2024-07`, use `useDeliveryGroupListTarget()` instead.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/delivery-group-target.ts", + "description": "", + "name": "DeliveryGroup | undefined", + "value": "DeliveryGroup | undefined" + }, + "value": "export function useDeliveryGroupTarget(): DeliveryGroup | undefined {\n const api = useApi<\n | 'purchase.checkout.shipping-option-list.render-before'\n | 'purchase.checkout.shipping-option-list.render-after'\n >();\n\n const target = useSubscription(api.target);\n return target?.deliveryGroups[0];\n}" + } + }, + "UseDeliveryGroupGeneratedType": { + "src/surfaces/checkout/preact/delivery-group.ts": { + "filePath": "src/surfaces/checkout/preact/delivery-group.ts", + "name": "UseDeliveryGroupGeneratedType", + "description": "Returns the full expanded details of a delivery group and automatically re-renders your component when that delivery group changes.", + "isPublicDocs": true, + "params": [ + { + "name": "deliveryGroup", + "description": "", + "value": "DeliveryGroup", + "filePath": "src/surfaces/checkout/preact/delivery-group.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/preact/delivery-group.ts", + "description": "", + "name": "DeliveryGroupDetails | undefined", + "value": "DeliveryGroupDetails | undefined" + }, + "value": "export function useDeliveryGroup<\n ID extends RenderExtensionTarget = RenderExtensionTarget,\n>(deliveryGroup: DeliveryGroup | undefined): DeliveryGroupDetails | undefined {\n const {lines} = useApi();\n const cartLines = useSubscription(lines);\n\n return useMemo(() => {\n if (!deliveryGroup) {\n return undefined;\n }\n\n const deliveryGroupDetails = {\n ...deliveryGroup,\n selectedDeliveryOption: getSelectedDeliveryOption(deliveryGroup),\n targetedCartLines: getTargetedCartLines(deliveryGroup, cartLines),\n };\n\n return deliveryGroupDetails;\n }, [deliveryGroup, cartLines]);\n}" + } + }, + "UseDeliveryGroupsGeneratedType": { + "src/surfaces/checkout/preact/delivery-groups.ts": { + "filePath": "src/surfaces/checkout/preact/delivery-groups.ts", + "name": "UseDeliveryGroupsGeneratedType", + "description": "Returns the current delivery groups for the checkout, and automatically re-renders your component when delivery address or delivery option selection changes.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/delivery-groups.ts", + "description": "", + "name": "DeliveryGroup[]", + "value": "DeliveryGroup[]" + }, + "value": "export function useDeliveryGroups<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): DeliveryGroup[] {\n const api = useApi();\n return useSubscription(api.deliveryGroups);\n}" + } + }, + "UseDeliverySelectionGroupsGeneratedType": { + "src/surfaces/checkout/preact/delivery-selection-groups.ts": { + "filePath": "src/surfaces/checkout/preact/delivery-selection-groups.ts", + "name": "UseDeliverySelectionGroupsGeneratedType", + "description": "Returns the list of delivery selection groups available to the buyers. This hook can only be used by extensions in the following extension targets:\n- purchase.checkout.shipping-option-list.render-before\n- purchase.checkout.shipping-option-list.render-after", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/delivery-selection-groups.ts", + "description": "", + "name": "| DeliverySelectionGroup[]\n | undefined", + "value": "| DeliverySelectionGroup[]\n | undefined" + }, + "value": "export function useDeliverySelectionGroups():\n | DeliverySelectionGroup[]\n | undefined {\n const api = useApi<\n | 'purchase.checkout.shipping-option-list.render-before'\n | 'purchase.checkout.shipping-option-list.render-after'\n >();\n\n return useSubscription(api.deliverySelectionGroups);\n}" + } + }, + "UseDiscountCodesGeneratedType": { + "src/surfaces/checkout/preact/discounts.ts": { + "filePath": "src/surfaces/checkout/preact/discounts.ts", + "name": "UseDiscountCodesGeneratedType", + "description": "Returns the current discount codes applied to the cart, and automatically re-renders your component if discount codes are added or removed.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/discounts.ts", + "description": "", + "name": "CartDiscountCode[]", + "value": "CartDiscountCode[]" + }, + "value": "export function useDiscountCodes<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CartDiscountCode[] {\n const {discountCodes} = useApi();\n\n return useSubscription(discountCodes);\n}" + } + }, + "UseDiscountAllocationsGeneratedType": { + "src/surfaces/checkout/preact/discounts.ts": { + "filePath": "src/surfaces/checkout/preact/discounts.ts", + "name": "UseDiscountAllocationsGeneratedType", + "description": "Returns the current discount allocations applied to the cart, and automatically re-renders your component if discount allocations changed.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/discounts.ts", + "description": "", + "name": "CartDiscountAllocation[]", + "value": "CartDiscountAllocation[]" + }, + "value": "export function useDiscountAllocations<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CartDiscountAllocation[] {\n const {discountAllocations} = useApi();\n\n return useSubscription(discountAllocations);\n}" + } + }, + "UseApplyDiscountCodeChangeGeneratedType": { + "src/surfaces/checkout/preact/discounts.ts": { + "filePath": "src/surfaces/checkout/preact/discounts.ts", + "name": "UseApplyDiscountCodeChangeGeneratedType", + "description": "Returns a function to add or remove discount codes.\n\n> Caution: > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves discount codes through a network call.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/discounts.ts", + "description": "", + "name": "(change: DiscountCodeChange) => Promise", + "value": "(change: DiscountCodeChange) => Promise" + }, + "value": "export function useApplyDiscountCodeChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: DiscountCodeChange) => Promise {\n const api = useApi();\n\n if ('applyDiscountCodeChange' in api) {\n return api.applyDiscountCodeChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyDiscountCodeChange',\n api.extension.target,\n );\n}" + } + }, + "UseExtensionEditorGeneratedType": { + "src/surfaces/checkout/preact/extension-editor.ts": { + "filePath": "src/surfaces/checkout/preact/extension-editor.ts", + "name": "UseExtensionEditorGeneratedType", + "description": "Returns information about the editor where the extension is being rendered.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/extension-editor.ts", + "description": "", + "name": "Editor | undefined", + "value": "Editor | undefined" + }, + "value": "export function useExtensionEditor(): Editor | undefined {\n return useApi().extension.editor;\n}" + } + }, + "UseExtensionLanguageGeneratedType": { + "src/surfaces/checkout/preact/extension-language.ts": { + "filePath": "src/surfaces/checkout/preact/extension-language.ts", + "name": "UseExtensionLanguageGeneratedType", + "description": "Returns the buyer's language, as supported by the extension.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/extension-language.ts", + "description": "", + "name": "Language", + "value": "Language" + }, + "value": "export function useExtensionLanguage<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Language {\n const {localization} = useApi();\n\n return useSubscription(localization.extensionLanguage);\n}" + } + }, + "UseExtensionGeneratedType": { + "src/surfaces/checkout/preact/extension.ts": { + "filePath": "src/surfaces/checkout/preact/extension.ts", + "name": "UseExtensionGeneratedType", + "description": "Returns the metadata about the extension.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/extension.ts", + "description": "", + "name": "Extension", + "value": "Extension" + }, + "value": "export function useExtension(): Extension {\n return useApi().extension as Extension;\n}" + } + }, + "UseExtensionDataGeneratedType": { + "src/surfaces/checkout/preact/extension.ts": { + "filePath": "src/surfaces/checkout/preact/extension.ts", + "name": "UseExtensionDataGeneratedType", + "description": "Returns the metadata about the extension. > Caution: This is deprecated, use `useExtension()` instead.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/extension.ts", + "description": "", + "name": "Extension", + "value": "Extension" + }, + "value": "export function useExtensionData(): Extension {\n return useExtension();\n}" + } + }, + "UseAppliedGiftCardsGeneratedType": { + "src/surfaces/checkout/preact/gift-cards.ts": { + "filePath": "src/surfaces/checkout/preact/gift-cards.ts", + "name": "UseAppliedGiftCardsGeneratedType", + "description": "Returns the current gift cards applied to the cart, and automatically re-renders your component if gift cards are added or removed.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/gift-cards.ts", + "description": "", + "name": "AppliedGiftCard[]", + "value": "AppliedGiftCard[]" + }, + "value": "export function useAppliedGiftCards<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): AppliedGiftCard[] {\n const {appliedGiftCards} = useApi();\n\n return useSubscription(appliedGiftCards);\n}" + } + }, + "UseApplyGiftCardChangeGeneratedType": { + "src/surfaces/checkout/preact/gift-cards.ts": { + "filePath": "src/surfaces/checkout/preact/gift-cards.ts", + "name": "UseApplyGiftCardChangeGeneratedType", + "description": "Returns a function to add or remove gift cards.\n\n> Caution: > See [security considerations](/docs/api/checkout-ui-extensions/configuration#network-access) if your extension retrieves gift card codes through a network call.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/gift-cards.ts", + "description": "", + "name": "(change: GiftCardChange) => Promise", + "value": "(change: GiftCardChange) => Promise" + }, + "value": "export function useApplyGiftCardChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: GiftCardChange) => Promise {\n const api = useApi();\n\n if ('applyGiftCardChange' in api) {\n return api.applyGiftCardChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyGiftCardChange',\n api.extension.target,\n );\n}" + } + }, + "UseInstructionsGeneratedType": { + "src/surfaces/checkout/preact/instructions.ts": { + "filePath": "src/surfaces/checkout/preact/instructions.ts", + "name": "UseInstructionsGeneratedType", + "description": "Returns the cart instructions used to create the checkout and possibly limit extension capabilities.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/instructions.ts", + "description": "", + "name": "CartInstructions", + "value": "CartInstructions" + }, + "value": "export function useInstructions<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): CartInstructions {\n return useSubscription(useApi().instructions);\n}" + } + }, + "UseLanguageGeneratedType": { + "src/surfaces/checkout/preact/language.ts": { + "filePath": "src/surfaces/checkout/preact/language.ts", + "name": "UseLanguageGeneratedType", + "description": "Returns the current language of the checkout, and automatically re-renders your component if the language changes.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/language.ts", + "description": "", + "name": "Language", + "value": "Language" + }, + "value": "export function useLanguage<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Language {\n const {localization} = useApi();\n\n return useSubscription(localization.language);\n}" + } + }, + "UseLocalizedFieldsGeneratedType": { + "src/surfaces/checkout/preact/localized-fields.ts": { + "filePath": "src/surfaces/checkout/preact/localized-fields.ts", + "name": "UseLocalizedFieldsGeneratedType", + "description": "Returns the current localized fields and re-renders your component if the values change.", + "isPublicDocs": true, + "params": [ + { + "name": "keys", + "description": "", + "value": "LocalizedFieldKey[]", + "isOptional": true, + "filePath": "src/surfaces/checkout/preact/localized-fields.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/preact/localized-fields.ts", + "description": "", + "name": "LocalizedField[]", + "value": "LocalizedField[]" + }, + "value": "export function useLocalizedFields<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(keys?: LocalizedFieldKey[]): LocalizedField[] {\n const {localizedFields} = useApi();\n\n if (!localizedFields) {\n throw new ScopeNotGrantedError(\n 'Using localized fields requires having personal customer data permissions granted to your app.',\n );\n }\n\n const localizedFieldsData = useSubscription(localizedFields);\n\n if (!keys) {\n return localizedFieldsData;\n }\n\n if (!keys.length) {\n return [];\n }\n\n return localizedFieldsData.filter(({key}) => keys.includes(key));\n}" + } + }, + "UseLocalizedFieldGeneratedType": { + "src/surfaces/checkout/preact/localized-fields.ts": { + "filePath": "src/surfaces/checkout/preact/localized-fields.ts", + "name": "UseLocalizedFieldGeneratedType", + "description": "Returns the current localized field or undefined for the specified localized field key and re-renders your component if the value changes.", + "isPublicDocs": true, + "params": [ + { + "name": "key", + "description": "", + "value": "LocalizedFieldKey", + "filePath": "src/surfaces/checkout/preact/localized-fields.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/preact/localized-fields.ts", + "description": "", + "name": "LocalizedField | undefined", + "value": "LocalizedField | undefined" + }, + "value": "export function useLocalizedField<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(key: LocalizedFieldKey): LocalizedField | undefined {\n const fields = useLocalizedFields([key]);\n return fields[0];\n}" + } + }, + "UseLocalizationMarketGeneratedType": { + "src/surfaces/checkout/preact/market.ts": { + "filePath": "src/surfaces/checkout/preact/market.ts", + "name": "UseLocalizationMarketGeneratedType", + "description": "Returns the market of the checkout, and automatically re-renders your component if it changes.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/market.ts", + "description": "", + "name": "Market | undefined", + "value": "Market | undefined" + }, + "value": "export function useLocalizationMarket<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Market | undefined {\n const {localization} = useApi();\n\n return useSubscription(localization.market);\n}" + } + }, + "UseApplyMetafieldsChangeGeneratedType": { + "src/surfaces/checkout/preact/metafields.ts": { + "filePath": "src/surfaces/checkout/preact/metafields.ts", + "name": "UseApplyMetafieldsChangeGeneratedType", + "description": "Returns a function to mutate the `metafields` property of the checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/metafields.ts", + "description": "", + "name": "(change: MetafieldChange) => Promise", + "value": "(change: MetafieldChange) => Promise" + }, + "value": "export function useApplyMetafieldsChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: MetafieldChange) => Promise {\n const api = useApi();\n\n if ('applyMetafieldChange' in api) {\n return api.applyMetafieldChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyMetafieldChange',\n api.extension.target,\n );\n}" + } + }, + "UseNoteGeneratedType": { + "src/surfaces/checkout/preact/note.ts": { + "filePath": "src/surfaces/checkout/preact/note.ts", + "name": "UseNoteGeneratedType", + "description": "Returns the proposed `note` applied to the checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/note.ts", + "description": "", + "name": "string | undefined", + "value": "string | undefined" + }, + "value": "export function useNote<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): string | undefined {\n return useSubscription(useApi().note);\n}" + } + }, + "UseApplyNoteChangeGeneratedType": { + "src/surfaces/checkout/preact/note.ts": { + "filePath": "src/surfaces/checkout/preact/note.ts", + "name": "UseApplyNoteChangeGeneratedType", + "description": "Returns a function to mutate the `note` property of the checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/note.ts", + "description": "", + "name": "(change: NoteChange) => Promise", + "value": "(change: NoteChange) => Promise" + }, + "value": "export function useApplyNoteChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): (change: NoteChange) => Promise {\n const api = useApi();\n\n if ('applyNoteChange' in api) {\n return api.applyNoteChange;\n }\n\n throw new ExtensionHasNoMethodError('applyNoteChange', api.extension.target);\n}" + } + }, + "UsePaymentMethodAttributesGeneratedType": { + "src/surfaces/checkout/preact/payment-method.ts": { + "filePath": "src/surfaces/checkout/preact/payment-method.ts", + "name": "UsePaymentMethodAttributesGeneratedType", + "description": "Returns the proposed `paymentAttributes` applied to the checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/payment-method.ts", + "description": "", + "name": "| PaymentMethodAttribute[]\n | undefined", + "value": "| PaymentMethodAttribute[]\n | undefined" + }, + "value": "export function usePaymentMethodAttributes():\n | PaymentMethodAttribute[]\n | undefined {\n const {paymentMethodAttributes} = useApi<\n | 'purchase.checkout.payment-option-item.details.render'\n | 'purchase.checkout.payment-option-item.hosted-fields.render-after'\n >();\n\n if (!paymentMethodAttributes) {\n throw new ScopeNotGrantedError(\n 'Using payment method attributes requires having checkout extension payments scope granted to your app.',\n );\n }\n\n return useSubscription(paymentMethodAttributes);\n}" + } + }, + "UsePaymentMethodAttributeValuesGeneratedType": { + "src/surfaces/checkout/preact/payment-method.ts": { + "filePath": "src/surfaces/checkout/preact/payment-method.ts", + "name": "UsePaymentMethodAttributeValuesGeneratedType", + "description": "Returns the values for the specified `paymentAttributes` applied to the checkout.", + "isPublicDocs": true, + "params": [ + { + "name": "keys", + "description": "An array of attribute keys.", + "value": "string[]", + "filePath": "src/surfaces/checkout/preact/payment-method.ts" + } + ], + "returns": { + "filePath": "src/surfaces/checkout/preact/payment-method.ts", + "description": "", + "name": "(PaymentMethodAttribute['value'] | undefined)[]", + "value": "(PaymentMethodAttribute['value'] | undefined)[]" + }, + "value": "export function usePaymentMethodAttributeValues(\n keys: string[],\n): (PaymentMethodAttribute['value'] | undefined)[] {\n const attributes = usePaymentMethodAttributes();\n\n if (!attributes?.length) {\n return [];\n }\n\n return keys.map((key) => {\n const attribute = attributes.find((attribute) => attribute.key === key);\n return attribute?.value;\n });\n}" + } + }, + "UseApplyPaymentMethodAttributesChangeGeneratedType": { + "src/surfaces/checkout/preact/payment-method.ts": { + "filePath": "src/surfaces/checkout/preact/payment-method.ts", + "name": "UseApplyPaymentMethodAttributesChangeGeneratedType", + "description": "Returns a function to set payment method attributes.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/payment-method.ts", + "description": "", + "name": "(\n change: PaymentMethodAttributesChange,\n) => Promise", + "value": "(\n change: PaymentMethodAttributesChange,\n) => Promise" + }, + "value": "export function useApplyPaymentMethodAttributesChange(): (\n change: PaymentMethodAttributesChange,\n) => Promise {\n const api = useApi<\n | 'purchase.checkout.payment-option-item.details.render'\n | 'purchase.checkout.payment-option-item.hosted-fields.render-after'\n >();\n\n if (!api.applyPaymentMethodAttributesChange) {\n throw new ExtensionHasNoMethodError(\n 'useApplyPaymentMethodAttributesChange',\n api.extension.target,\n );\n }\n\n return api.applyPaymentMethodAttributesChange;\n}" + } + }, + "UseAvailablePaymentOptionsGeneratedType": { + "src/surfaces/checkout/preact/payment-options.ts": { + "filePath": "src/surfaces/checkout/preact/payment-options.ts", + "name": "UseAvailablePaymentOptionsGeneratedType", + "description": "Returns all available payment options.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/payment-options.ts", + "description": "", + "name": "PaymentOption[]", + "value": "PaymentOption[]" + }, + "value": "export function useAvailablePaymentOptions<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): PaymentOption[] {\n const api = useApi();\n return useSubscription(api.availablePaymentOptions);\n}" + } + }, + "UseSelectedPaymentOptionsGeneratedType": { + "src/surfaces/checkout/preact/payment-options.ts": { + "filePath": "src/surfaces/checkout/preact/payment-options.ts", + "name": "UseSelectedPaymentOptionsGeneratedType", + "description": "Returns payment options selected by the buyer.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/payment-options.ts", + "description": "", + "name": "SelectedPaymentOption[]", + "value": "SelectedPaymentOption[]" + }, + "value": "export function useSelectedPaymentOptions<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): SelectedPaymentOption[] {\n const api = useApi();\n return useSubscription(api.selectedPaymentOptions);\n}" + } + }, + "UsePickupLocationOptionTargetGeneratedType": { + "src/surfaces/checkout/preact/pickup-location-option-target.ts": { + "filePath": "src/surfaces/checkout/preact/pickup-location-option-target.ts", + "name": "UsePickupLocationOptionTargetGeneratedType", + "description": "Returns the pickup location option the extension is attached to. This hook can only be used by extensions in the following extension target:\n- `purchase.checkout.pickup-location-option-item.render-after`", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/pickup-location-option-target.ts", + "description": "", + "name": "{\n pickupLocationOptionTarget: PickupLocationOption;\n isTargetSelected: boolean;\n}", + "value": "{\n pickupLocationOptionTarget: PickupLocationOption;\n isTargetSelected: boolean;\n}" + }, + "value": "export function usePickupLocationOptionTarget(): {\n pickupLocationOptionTarget: PickupLocationOption;\n isTargetSelected: boolean;\n} {\n const api =\n useApi<'purchase.checkout.pickup-location-option-item.render-after'>();\n if (!api.target || api.isTargetSelected === undefined) {\n throw new ExtensionHasNoTargetError(\n 'usePickupLocationOptionTarget',\n api.extension.target,\n );\n }\n\n const pickupLocationOptionTarget = useSubscription(api.target);\n const isTargetSelected = useSubscription(api.isTargetSelected);\n\n const pickupLocationOption = useMemo(() => {\n return {\n pickupLocationOptionTarget,\n isTargetSelected,\n };\n }, [pickupLocationOptionTarget, isTargetSelected]);\n\n return pickupLocationOption;\n}" + } + }, + "UseApplyRedeemableChangeGeneratedType": { + "src/surfaces/checkout/preact/redeemable.ts": { + "filePath": "src/surfaces/checkout/preact/redeemable.ts", + "name": "UseApplyRedeemableChangeGeneratedType", + "description": "Returns a function to apply a change to add a redeemable.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/redeemable.ts", + "description": "", + "name": "(\n change: RedeemableChange,\n) => Promise", + "value": "(\n change: RedeemableChange,\n) => Promise" + }, + "value": "export function useApplyRedeemableChange(): (\n change: RedeemableChange,\n) => Promise {\n const api = useApi<'purchase.checkout.gift-card.render'>();\n\n if (!api.applyRedeemableChange) {\n throw new ExtensionHasNoMethodError(\n 'useApplyRedeemableChange',\n api.extension.target,\n );\n }\n\n return api.applyRedeemableChange;\n}" + } + }, + "UseSessionTokenGeneratedType": { + "src/surfaces/checkout/preact/session-token.ts": { + "filePath": "src/surfaces/checkout/preact/session-token.ts", + "name": "UseSessionTokenGeneratedType", + "description": "Provides access to session tokens, which can be used to verify token claims on your app's server.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/session-token.ts", + "description": "", + "name": "SessionToken", + "value": "SessionToken" + }, + "value": "export function useSessionToken<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): SessionToken {\n return useApi().sessionToken;\n}" + } + }, + "UseSettingsGeneratedType": { + "src/surfaces/checkout/preact/settings.ts": { + "filePath": "src/surfaces/checkout/preact/settings.ts", + "name": "UseSettingsGeneratedType", + "description": "Returns the setting values defined by the merchant for the extension.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/settings.ts", + "description": "", + "name": "Partial", + "value": "Partial" + }, + "value": "export function useSettings<\n Settings extends ExtensionSettings,\n>(): Partial {\n const settings = useSubscription(useApi().settings);\n\n return settings as Settings;\n}" + } + }, + "UseShippingAddressGeneratedType": { + "src/surfaces/checkout/preact/shipping-address.ts": { + "filePath": "src/surfaces/checkout/preact/shipping-address.ts", + "name": "UseShippingAddressGeneratedType", + "description": "Returns the proposed `shippingAddress` applied to the checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/shipping-address.ts", + "description": "", + "name": "ShippingAddress | undefined", + "value": "ShippingAddress | undefined" + }, + "value": "export function useShippingAddress<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): ShippingAddress | undefined {\n const shippingAddress = useApi().shippingAddress;\n\n if (!shippingAddress) {\n throw new ScopeNotGrantedError(\n 'Using shipping address requires having shipping address permissions granted to your app.',\n );\n }\n\n return useSubscription(shippingAddress);\n}" + } + }, + "UseApplyShippingAddressChangeGeneratedType": { + "src/surfaces/checkout/preact/shipping-address.ts": { + "filePath": "src/surfaces/checkout/preact/shipping-address.ts", + "name": "UseApplyShippingAddressChangeGeneratedType", + "description": "Returns a function to mutate the `shippingAddress` property of checkout.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/shipping-address.ts", + "description": "", + "name": "(change: ShippingAddressChange) => Promise | undefined", + "value": "(change: ShippingAddressChange) => Promise | undefined" + }, + "value": "export function useApplyShippingAddressChange<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>():\n | ((change: ShippingAddressChange) => Promise)\n | undefined {\n const api = useApi();\n\n if ('applyShippingAddressChange' in api) {\n return api.applyShippingAddressChange;\n }\n\n throw new ExtensionHasNoMethodError(\n 'applyShippingAddressChange',\n api.extension.target,\n );\n}" + } + }, + "UseShippingOptionTargetGeneratedType": { + "src/surfaces/checkout/preact/shipping-option-target.ts": { + "filePath": "src/surfaces/checkout/preact/shipping-option-target.ts", + "name": "UseShippingOptionTargetGeneratedType", + "description": "Returns the shipping option the extension is attached to. This hook can only be used by extensions in the following extension targets:\n- `purchase.checkout.shipping-option-item.render-after`\n- `purchase.checkout.shipping-option-item.details.render`", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/shipping-option-target.ts", + "description": "", + "name": "{\n shippingOptionTarget: ShippingOption;\n isTargetSelected: boolean;\n renderMode: ShippingOptionItemRenderMode;\n}", + "value": "{\n shippingOptionTarget: ShippingOption;\n isTargetSelected: boolean;\n renderMode: ShippingOptionItemRenderMode;\n}" + }, + "value": "export function useShippingOptionTarget(): {\n shippingOptionTarget: ShippingOption;\n isTargetSelected: boolean;\n renderMode: ShippingOptionItemRenderMode;\n} {\n const api = useApi<\n | 'purchase.checkout.shipping-option-item.render-after'\n | 'purchase.checkout.shipping-option-item.details.render'\n >();\n if (!api.target || api.isTargetSelected === undefined) {\n throw new ExtensionHasNoTargetError(\n 'useShippingOptionTarget',\n api.extension.target,\n );\n }\n\n const shippingOptionTarget = useSubscription(api.target);\n const isTargetSelected = useSubscription(api.isTargetSelected);\n const renderMode = api.renderMode;\n\n const shippingOption = useMemo(() => {\n return {\n shippingOptionTarget,\n isTargetSelected,\n renderMode,\n };\n }, [shippingOptionTarget, isTargetSelected, renderMode]);\n\n return shippingOption;\n}" + } + }, + "UseShopGeneratedType": { + "src/surfaces/checkout/preact/shop.ts": { + "filePath": "src/surfaces/checkout/preact/shop.ts", + "name": "UseShopGeneratedType", + "description": "Returns the `Shop` where the checkout is taking place.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/shop.ts", + "description": "", + "name": "Shop", + "value": "Shop" + }, + "value": "export function useShop<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Shop {\n return useApi().shop;\n}" + } + }, + "UseStorageGeneratedType": { + "src/surfaces/checkout/preact/storage.ts": { + "filePath": "src/surfaces/checkout/preact/storage.ts", + "name": "UseStorageGeneratedType", + "description": "Returns the key-value `Storage` interface for the extension. Uses `localStorage` and should persist across the buyer's current checkout session. However, data persistence isn't guaranteed and storage is reset when the buyer starts a new checkout.\n\nData is shared across all activated extension targets of this extension. In versions `<=2023-07`, each activated extension target had its own storage.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/storage.ts", + "description": "", + "name": "Storage", + "value": "Storage" + }, + "value": "export function useStorage<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Storage {\n return useApi().storage;\n}" + } + }, + "UseTargetGeneratedType": { + "src/surfaces/checkout/preact/target.ts": { + "filePath": "src/surfaces/checkout/preact/target.ts", + "name": "UseTargetGeneratedType", + "description": "Returns the cart line the extension is attached to. This hook can only be used by extensions in the `purchase.cart-line-item.line-components.render`, `purchase.checkout.cart-line-item.render-after`, and `purchase.thank-you.cart-line-item.render-after` extension targets. Until version `2023-04`, this hook returned a `PresentmentCartLine` object.\n\n> Caution: Deprecated as of version `2023-10`, use `useCartLineTarget()` instead.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/target.ts", + "description": "", + "name": "CartLine", + "value": "CartLine" + }, + "value": "export function useTarget(): CartLine {\n const api = useApi<\n | 'purchase.cart-line-item.line-components.render'\n | 'purchase.checkout.cart-line-item.render-after'\n | 'purchase.thank-you.cart-line-item.render-after'\n >();\n if (!api.target) {\n throw new ExtensionHasNoTargetError(api.extension.target);\n }\n\n return useSubscription(api.target);\n}" + } + }, + "UseTimezoneGeneratedType": { + "src/surfaces/checkout/preact/timezone.ts": { + "filePath": "src/surfaces/checkout/preact/timezone.ts", + "name": "UseTimezoneGeneratedType", + "description": "Returns the time zone of the checkout, and automatically re-renders your component if the time zone changes.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/timezone.ts", + "description": "", + "name": "\"Africa/Abidjan\" | \"Africa/Algiers\" | \"Africa/Bissau\" | \"Africa/Cairo\" | \"Africa/Casablanca\" | \"Africa/Ceuta\" | \"Africa/El_Aaiun\" | \"Africa/Johannesburg\" | \"Africa/Juba\" | \"Africa/Khartoum\" | \"Africa/Lagos\" | \"Africa/Maputo\" | \"Africa/Monrovia\" | \"Africa/Nairobi\" | \"Africa/Ndjamena\" | \"Africa/Sao_Tome\" | \"Africa/Tripoli\" | \"Africa/Tunis\" | \"Africa/Windhoek\" | \"America/Adak\" | \"America/Anchorage\" | \"America/Araguaina\" | \"America/Argentina/Buenos_Aires\" | \"America/Argentina/Catamarca\" | \"America/Argentina/Cordoba\" | \"America/Argentina/Jujuy\" | \"America/Argentina/La_Rioja\" | \"America/Argentina/Mendoza\" | \"America/Argentina/Rio_Gallegos\" | \"America/Argentina/Salta\" | \"America/Argentina/San_Juan\" | \"America/Argentina/San_Luis\" | \"America/Argentina/Tucuman\" | \"America/Argentina/Ushuaia\" | \"America/Asuncion\" | \"America/Bahia\" | \"America/Bahia_Banderas\" | \"America/Barbados\" | \"America/Belem\" | \"America/Belize\" | \"America/Boa_Vista\" | \"America/Bogota\" | \"America/Boise\" | \"America/Cambridge_Bay\" | \"America/Campo_Grande\" | \"America/Cancun\" | \"America/Caracas\" | \"America/Cayenne\" | \"America/Chicago\" | \"America/Chihuahua\" | \"America/Costa_Rica\" | \"America/Cuiaba\" | \"America/Danmarkshavn\" | \"America/Dawson\" | \"America/Dawson_Creek\" | \"America/Denver\" | \"America/Detroit\" | \"America/Edmonton\" | \"America/Eirunepe\" | \"America/El_Salvador\" | \"America/Fort_Nelson\" | \"America/Fortaleza\" | \"America/Glace_Bay\" | \"America/Goose_Bay\" | \"America/Grand_Turk\" | \"America/Guatemala\" | \"America/Guayaquil\" | \"America/Guyana\" | \"America/Halifax\" | \"America/Havana\" | \"America/Hermosillo\" | \"America/Indiana/Indianapolis\" | \"America/Indiana/Knox\" | \"America/Indiana/Marengo\" | \"America/Indiana/Petersburg\" | \"America/Indiana/Tell_City\" | \"America/Indiana/Vevay\" | \"America/Indiana/Vincennes\" | \"America/Indiana/Winamac\" | \"America/Inuvik\" | \"America/Iqaluit\" | \"America/Jamaica\" | \"America/Juneau\" | \"America/Kentucky/Louisville\" | \"America/Kentucky/Monticello\" | \"America/La_Paz\" | \"America/Lima\" | \"America/Los_Angeles\" | \"America/Maceio\" | \"America/Managua\" | \"America/Manaus\" | \"America/Martinique\" | \"America/Matamoros\" | \"America/Mazatlan\" | \"America/Menominee\" | \"America/Merida\" | \"America/Metlakatla\" | \"America/Mexico_City\" | \"America/Miquelon\" | \"America/Moncton\" | \"America/Monterrey\" | \"America/Montevideo\" | \"America/New_York\" | \"America/Nipigon\" | \"America/Nome\" | \"America/Noronha\" | \"America/North_Dakota/Beulah\" | \"America/North_Dakota/Center\" | \"America/North_Dakota/New_Salem\" | \"America/Nuuk\" | \"America/Ojinaga\" | \"America/Panama\" | \"America/Pangnirtung\" | \"America/Paramaribo\" | \"America/Phoenix\" | \"America/Port-au-Prince\" | \"America/Porto_Velho\" | \"America/Puerto_Rico\" | \"America/Punta_Arenas\" | \"America/Rainy_River\" | \"America/Rankin_Inlet\" | \"America/Recife\" | \"America/Regina\" | \"America/Resolute\" | \"America/Rio_Branco\" | \"America/Santarem\" | \"America/Santiago\" | \"America/Santo_Domingo\" | \"America/Sao_Paulo\" | \"America/Scoresbysund\" | \"America/Sitka\" | \"America/St_Johns\" | \"America/Swift_Current\" | \"America/Tegucigalpa\" | \"America/Thule\" | \"America/Thunder_Bay\" | \"America/Tijuana\" | \"America/Toronto\" | \"America/Vancouver\" | \"America/Whitehorse\" | \"America/Winnipeg\" | \"America/Yakutat\" | \"America/Yellowknife\" | \"Antarctica/Casey\" | \"Antarctica/Davis\" | \"Antarctica/Macquarie\" | \"Antarctica/Mawson\" | \"Antarctica/Palmer\" | \"Antarctica/Rothera\" | \"Antarctica/Troll\" | \"Antarctica/Vostok\" | \"Asia/Almaty\" | \"Asia/Amman\" | \"Asia/Anadyr\" | \"Asia/Aqtau\" | \"Asia/Aqtobe\" | \"Asia/Ashgabat\" | \"Asia/Atyrau\" | \"Asia/Baghdad\" | \"Asia/Baku\" | \"Asia/Bangkok\" | \"Asia/Barnaul\" | \"Asia/Beirut\" | \"Asia/Bishkek\" | \"Asia/Brunei\" | \"Asia/Chita\" | \"Asia/Choibalsan\" | \"Asia/Colombo\" | \"Asia/Damascus\" | \"Asia/Dhaka\" | \"Asia/Dili\" | \"Asia/Dubai\" | \"Asia/Dushanbe\" | \"Asia/Famagusta\" | \"Asia/Gaza\" | \"Asia/Hebron\" | \"Asia/Ho_Chi_Minh\" | \"Asia/Hong_Kong\" | \"Asia/Hovd\" | \"Asia/Irkutsk\" | \"Asia/Jakarta\" | \"Asia/Jayapura\" | \"Asia/Jerusalem\" | \"Asia/Kabul\" | \"Asia/Kamchatka\" | \"Asia/Karachi\" | \"Asia/Kathmandu\" | \"Asia/Khandyga\" | \"Asia/Kolkata\" | \"Asia/Krasnoyarsk\" | \"Asia/Kuala_Lumpur\" | \"Asia/Kuching\" | \"Asia/Macau\" | \"Asia/Magadan\" | \"Asia/Makassar\" | \"Asia/Manila\" | \"Asia/Nicosia\" | \"Asia/Novokuznetsk\" | \"Asia/Novosibirsk\" | \"Asia/Omsk\" | \"Asia/Oral\" | \"Asia/Pontianak\" | \"Asia/Pyongyang\" | \"Asia/Qatar\" | \"Asia/Qostanay\" | \"Asia/Qyzylorda\" | \"Asia/Riyadh\" | \"Asia/Sakhalin\" | \"Asia/Samarkand\" | \"Asia/Seoul\" | \"Asia/Shanghai\" | \"Asia/Singapore\" | \"Asia/Srednekolymsk\" | \"Asia/Taipei\" | \"Asia/Tashkent\" | \"Asia/Tbilisi\" | \"Asia/Tehran\" | \"Asia/Thimphu\" | \"Asia/Tokyo\" | \"Asia/Tomsk\" | \"Asia/Ulaanbaatar\" | \"Asia/Urumqi\" | \"Asia/Ust-Nera\" | \"Asia/Vladivostok\" | \"Asia/Yakutsk\" | \"Asia/Yangon\" | \"Asia/Yekaterinburg\" | \"Asia/Yerevan\" | \"Atlantic/Azores\" | \"Atlantic/Bermuda\" | \"Atlantic/Canary\" | \"Atlantic/Cape_Verde\" | \"Atlantic/Faroe\" | \"Atlantic/Madeira\" | \"Atlantic/Reykjavik\" | \"Atlantic/South_Georgia\" | \"Atlantic/Stanley\" | \"Australia/Adelaide\" | \"Australia/Brisbane\" | \"Australia/Broken_Hill\" | \"Australia/Darwin\" | \"Australia/Eucla\" | \"Australia/Hobart\" | \"Australia/Lindeman\" | \"Australia/Lord_Howe\" | \"Australia/Melbourne\" | \"Australia/Perth\" | \"Australia/Sydney\" | \"CET\" | \"CST6CDT\" | \"EET\" | \"EST\" | \"EST5EDT\" | \"Etc/GMT\" | \"Etc/GMT-1\" | \"Etc/GMT-10\" | \"Etc/GMT-11\" | \"Etc/GMT-12\" | \"Etc/GMT-13\" | \"Etc/GMT-14\" | \"Etc/GMT-2\" | \"Etc/GMT-3\" | \"Etc/GMT-4\" | \"Etc/GMT-5\" | \"Etc/GMT-6\" | \"Etc/GMT-7\" | \"Etc/GMT-8\" | \"Etc/GMT-9\" | \"Etc/GMT+1\" | \"Etc/GMT+10\" | \"Etc/GMT+11\" | \"Etc/GMT+12\" | \"Etc/GMT+2\" | \"Etc/GMT+3\" | \"Etc/GMT+4\" | \"Etc/GMT+5\" | \"Etc/GMT+6\" | \"Etc/GMT+7\" | \"Etc/GMT+8\" | \"Etc/GMT+9\" | \"Etc/UTC\" | \"Europe/Amsterdam\" | \"Europe/Andorra\" | \"Europe/Astrakhan\" | \"Europe/Athens\" | \"Europe/Belgrade\" | \"Europe/Berlin\" | \"Europe/Brussels\" | \"Europe/Bucharest\" | \"Europe/Budapest\" | \"Europe/Chisinau\" | \"Europe/Copenhagen\" | \"Europe/Dublin\" | \"Europe/Gibraltar\" | \"Europe/Helsinki\" | \"Europe/Istanbul\" | \"Europe/Kaliningrad\" | \"Europe/Kiev\" | \"Europe/Kirov\" | \"Europe/Lisbon\" | \"Europe/London\" | \"Europe/Luxembourg\" | \"Europe/Madrid\" | \"Europe/Malta\" | \"Europe/Minsk\" | \"Europe/Monaco\" | \"Europe/Moscow\" | \"Europe/Oslo\" | \"Europe/Paris\" | \"Europe/Prague\" | \"Europe/Riga\" | \"Europe/Rome\" | \"Europe/Samara\" | \"Europe/Saratov\" | \"Europe/Simferopol\" | \"Europe/Sofia\" | \"Europe/Stockholm\" | \"Europe/Tallinn\" | \"Europe/Tirane\" | \"Europe/Ulyanovsk\" | \"Europe/Uzhgorod\" | \"Europe/Vienna\" | \"Europe/Vilnius\" | \"Europe/Volgograd\" | \"Europe/Warsaw\" | \"Europe/Zaporozhye\" | \"Europe/Zurich\" | \"HST\" | \"Indian/Chagos\" | \"Indian/Christmas\" | \"Indian/Cocos\" | \"Indian/Kerguelen\" | \"Indian/Mahe\" | \"Indian/Maldives\" | \"Indian/Mauritius\" | \"Indian/Reunion\" | \"MET\" | \"MST\" | \"MST7MDT\" | \"Pacific/Apia\" | \"Pacific/Auckland\" | \"Pacific/Bougainville\" | \"Pacific/Chatham\" | \"Pacific/Chuuk\" | \"Pacific/Easter\" | \"Pacific/Efate\" | \"Pacific/Fakaofo\" | \"Pacific/Fiji\" | \"Pacific/Funafuti\" | \"Pacific/Galapagos\" | \"Pacific/Gambier\" | \"Pacific/Guadalcanal\" | \"Pacific/Guam\" | \"Pacific/Honolulu\" | \"Pacific/Kanton\" | \"Pacific/Kiritimati\" | \"Pacific/Kosrae\" | \"Pacific/Kwajalein\" | \"Pacific/Majuro\" | \"Pacific/Marquesas\" | \"Pacific/Nauru\" | \"Pacific/Niue\" | \"Pacific/Norfolk\" | \"Pacific/Noumea\" | \"Pacific/Pago_Pago\" | \"Pacific/Palau\" | \"Pacific/Pitcairn\" | \"Pacific/Pohnpei\" | \"Pacific/Port_Moresby\" | \"Pacific/Rarotonga\" | \"Pacific/Tahiti\" | \"Pacific/Tarawa\" | \"Pacific/Tongatapu\" | \"Pacific/Wake\" | \"Pacific/Wallis\" | \"PST8PDT\" | \"WET\"", + "value": "\"Africa/Abidjan\" | \"Africa/Algiers\" | \"Africa/Bissau\" | \"Africa/Cairo\" | \"Africa/Casablanca\" | \"Africa/Ceuta\" | \"Africa/El_Aaiun\" | \"Africa/Johannesburg\" | \"Africa/Juba\" | \"Africa/Khartoum\" | \"Africa/Lagos\" | \"Africa/Maputo\" | \"Africa/Monrovia\" | \"Africa/Nairobi\" | \"Africa/Ndjamena\" | \"Africa/Sao_Tome\" | \"Africa/Tripoli\" | \"Africa/Tunis\" | \"Africa/Windhoek\" | \"America/Adak\" | \"America/Anchorage\" | \"America/Araguaina\" | \"America/Argentina/Buenos_Aires\" | \"America/Argentina/Catamarca\" | \"America/Argentina/Cordoba\" | \"America/Argentina/Jujuy\" | \"America/Argentina/La_Rioja\" | \"America/Argentina/Mendoza\" | \"America/Argentina/Rio_Gallegos\" | \"America/Argentina/Salta\" | \"America/Argentina/San_Juan\" | \"America/Argentina/San_Luis\" | \"America/Argentina/Tucuman\" | \"America/Argentina/Ushuaia\" | \"America/Asuncion\" | \"America/Bahia\" | \"America/Bahia_Banderas\" | \"America/Barbados\" | \"America/Belem\" | \"America/Belize\" | \"America/Boa_Vista\" | \"America/Bogota\" | \"America/Boise\" | \"America/Cambridge_Bay\" | \"America/Campo_Grande\" | \"America/Cancun\" | \"America/Caracas\" | \"America/Cayenne\" | \"America/Chicago\" | \"America/Chihuahua\" | \"America/Costa_Rica\" | \"America/Cuiaba\" | \"America/Danmarkshavn\" | \"America/Dawson\" | \"America/Dawson_Creek\" | \"America/Denver\" | \"America/Detroit\" | \"America/Edmonton\" | \"America/Eirunepe\" | \"America/El_Salvador\" | \"America/Fort_Nelson\" | \"America/Fortaleza\" | \"America/Glace_Bay\" | \"America/Goose_Bay\" | \"America/Grand_Turk\" | \"America/Guatemala\" | \"America/Guayaquil\" | \"America/Guyana\" | \"America/Halifax\" | \"America/Havana\" | \"America/Hermosillo\" | \"America/Indiana/Indianapolis\" | \"America/Indiana/Knox\" | \"America/Indiana/Marengo\" | \"America/Indiana/Petersburg\" | \"America/Indiana/Tell_City\" | \"America/Indiana/Vevay\" | \"America/Indiana/Vincennes\" | \"America/Indiana/Winamac\" | \"America/Inuvik\" | \"America/Iqaluit\" | \"America/Jamaica\" | \"America/Juneau\" | \"America/Kentucky/Louisville\" | \"America/Kentucky/Monticello\" | \"America/La_Paz\" | \"America/Lima\" | \"America/Los_Angeles\" | \"America/Maceio\" | \"America/Managua\" | \"America/Manaus\" | \"America/Martinique\" | \"America/Matamoros\" | \"America/Mazatlan\" | \"America/Menominee\" | \"America/Merida\" | \"America/Metlakatla\" | \"America/Mexico_City\" | \"America/Miquelon\" | \"America/Moncton\" | \"America/Monterrey\" | \"America/Montevideo\" | \"America/New_York\" | \"America/Nipigon\" | \"America/Nome\" | \"America/Noronha\" | \"America/North_Dakota/Beulah\" | \"America/North_Dakota/Center\" | \"America/North_Dakota/New_Salem\" | \"America/Nuuk\" | \"America/Ojinaga\" | \"America/Panama\" | \"America/Pangnirtung\" | \"America/Paramaribo\" | \"America/Phoenix\" | \"America/Port-au-Prince\" | \"America/Porto_Velho\" | \"America/Puerto_Rico\" | \"America/Punta_Arenas\" | \"America/Rainy_River\" | \"America/Rankin_Inlet\" | \"America/Recife\" | \"America/Regina\" | \"America/Resolute\" | \"America/Rio_Branco\" | \"America/Santarem\" | \"America/Santiago\" | \"America/Santo_Domingo\" | \"America/Sao_Paulo\" | \"America/Scoresbysund\" | \"America/Sitka\" | \"America/St_Johns\" | \"America/Swift_Current\" | \"America/Tegucigalpa\" | \"America/Thule\" | \"America/Thunder_Bay\" | \"America/Tijuana\" | \"America/Toronto\" | \"America/Vancouver\" | \"America/Whitehorse\" | \"America/Winnipeg\" | \"America/Yakutat\" | \"America/Yellowknife\" | \"Antarctica/Casey\" | \"Antarctica/Davis\" | \"Antarctica/Macquarie\" | \"Antarctica/Mawson\" | \"Antarctica/Palmer\" | \"Antarctica/Rothera\" | \"Antarctica/Troll\" | \"Antarctica/Vostok\" | \"Asia/Almaty\" | \"Asia/Amman\" | \"Asia/Anadyr\" | \"Asia/Aqtau\" | \"Asia/Aqtobe\" | \"Asia/Ashgabat\" | \"Asia/Atyrau\" | \"Asia/Baghdad\" | \"Asia/Baku\" | \"Asia/Bangkok\" | \"Asia/Barnaul\" | \"Asia/Beirut\" | \"Asia/Bishkek\" | \"Asia/Brunei\" | \"Asia/Chita\" | \"Asia/Choibalsan\" | \"Asia/Colombo\" | \"Asia/Damascus\" | \"Asia/Dhaka\" | \"Asia/Dili\" | \"Asia/Dubai\" | \"Asia/Dushanbe\" | \"Asia/Famagusta\" | \"Asia/Gaza\" | \"Asia/Hebron\" | \"Asia/Ho_Chi_Minh\" | \"Asia/Hong_Kong\" | \"Asia/Hovd\" | \"Asia/Irkutsk\" | \"Asia/Jakarta\" | \"Asia/Jayapura\" | \"Asia/Jerusalem\" | \"Asia/Kabul\" | \"Asia/Kamchatka\" | \"Asia/Karachi\" | \"Asia/Kathmandu\" | \"Asia/Khandyga\" | \"Asia/Kolkata\" | \"Asia/Krasnoyarsk\" | \"Asia/Kuala_Lumpur\" | \"Asia/Kuching\" | \"Asia/Macau\" | \"Asia/Magadan\" | \"Asia/Makassar\" | \"Asia/Manila\" | \"Asia/Nicosia\" | \"Asia/Novokuznetsk\" | \"Asia/Novosibirsk\" | \"Asia/Omsk\" | \"Asia/Oral\" | \"Asia/Pontianak\" | \"Asia/Pyongyang\" | \"Asia/Qatar\" | \"Asia/Qostanay\" | \"Asia/Qyzylorda\" | \"Asia/Riyadh\" | \"Asia/Sakhalin\" | \"Asia/Samarkand\" | \"Asia/Seoul\" | \"Asia/Shanghai\" | \"Asia/Singapore\" | \"Asia/Srednekolymsk\" | \"Asia/Taipei\" | \"Asia/Tashkent\" | \"Asia/Tbilisi\" | \"Asia/Tehran\" | \"Asia/Thimphu\" | \"Asia/Tokyo\" | \"Asia/Tomsk\" | \"Asia/Ulaanbaatar\" | \"Asia/Urumqi\" | \"Asia/Ust-Nera\" | \"Asia/Vladivostok\" | \"Asia/Yakutsk\" | \"Asia/Yangon\" | \"Asia/Yekaterinburg\" | \"Asia/Yerevan\" | \"Atlantic/Azores\" | \"Atlantic/Bermuda\" | \"Atlantic/Canary\" | \"Atlantic/Cape_Verde\" | \"Atlantic/Faroe\" | \"Atlantic/Madeira\" | \"Atlantic/Reykjavik\" | \"Atlantic/South_Georgia\" | \"Atlantic/Stanley\" | \"Australia/Adelaide\" | \"Australia/Brisbane\" | \"Australia/Broken_Hill\" | \"Australia/Darwin\" | \"Australia/Eucla\" | \"Australia/Hobart\" | \"Australia/Lindeman\" | \"Australia/Lord_Howe\" | \"Australia/Melbourne\" | \"Australia/Perth\" | \"Australia/Sydney\" | \"CET\" | \"CST6CDT\" | \"EET\" | \"EST\" | \"EST5EDT\" | \"Etc/GMT\" | \"Etc/GMT-1\" | \"Etc/GMT-10\" | \"Etc/GMT-11\" | \"Etc/GMT-12\" | \"Etc/GMT-13\" | \"Etc/GMT-14\" | \"Etc/GMT-2\" | \"Etc/GMT-3\" | \"Etc/GMT-4\" | \"Etc/GMT-5\" | \"Etc/GMT-6\" | \"Etc/GMT-7\" | \"Etc/GMT-8\" | \"Etc/GMT-9\" | \"Etc/GMT+1\" | \"Etc/GMT+10\" | \"Etc/GMT+11\" | \"Etc/GMT+12\" | \"Etc/GMT+2\" | \"Etc/GMT+3\" | \"Etc/GMT+4\" | \"Etc/GMT+5\" | \"Etc/GMT+6\" | \"Etc/GMT+7\" | \"Etc/GMT+8\" | \"Etc/GMT+9\" | \"Etc/UTC\" | \"Europe/Amsterdam\" | \"Europe/Andorra\" | \"Europe/Astrakhan\" | \"Europe/Athens\" | \"Europe/Belgrade\" | \"Europe/Berlin\" | \"Europe/Brussels\" | \"Europe/Bucharest\" | \"Europe/Budapest\" | \"Europe/Chisinau\" | \"Europe/Copenhagen\" | \"Europe/Dublin\" | \"Europe/Gibraltar\" | \"Europe/Helsinki\" | \"Europe/Istanbul\" | \"Europe/Kaliningrad\" | \"Europe/Kiev\" | \"Europe/Kirov\" | \"Europe/Lisbon\" | \"Europe/London\" | \"Europe/Luxembourg\" | \"Europe/Madrid\" | \"Europe/Malta\" | \"Europe/Minsk\" | \"Europe/Monaco\" | \"Europe/Moscow\" | \"Europe/Oslo\" | \"Europe/Paris\" | \"Europe/Prague\" | \"Europe/Riga\" | \"Europe/Rome\" | \"Europe/Samara\" | \"Europe/Saratov\" | \"Europe/Simferopol\" | \"Europe/Sofia\" | \"Europe/Stockholm\" | \"Europe/Tallinn\" | \"Europe/Tirane\" | \"Europe/Ulyanovsk\" | \"Europe/Uzhgorod\" | \"Europe/Vienna\" | \"Europe/Vilnius\" | \"Europe/Volgograd\" | \"Europe/Warsaw\" | \"Europe/Zaporozhye\" | \"Europe/Zurich\" | \"HST\" | \"Indian/Chagos\" | \"Indian/Christmas\" | \"Indian/Cocos\" | \"Indian/Kerguelen\" | \"Indian/Mahe\" | \"Indian/Maldives\" | \"Indian/Mauritius\" | \"Indian/Reunion\" | \"MET\" | \"MST\" | \"MST7MDT\" | \"Pacific/Apia\" | \"Pacific/Auckland\" | \"Pacific/Bougainville\" | \"Pacific/Chatham\" | \"Pacific/Chuuk\" | \"Pacific/Easter\" | \"Pacific/Efate\" | \"Pacific/Fakaofo\" | \"Pacific/Fiji\" | \"Pacific/Funafuti\" | \"Pacific/Galapagos\" | \"Pacific/Gambier\" | \"Pacific/Guadalcanal\" | \"Pacific/Guam\" | \"Pacific/Honolulu\" | \"Pacific/Kanton\" | \"Pacific/Kiritimati\" | \"Pacific/Kosrae\" | \"Pacific/Kwajalein\" | \"Pacific/Majuro\" | \"Pacific/Marquesas\" | \"Pacific/Nauru\" | \"Pacific/Niue\" | \"Pacific/Norfolk\" | \"Pacific/Noumea\" | \"Pacific/Pago_Pago\" | \"Pacific/Palau\" | \"Pacific/Pitcairn\" | \"Pacific/Pohnpei\" | \"Pacific/Port_Moresby\" | \"Pacific/Rarotonga\" | \"Pacific/Tahiti\" | \"Pacific/Tarawa\" | \"Pacific/Tongatapu\" | \"Pacific/Wake\" | \"Pacific/Wallis\" | \"PST8PDT\" | \"WET\"" + }, + "value": "export function useTimezone<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): Timezone {\n const {localization} = useApi();\n\n return useSubscription(localization.timezone);\n}" + } + }, + "UseTranslateGeneratedType": { + "src/surfaces/checkout/preact/translate.ts": { + "filePath": "src/surfaces/checkout/preact/translate.ts", + "name": "UseTranslateGeneratedType", + "description": "Returns the `I18nTranslate` interface used to translate strings.", + "isPublicDocs": true, + "params": [], + "returns": { + "filePath": "src/surfaces/checkout/preact/translate.ts", + "description": "", + "name": "I18nTranslate", + "value": "I18nTranslate" + }, + "value": "export function useTranslate<\n Target extends RenderExtensionTarget = RenderExtensionTarget,\n>(): I18nTranslate {\n const api = useApi();\n return api.i18n.translate.bind(api.i18n);\n}" + } } } \ No newline at end of file diff --git a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_category_pages.json b/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_category_pages.json deleted file mode 100644 index 0637a088a0..0000000000 --- a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_category_pages.json +++ /dev/null @@ -1 +0,0 @@ -[] \ No newline at end of file diff --git a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_docs_data_v2.json b/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_docs_data_v2.json index fd41a7bacf..0d2668e988 100644 --- a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_docs_data_v2.json +++ b/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_docs_data_v2.json @@ -1,12 +1,4 @@ { - "DataGeneratedType": { - "src/docs/shared/components/Abbreviation.ts": { - "filePath": "src/docs/shared/components/Abbreviation.ts", - "name": "DataGeneratedType", - "description": "", - "value": "data: SharedReferenceEntityTemplateSchema = {\n name: 'Abbreviation',\n description:\n 'Displays abbreviated text or acronyms, revealing their full meaning or additional context through a tooltip on hover or focus. Use to clarify shortened terms, initialisms, or technical language without interrupting the reading flow.',\n category: 'Web components',\n subCategory: 'Typography and content',\n related: [],\n}" - } - }, "ValidationError": { "src/shared.ts": { "filePath": "src/shared.ts", @@ -114,7 +106,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "string", - "description": "The value associated with the attribute key. This is a freeform string that can store any information the buyer or app provides.\n\nAttribute values are always strings. To store structured data, serialize it to JSON and parse it when reading.", + "description": "The value associated with the attribute key. This is a freeform string that can store any information the buyer or app provides.", "examples": [ { "title": "Example", @@ -129,7 +121,7 @@ ] } ], - "value": "export interface Attribute {\n /**\n * The identifier for the attribute. Each key must be unique within the\n * set of attributes on the cart or checkout. If you call\n * `applyAttributeChange()` with a key that already exists, then the\n * existing value is replaced.\n *\n * @example 'gift_wrapping'\n */\n key: string;\n\n /**\n * The value associated with the attribute key. This is a freeform string\n * that can store any information the buyer or app provides.\n *\n * Attribute values are always strings. To store structured data, serialize\n * it to JSON and parse it when reading.\n *\n * @example 'Please use red wrapping paper'\n */\n value: string;\n}" + "value": "export interface Attribute {\n /**\n * The identifier for the attribute. Each key must be unique within the\n * set of attributes on the cart or checkout. If you call\n * `applyAttributeChange()` with a key that already exists, then the\n * existing value is replaced.\n *\n * @example 'gift_wrapping'\n */\n key: string;\n\n /**\n * The value associated with the attribute key. This is a freeform string\n * that can store any information the buyer or app provides.\n *\n * @example 'Please use red wrapping paper'\n */\n value: string;\n}" } }, "MailingAddress": { @@ -651,10 +643,10 @@ "syntaxKind": "PropertySignature", "name": "target", "value": "SubscribableSignalLike", - "description": "The cart line that this extension is attached to. Use this to read the line item's merchandise, quantity, cost, and attributes.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties.\n\n> Note: Until version `2023-04`, this property was a `ReadonlySignalLike`." + "description": "The cart line that this extension is attached to. Use this to read the line item's merchandise, quantity, cost, and attributes.\n\n> Note: Until version `2023-04`, this property was a `ReadonlySignalLike`." } ], - "value": "export interface CartLineItemApi {\n /**\n * The cart line that this extension is attached to. Use this to read the\n * line item's merchandise, quantity, cost, and attributes.\n *\n * Available only on the corresponding item target. Shipping option item\n * targets expose shipping option properties; pickup location item targets\n * expose pickup location properties.\n *\n * > Note: Until version `2023-04`, this property was a `ReadonlySignalLike`.\n */\n target: SubscribableSignalLike;\n}" + "value": "export interface CartLineItemApi {\n /**\n * The cart line that this extension is attached to. Use this to read the\n * line item's merchandise, quantity, cost, and attributes.\n *\n * > Note: Until version `2023-04`, this property was a `ReadonlySignalLike`.\n */\n target: SubscribableSignalLike;\n}" } }, "SubscribableSignalLike": { @@ -1341,7 +1333,7 @@ "syntaxKind": "PropertySignature", "name": "message", "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer.\n\nRender your own localized error text rather than displaying this message to the buyer." + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", @@ -1351,7 +1343,7 @@ "description": "Indicates that the note change couldn't be applied. Check the `message` property for details." } ], - "value": "export interface NoteChangeResultError {\n /**\n * Indicates that the note change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n *\n * Render your own localized error text rather than displaying this message\n * to the buyer.\n */\n message: string;\n}" + "value": "export interface NoteChangeResultError {\n /**\n * Indicates that the note change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" } }, "NoteChangeResult": { @@ -1514,7 +1506,7 @@ "syntaxKind": "PropertySignature", "name": "message", "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer.\n\nRender your own localized error text rather than displaying this message to the buyer." + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", @@ -1524,7 +1516,7 @@ "description": "Indicates that the line item wasn't changed successfully. Refer to the `message` property for details about the error." } ], - "value": "export interface CartLineChangeResultError {\n /**\n * Indicates that the line item wasn't changed successfully. Refer to the `message` property for details about the error.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n *\n * Render your own localized error text rather than displaying this message\n * to the buyer.\n */\n message: string;\n}" + "value": "export interface CartLineChangeResultError {\n /**\n * Indicates that the line item wasn't changed successfully. Refer to the `message` property for details about the error.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" } }, "CartLineChangeResult": { @@ -1961,7 +1953,7 @@ "syntaxKind": "PropertySignature", "name": "message", "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer.\n\nRender your own localized error text rather than displaying this message to the buyer." + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", @@ -1971,7 +1963,7 @@ "description": "Indicates that the gift card change couldn't be applied. Check the `message` property for details." } ], - "value": "export interface GiftCardChangeResultError {\n /**\n * Indicates that the gift card change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n *\n * Render your own localized error text rather than displaying this message\n * to the buyer.\n */\n message: string;\n}" + "value": "export interface GiftCardChangeResultError {\n /**\n * Indicates that the gift card change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" } }, "MetafieldRemoveCartChange": { @@ -2072,7 +2064,7 @@ "syntaxKind": "PropertySignature", "name": "message", "value": "string", - "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer.\n\nRender your own localized error text rather than displaying this message to the buyer." + "description": "A message that explains the error. This message is useful for debugging. It isn't localized and shouldn't be displayed to the buyer." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", @@ -2082,7 +2074,7 @@ "description": "Indicates that the metafield change couldn't be applied. Check the `message` property for details." } ], - "value": "export interface MetafieldChangeResultError {\n /**\n * Indicates that the metafield change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n *\n * Render your own localized error text rather than displaying this message\n * to the buyer.\n */\n message: string;\n}" + "value": "export interface MetafieldChangeResultError {\n /**\n * Indicates that the metafield change couldn't be applied. Check the `message` property for details.\n */\n type: 'error';\n\n /**\n * A message that explains the error. This message is useful for debugging.\n * It isn't localized and shouldn't be displayed to the buyer.\n */\n message: string;\n}" } }, "MetafieldChangeResult": { @@ -2236,7 +2228,7 @@ "src/surfaces/checkout/api/checkout/checkout.ts": { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "name": "CheckoutApi", - "description": "", + "description": "Methods for modifying the checkout, including cart lines, discount codes, gift cards, metafields, notes, attributes, and the shipping address. Each method returns a promise that resolves with a result indicating success or failure.", "isPublicDocs": true, "members": [ { @@ -2244,7 +2236,7 @@ "syntaxKind": "MethodSignature", "name": "applyAttributeChange", "value": "(change: AttributeChange) => Promise", - "description": "Updates or removes an attribute on the cart and checkout. On success, the [`attributes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/attributes#properties-propertydetail-attributes) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.", + "description": "Updates or removes an attribute on the cart and checkout. On success, the [`attributes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/attributes#standardapi-propertydetail-attributes) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.", "deprecationMessage": "Use cart metafields instead." }, { @@ -2252,42 +2244,42 @@ "syntaxKind": "MethodSignature", "name": "applyCartLinesChange", "value": "(change: CartLineChange) => Promise", - "description": "Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-lines#properties-propertydetail-lines) property updates with the new state.\n\nAccepts a single change per call. To make multiple changes, call this method separately for each one.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "description": "Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-lines#standardapi-propertydetail-lines) property updates with the new state.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "MethodSignature", "name": "applyDiscountCodeChange", "value": "(change: DiscountCodeChange) => Promise", - "description": "Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/discounts#properties-propertydetail-discountcodes) property updates with the new state.\n\n> Caution: > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves discount codes through a network call.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "description": "Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/discounts#standardapi-propertydetail-discountcodes) property updates with the new state.\n\n> Caution: > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves discount codes through a network call.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "MethodSignature", "name": "applyGiftCardChange", "value": "(change: GiftCardChange) => Promise", - "description": "Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/gift-cards#properties-propertydetail-appliedgiftcards) property updates with the new state.\n\nUnlike other write operations, gift card changes aren't gated by a cart instruction flag.\n\n> Caution: > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves gift card codes through a network call.\n\n> Note: This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "description": "Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/gift-cards#standardapi-propertydetail-appliedgiftcards) property updates with the new state.\n\n> Caution: > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves gift card codes through a network call.\n\n> Note: This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "MethodSignature", "name": "applyMetafieldChange", "value": "(change: MetafieldChange) => Promise", - "description": "Creates, updates, or removes a cart metafield on the checkout. On success, the [`metafields`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/metafields#properties-propertydetail-metafields) property updates to reflect the change.\n\nCart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "description": "Creates, updates, or removes a cart metafield on the checkout. On success, the [`metafields`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/metafields#standardapi-propertydetail-metafields) property updates to reflect the change.\n\nCart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "MethodSignature", "name": "applyNoteChange", "value": "(change: NoteChange) => Promise", - "description": "Sets or removes the buyer's note on the checkout. On success, the [`note`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/note#properties-propertydetail-note) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." + "description": "Sets or removes the buyer's note on the checkout. On success, the [`note`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/note#standardapi-propertydetail-note) property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay." }, { "filePath": "src/surfaces/checkout/api/checkout/checkout.ts", "syntaxKind": "MethodSignature", "name": "applyShippingAddressChange", "value": "(change: ShippingAddressUpdateChange) => Promise", - "description": "Updates the buyer's shipping address on the checkout. The provided fields are merged into the existing address without prompting the buyer. On success, the `shippingAddress` property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "description": "Updates the buyer's shipping address on the checkout. The provided fields are merged into the existing address without prompting the buyer. On success, the `shippingAddress` property updates to reflect the change.\n\n> Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "isOptional": true }, { @@ -2300,7 +2292,7 @@ "isPrivate": true } ], - "value": "export interface CheckoutApi {\n /**\n * Updates or removes an attribute on the cart and checkout. On success, the\n * [`attributes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/attributes#properties-propertydetail-attributes) property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n *\n * @deprecated Use cart metafields instead.\n */\n applyAttributeChange(change: AttributeChange): Promise;\n\n /**\n * Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-lines#properties-propertydetail-lines) property updates with the new state.\n *\n * Accepts a single change per call. To make multiple changes, call this\n * method separately for each one.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyCartLinesChange(change: CartLineChange): Promise;\n\n /**\n * Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/discounts#properties-propertydetail-discountcodes) property updates with the new state.\n *\n * > Caution:\n * > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves discount codes through a network call.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyDiscountCodeChange(\n change: DiscountCodeChange,\n ): Promise;\n\n /**\n * Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/gift-cards#properties-propertydetail-appliedgiftcards) property updates with the new state.\n *\n * Unlike other write operations, gift card changes aren't gated by a cart\n * instruction flag.\n *\n * > Caution:\n * > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves gift card codes through a network call.\n *\n * > Note: This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyGiftCardChange(change: GiftCardChange): Promise;\n\n /**\n * Creates, updates, or removes a cart metafield on the checkout. On success, the\n * [`metafields`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/metafields#properties-propertydetail-metafields) property updates to reflect the change.\n *\n * Cart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyMetafieldChange(change: MetafieldChange): Promise;\n\n /**\n * Sets or removes the buyer's note on the checkout. On success, the\n * [`note`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/note#properties-propertydetail-note)\n * property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyNoteChange(change: NoteChange): Promise;\n\n /**\n * @private\n */\n experimentalIsShopAppStyle?: boolean;\n\n /**\n * Updates the buyer's shipping address on the checkout. The provided fields\n * are merged into the existing address without prompting the buyer. On success,\n * the `shippingAddress` property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#properties-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n applyShippingAddressChange?(\n change: ShippingAddressChange,\n ): Promise;\n}" + "value": "export interface CheckoutApi {\n /**\n * Updates or removes an attribute on the cart and checkout. On success, the\n * [`attributes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/attributes#standardapi-propertydetail-attributes) property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `attributes.canUpdateAttributes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n *\n * @deprecated Use cart metafields instead.\n */\n applyAttributeChange(change: AttributeChange): Promise;\n\n /**\n * Adds, removes, or updates line items in the cart. The returned promise resolves when the change has been applied by the server, and the [`lines`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-lines#standardapi-propertydetail-lines) property updates with the new state.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `lines.canAddCartLine` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyCartLinesChange(change: CartLineChange): Promise;\n\n /**\n * Adds or removes a discount code on the checkout. The returned promise resolves when the change has been applied by the server, and the [`discountCodes`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/discounts#standardapi-propertydetail-discountcodes) property updates with the new state.\n *\n * > Caution:\n * > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves discount codes through a network call.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `discounts.canUpdateDiscountCodes` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyDiscountCodeChange(\n change: DiscountCodeChange,\n ): Promise;\n\n /**\n * Adds or removes a gift card from the checkout. The returned promise resolves when the change has been applied by the server, and the [`appliedGiftCards`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/gift-cards#standardapi-propertydetail-appliedgiftcards) property updates with the new state.\n *\n * > Caution:\n * > See [security considerations](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access) if your extension retrieves gift card codes through a network call.\n *\n * > Note: This method returns an error if the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyGiftCardChange(change: GiftCardChange): Promise;\n\n /**\n * Creates, updates, or removes a cart metafield on the checkout. On success, the\n * [`metafields`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/metafields#standardapi-propertydetail-metafields) property updates to reflect the change.\n *\n * Cart metafields are copied to order metafields at order creation time if there's a matching order metafield definition with the [`cart to order copyable`](/docs/apps/build/metafields/use-metafield-capabilities#cart-to-order-copyable) capability enabled.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `metafields.canSetCartMetafields` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyMetafieldChange(change: MetafieldChange): Promise;\n\n /**\n * Sets or removes the buyer's note on the checkout. On success, the\n * [`note`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/note#standardapi-propertydetail-note)\n * property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `notes.canUpdateNote` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n */\n applyNoteChange(change: NoteChange): Promise;\n\n /**\n * @private\n */\n experimentalIsShopAppStyle?: boolean;\n\n /**\n * Updates the buyer's shipping address on the checkout. The provided fields\n * are merged into the existing address without prompting the buyer. On success,\n * the `shippingAddress` property updates to reflect the change.\n *\n * > Note: This method returns an error if the [cart instruction](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#standardapi-propertydetail-instructions) `delivery.canSelectCustomAddress` is false, or the buyer is using an accelerated checkout method, such as Apple Pay or Google Pay.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n applyShippingAddressChange?(\n change: ShippingAddressChange,\n ): Promise;\n}" } }, "OrderConfirmation": { @@ -2322,7 +2314,7 @@ "syntaxKind": "PropertySignature", "name": "number", "value": "string", - "description": "A randomly generated alpha-numeric identifier for the order, distinct from `order.id`. The value is `undefined` for orders that were created before this field was introduced. All recent orders have a number.\n\nOptional. Might not be present for orders created before 2024.", + "description": "A randomly generated alpha-numeric identifier for the order, distinct from `order.id`. The value is `undefined` for orders that were created before this field was introduced. All recent orders have a number.", "isOptional": true }, { @@ -2333,7 +2325,7 @@ "description": "" } ], - "value": "export interface OrderConfirmation {\n order: {\n /**\n * A globally unique identifier for the order. This becomes the\n * [`Order`](/docs/api/admin-graphql/latest/objects/Order) object ID in the\n * GraphQL Admin API after the order is created.\n *\n * @example 'gid://shopify/Order/123'\n */\n id: string;\n };\n /**\n * A randomly generated alpha-numeric identifier for the order, distinct\n * from `order.id`. The value is `undefined` for orders that were created\n * before this field was introduced. All recent orders have a number.\n *\n * Optional. Might not be present for orders created before 2024.\n */\n number?: string;\n\n /**\n * Whether this is the customer's first completed order with this shop. `true` means the buyer hasn't placed an order here before. Use this to show first-purchase messaging or trigger welcome offers.\n */\n isFirstOrder: boolean;\n}" + "value": "export interface OrderConfirmation {\n order: {\n /**\n * A globally unique identifier for the order. This becomes the\n * [`Order`](/docs/api/admin-graphql/latest/objects/Order) object ID in the\n * GraphQL Admin API after the order is created.\n *\n * @example 'gid://shopify/Order/123'\n */\n id: string;\n };\n /**\n * A randomly generated alpha-numeric identifier for the order, distinct\n * from `order.id`. The value is `undefined` for orders that were created\n * before this field was introduced. All recent orders have a number.\n */\n number?: string;\n\n /**\n * Whether this is the customer's first completed order with this shop. `true` means the buyer hasn't placed an order here before. Use this to show first-purchase messaging or trigger welcome offers.\n */\n isFirstOrder: boolean;\n}" } }, "OrderConfirmationApi": { @@ -2529,10 +2521,10 @@ "syntaxKind": "PropertySignature", "name": "isLocationFormVisible", "value": "SubscribableSignalLike", - "description": "Reflects which view was active when the extension loaded. When the buyer moves to the next view, the extension restarts with the current value rather than updating in place." + "description": "Whether the location search form is currently visible to the buyer. Use this to conditionally render UI that depends on the buyer actively searching for pickup points." } ], - "value": "export interface PickupPointListApi {\n /**\n * Reflects which view was active when the extension loaded. When the\n * buyer moves to the next view, the extension restarts with the\n * current value rather than updating in place.\n */\n isLocationFormVisible: SubscribableSignalLike;\n}" + "value": "export interface PickupPointListApi {\n /**\n * Whether the location search form is currently visible to the buyer.\n * Use this to conditionally render UI that depends on the buyer actively\n * searching for pickup points.\n */\n isLocationFormVisible: SubscribableSignalLike;\n}" } }, "PickupLocationItemApi": { @@ -2547,17 +2539,17 @@ "syntaxKind": "PropertySignature", "name": "isTargetSelected", "value": "SubscribableSignalLike", - "description": "Whether the buyer has selected the target pickup location. When `true`, the target location is the buyer's active choice. When `false`, the buyer has chosen a different pickup location.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties." + "description": "Whether the buyer has selected the target pickup location. When `true`, the target location is the buyer's active choice. When `false`, the buyer has chosen a different pickup location." }, { "filePath": "src/surfaces/checkout/api/pickup/pickup-location-item.ts", "syntaxKind": "PropertySignature", "name": "target", "value": "SubscribableSignalLike", - "description": "The pickup location that this extension is attached to. Use this to read the location's name, address, and other details.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties." + "description": "The pickup location that this extension is attached to. Use this to read the location's name, address, and other details." } ], - "value": "export interface PickupLocationItemApi {\n /**\n * The pickup location that this extension is attached to. Use this to read the location's name, address, and other details.\n *\n * Available only on the corresponding item target. Shipping option item\n * targets expose shipping option properties; pickup location item targets\n * expose pickup location properties.\n */\n target: SubscribableSignalLike;\n\n /**\n * Whether the buyer has selected the target pickup location. When `true`, the target location is the buyer's active choice. When `false`, the buyer has chosen a different pickup location.\n *\n * Available only on the corresponding item target. Shipping option item\n * targets expose shipping option properties; pickup location item targets\n * expose pickup location properties.\n */\n isTargetSelected: SubscribableSignalLike;\n}" + "value": "export interface PickupLocationItemApi {\n /**\n * The pickup location that this extension is attached to. Use this to read the location's name, address, and other details.\n */\n target: SubscribableSignalLike;\n\n /**\n * Whether the buyer has selected the target pickup location. When `true`, the target location is the buyer's active choice. When `false`, the buyer has chosen a different pickup location.\n */\n isTargetSelected: SubscribableSignalLike;\n}" } }, "PickupLocationOption": { @@ -2901,7 +2893,7 @@ "syntaxKind": "PropertySignature", "name": "isTargetSelected", "value": "SubscribableSignalLike", - "description": "Whether the buyer has selected the target shipping option. When `true`, the target option is the buyer's active choice. When `false`, the buyer has chosen a different shipping option.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties." + "description": "Whether the buyer has selected the target shipping option. When `true`, the target option is the buyer's active choice. When `false`, the buyer has chosen a different shipping option." }, { "filePath": "src/surfaces/checkout/api/shipping/shipping-option-item.ts", @@ -2915,10 +2907,10 @@ "syntaxKind": "PropertySignature", "name": "target", "value": "SubscribableSignalLike", - "description": "The shipping option that this extension is attached to. Use this to read the option's cost, carrier, delivery estimate, and other details.\n\nAvailable only on the corresponding item target. Shipping option item targets expose shipping option properties; pickup location item targets expose pickup location properties." + "description": "The shipping option that this extension is attached to. Use this to read the option's cost, carrier, delivery estimate, and other details." } ], - "value": "export interface ShippingOptionItemApi {\n /**\n * The shipping option that this extension is attached to. Use this to read the option's cost, carrier, delivery estimate, and other details.\n *\n * Available only on the corresponding item target. Shipping option item\n * targets expose shipping option properties; pickup location item targets\n * expose pickup location properties.\n */\n target: SubscribableSignalLike;\n\n /**\n * Whether the buyer has selected the target shipping option. When `true`, the target option is the buyer's active choice. When `false`, the buyer has chosen a different shipping option.\n *\n * Available only on the corresponding item target. Shipping option item\n * targets expose shipping option properties; pickup location item targets\n * expose pickup location properties.\n */\n isTargetSelected: SubscribableSignalLike;\n\n /**\n * The render mode of this shipping option, indicating how the extension is displayed in the checkout UI.\n */\n renderMode: ShippingOptionItemRenderMode;\n}" + "value": "export interface ShippingOptionItemApi {\n /**\n * The shipping option that this extension is attached to. Use this to read the option's cost, carrier, delivery estimate, and other details.\n */\n target: SubscribableSignalLike;\n\n /**\n * Whether the buyer has selected the target shipping option. When `true`, the target option is the buyer's active choice. When `false`, the buyer has chosen a different shipping option.\n */\n isTargetSelected: SubscribableSignalLike;\n\n /**\n * The render mode of this shipping option, indicating how the extension is displayed in the checkout UI.\n */\n renderMode: ShippingOptionItemRenderMode;\n}" } }, "ShippingOptionItemRenderMode": { @@ -4001,7 +3993,7 @@ "syntaxKind": "PropertySignature", "name": "applyTrackingConsentChange", "value": "ApplyTrackingConsentChangeType", - "description": "Enables setting and updating customer privacy consent settings and tracking consent metafields.\n\n> Note: Requires the [`collect_buyer_consent` capability](/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent) to be set to `true`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." + "description": "Enables setting and updating customer privacy consent settings and tracking consent metafields.\n\n> Note: Requires the [`customer_privacy` capability](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent) to be set to `true`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -4022,7 +4014,7 @@ "syntaxKind": "PropertySignature", "name": "availablePaymentOptions", "value": "SubscribableSignalLike", - "description": "All payment options available to the buyer for this checkout, such as credit cards, wallets, and local payment methods. The list depends on the shop's payment configuration and the buyer's region.\n\nThe set of payment options can change when the buyer updates their address or cart, so subscribe to changes rather than reading once during initialization. Each option exposes `handle` and `type` only. Provider names, logos, fees, and installment terms aren't available." + "description": "All payment options available to the buyer for this checkout, such as credit cards, wallets, and local payment methods. The list depends on the shop's payment configuration and the buyer's region." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -4059,7 +4051,7 @@ "syntaxKind": "PropertySignature", "name": "checkoutToken", "value": "SubscribableSignalLike", - "description": "A stable ID that represents the current checkout.\n\nThe value is `undefined` when the checkout hasn't been created on the server yet.\n\nUse this to correlate checkout sessions across your extension, web pixels, and backend systems.\n\nThis matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data) and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object).\n\nCan be `undefined`. Handle the `undefined` state before using the value." + "description": "A stable ID that represents the current checkout.\n\nThe value is `undefined` when the checkout hasn't been created on the server yet.\n\nUse this to correlate checkout sessions across your extension, web pixels, and backend systems.\n\nThis matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data) and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -4080,7 +4072,7 @@ "syntaxKind": "PropertySignature", "name": "deliveryGroups", "value": "SubscribableSignalLike", - "description": "The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items.\n\nEmpty until the buyer enters enough address information for Shopify to calculate shipping rates." + "description": "The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -4109,7 +4101,7 @@ "name": "extensionPoint", "value": "Target", "description": "The identifier that specifies where in Shopify's UI your code is being injected. This is one of the targets you've included in your extension's configuration file.", - "deprecationMessage": "Use `extension.target` instead.", + "deprecationMessage": "Deprecated as of version `2023-07`, use `extension.target` instead.", "examples": [ { "title": "Example", @@ -4135,7 +4127,7 @@ "syntaxKind": "PropertySignature", "name": "instructions", "value": "SubscribableSignalLike", - "description": "The cart instructions used to create the checkout and possibly limit extension capabilities.\n\nThese instructions should be checked before performing any actions that might be affected by them.\n\nFor example, if you intend to add a discount code via the `applyDiscountCodeChange` method, check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout.\n\n> Caution: Check cart instructions before calling select APIs, as > some may not be available. See the > [Cart Instructions API](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#examples) > for more information." + "description": "The cart instructions used to create the checkout and possibly limit extension capabilities.\n\nThese instructions should be checked before performing any actions that might be affected by them.\n\nFor example, if you intend to add a discount code via the `applyDiscountCodeChange` method, check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout.\n\n> Caution: As of version `2024-07`, UI extension code must check for instructions before calling select APIs in case those APIs aren't available. See the [update guide](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#examples) for more information." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -4149,7 +4141,7 @@ "syntaxKind": "PropertySignature", "name": "localization", "value": "Localization", - "description": "The buyer's language, country, currency, and timezone context. For formatting and translation helpers, use the [`i18n`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization#properties-propertydetail-i18n) object instead." + "description": "The buyer's language, country, currency, and timezone context. For formatting and translation helpers, use the [`i18n`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization#standardapi-propertydetail-i18n) object instead." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -4171,14 +4163,14 @@ "syntaxKind": "PropertySignature", "name": "query", "value": ">(query: string, options?: { variables?: Variables; version?: StorefrontApiVersion; }) => Promise<{ data?: Data; errors?: GraphQLError[]; }>", - "description": "The method used to query the Storefront GraphQL API with a prefetched token." + "description": "The method used to query the Storefront GraphQL API with a prefetched token.\n\nRefer to [Storefront API access examples](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/storefront-api) for more information." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "selectedPaymentOptions", "value": "SubscribableSignalLike", - "description": "The payment options the buyer has currently selected. This updates as the buyer changes their payment method. The array can contain multiple entries when the buyer splits payment across methods (for example, a gift card and a credit card).\n\nEach option exposes `handle` and `type` only. Provider names, logos, fees, and installment terms aren't available." + "description": "The payment options the buyer has currently selected. This updates as the buyer changes their payment method. The array can contain multiple entries when the buyer splits payment across methods (for example, a gift card and a credit card)." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -4214,7 +4206,7 @@ "syntaxKind": "PropertySignature", "name": "storage", "value": "Storage", - "description": "Key-value storage that persists across page loads within the current checkout session. Data is shared across all activated targets associated with this extension.\n\n> Caution: Data persistence isn't guaranteed and storage is cleared when the buyer starts a new checkout." + "description": "Key-value storage that persists across page loads within the current checkout session. Data is shared across all activated extension targets of this extension.\n\n> Caution: Data persistence isn't guaranteed and storage is cleared when the buyer starts a new checkout." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -4236,7 +4228,7 @@ ] } ], - "value": "export interface StandardApi {\n /**\n * Tracks custom events and sends visitor information to\n * [Web Pixels](/docs/apps/marketing). Use `publish()` to emit events\n * and `visitor()` to submit buyer contact details.\n */\n analytics: Analytics;\n\n /**\n * The gift cards that have been applied to the checkout. Each entry includes\n * the last four characters of the gift card code, the amount used at\n * checkout, and the card's remaining balance.\n */\n appliedGiftCards: SubscribableSignalLike;\n\n /**\n * The cart instructions used to create the checkout and possibly limit extension capabilities.\n *\n * These instructions should be checked before performing any actions that might be affected by them.\n *\n * For example, if you intend to add a discount code via the `applyDiscountCodeChange` method,\n * check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout.\n *\n * > Caution: Check cart instructions before calling select APIs, as\n * > some may not be available. See the\n * > [Cart Instructions API](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#examples)\n * > for more information.\n *\n */\n instructions: SubscribableSignalLike;\n\n /**\n * The metafields requested in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration)\n * file. These metafields are updated when there's a change in the merchandise items\n * being purchased by the customer.\n *\n * App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` isn't supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n appMetafields: SubscribableSignalLike;\n\n /**\n * The custom key-value attributes attached to the cart or checkout. These are set by the buyer or by an extension using `applyAttributeChange()`. The list is empty if no attributes have been added.\n */\n attributes: SubscribableSignalLike;\n\n /**\n * All payment options available to the buyer for this checkout, such as\n * credit cards, wallets, and local payment methods. The list depends on\n * the shop's payment configuration and the buyer's region.\n *\n * The set of payment options can change when the buyer updates their\n * address or cart, so subscribe to changes rather than reading once\n * during initialization. Each option exposes `handle` and `type` only.\n * Provider names, logos, fees, and installment terms aren't available.\n */\n availablePaymentOptions: SubscribableSignalLike;\n\n /**\n * Information about the buyer that's interacting with the checkout. The property is available only if the extension has access to protected customer data.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n buyerIdentity?: BuyerIdentity;\n\n /**\n * Provides details on the buyer's progression through the checkout and lets you intercept navigation to validate data before the buyer continues.\n *\n * Refer to [buyer journey](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/buyer-journey#examples)\n * examples for more information.\n */\n buyerJourney: BuyerJourney;\n\n /**\n * Settings applied to the buyer's checkout.\n */\n checkoutSettings: SubscribableSignalLike;\n\n /**\n * A stable ID that represents the current checkout.\n *\n * The value is `undefined` when the checkout hasn't been created on the server yet.\n *\n * Use this to correlate checkout sessions across your extension, web pixels, and backend systems.\n *\n * This matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data)\n * and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object).\n *\n * Can be `undefined`. Handle the `undefined` state before using the value.\n */\n checkoutToken: SubscribableSignalLike;\n\n /**\n * The cost breakdown for the current checkout, including subtotal, shipping, tax, and total amounts. These values update as the buyer progresses through checkout and costs like shipping and tax are calculated.\n */\n cost: CartCost;\n\n /**\n * The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items.\n *\n * Empty until the buyer enters enough address information for Shopify to\n * calculate shipping rates.\n */\n deliveryGroups: SubscribableSignalLike;\n\n /**\n * The discount codes currently applied to the checkout. The list is empty if no discount codes have been applied. Use `applyDiscountCodeChange()` to add or remove codes.\n */\n discountCodes: SubscribableSignalLike;\n\n /**\n * The discount allocations applied to the entire cart, including automatic discounts, code-based discounts, and custom discounts from [Shopify Functions](/docs/apps/build/functions). Each allocation indicates how much was discounted and how the discount was triggered.\n */\n discountAllocations: SubscribableSignalLike;\n\n /**\n * Metadata about the running extension, including the current target, API version,\n * capabilities, and editor context. Use this to conditionally render content\n * based on where the extension is running.\n */\n extension: Extension;\n\n /**\n * The identifier that specifies where in Shopify's UI your code is being\n * injected. This is one of the targets you've included in your\n * extension's configuration file.\n *\n * @example 'purchase.checkout.block.render'\n * @see /docs/api/checkout-ui-extensions/{API_VERSION}/extension-targets-overview\n * @see /docs/apps/app-extensions/configuration#targets\n *\n * @deprecated Use `extension.target` instead.\n */\n extensionPoint: Target;\n\n /**\n * Utilities for translating strings, formatting currencies, numbers, and dates\n * according to the buyer's locale. Use alongside\n * [`localization`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization)\n * to build fully localized extensions.\n */\n i18n: I18n;\n\n /**\n * The list of line items the buyer intends to purchase. Each entry includes the merchandise, quantity, cost, and any custom attributes. Use `applyCartLinesChange()` to add, remove, or update line items.\n */\n lines: SubscribableSignalLike;\n\n /**\n * The buyer's language, country, currency, and timezone context. For\n * formatting and translation helpers, use the\n * [`i18n`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization#properties-propertydetail-i18n)\n * object instead.\n */\n localization: Localization;\n\n /**\n * A note left by the customer to the merchant, either in their cart or during checkout.\n *\n * The value is `undefined` if the buyer hasn't entered a note. Use this to display or react to order-level instructions such as delivery preferences or gift messages.\n */\n note: SubscribableSignalLike;\n\n /**\n * The method used to query the Storefront GraphQL API with a prefetched token.\n *\n */\n query: >(\n query: string,\n options?: {variables?: Variables; version?: StorefrontApiVersion},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n\n /**\n * The payment options the buyer has currently selected. This updates as\n * the buyer changes their payment method. The array can contain multiple\n * entries when the buyer splits payment across methods (for example, a\n * gift card and a credit card).\n *\n * Each option exposes `handle` and `type` only. Provider names, logos,\n * fees, and installment terms aren't available.\n */\n selectedPaymentOptions: SubscribableSignalLike;\n\n /**\n * The session token providing a set of claims as a signed JSON Web Token (JWT).\n *\n * The token has a TTL of five minutes.\n *\n * If the previous token expires, this value reflects a new session token with a new signature and expiry.\n *\n * Learn more about [session tokens](/docs/apps/build/authentication-authorization/session-tokens).\n */\n sessionToken: SessionToken;\n\n /**\n * The settings matching the settings definition written in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n *\n * Refer to [settings examples](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/settings#examples) for more information.\n *\n * > Note: When an extension is being installed in the editor, the settings are empty until\n * a merchant sets a value. In that case, this object updates in real time as a merchant fills in the settings.\n */\n settings: SubscribableSignalLike;\n\n /**\n * The proposed customer shipping address. During the information step, the address\n * updates when the field is committed (on change) rather than every keystroke.\n * The property is available only if the extension has access to protected customer\n * data. When available, the subscribable value is `undefined` if delivery isn't required.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n shippingAddress?: SubscribableSignalLike;\n\n /**\n * The proposed customer billing address. The address updates when the field is\n * committed (on change) rather than every keystroke. The property is available only\n * if the extension has access to protected customer data. The subscribable value is\n * `undefined` if the billing address hasn't been provided yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n billingAddress?: SubscribableSignalLike;\n\n /**\n * The store where the checkout is taking place, including the shop name,\n * storefront URL, `.myshopify.com` subdomain, and a globally-unique ID.\n */\n shop: Shop;\n\n /**\n * Key-value storage that persists across page loads within the current checkout\n * session. Data is shared across all activated targets associated with\n * this extension.\n *\n * > Caution: Data persistence isn't guaranteed and storage is cleared when the\n * buyer starts a new checkout.\n */\n storage: Storage;\n\n /**\n * The renderer version being used for the extension.\n *\n * @example '2025-10'\n */\n version: Version;\n\n /**\n * Customer privacy consent settings and a flag denoting if consent has previously been collected.\n */\n customerPrivacy: SubscribableSignalLike;\n\n /**\n * Enables setting and updating customer privacy consent settings and tracking consent metafields.\n *\n * > Note: Requires the [`collect_buyer_consent` capability](/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent) to be set to `true`.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n applyTrackingConsentChange: ApplyTrackingConsentChangeType;\n\n /**\n * Additional region-specific fields required during checkout, such as tax identification numbers (Brazil's CPF/CNPJ) or customs credentials. The property is available only if the extension has access to protected customer data. The array is empty if the current checkout doesn't require any localized fields.\n */\n localizedFields?: SubscribableSignalLike;\n}" + "value": "export interface StandardApi {\n /**\n * Tracks custom events and sends visitor information to\n * [Web Pixels](/docs/apps/marketing). Use `publish()` to emit events\n * and `visitor()` to submit buyer contact details.\n */\n analytics: Analytics;\n\n /**\n * The gift cards that have been applied to the checkout. Each entry includes\n * the last four characters of the gift card code, the amount used at\n * checkout, and the card's remaining balance.\n */\n appliedGiftCards: SubscribableSignalLike;\n\n /**\n * The cart instructions used to create the checkout and possibly limit extension capabilities.\n *\n * These instructions should be checked before performing any actions that might be affected by them.\n *\n * For example, if you intend to add a discount code via the `applyDiscountCodeChange` method,\n * check `discounts.canUpdateDiscountCodes` to ensure it's supported in this checkout.\n *\n * > Caution: As of version `2024-07`, UI extension code must check for instructions before calling select APIs in case those APIs aren't available.\n * See the [update guide](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/cart-instructions#examples) for more information.\n *\n */\n instructions: SubscribableSignalLike;\n\n /**\n * The metafields requested in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration)\n * file. These metafields are updated when there's a change in the merchandise items\n * being purchased by the customer.\n *\n * App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` isn't supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n appMetafields: SubscribableSignalLike;\n\n /**\n * The custom key-value attributes attached to the cart or checkout. These are set by the buyer or by an extension using `applyAttributeChange()`. The list is empty if no attributes have been added.\n */\n attributes: SubscribableSignalLike;\n\n /**\n * All payment options available to the buyer for this checkout, such as credit cards, wallets, and local payment methods. The list depends on the shop's payment configuration and the buyer's region.\n */\n availablePaymentOptions: SubscribableSignalLike;\n\n /**\n * Information about the buyer that's interacting with the checkout. The property is available only if the extension has access to protected customer data.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n buyerIdentity?: BuyerIdentity;\n\n /**\n * Provides details on the buyer's progression through the checkout and lets you intercept navigation to validate data before the buyer continues.\n *\n * Refer to [buyer journey](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/buyer-journey#examples)\n * examples for more information.\n */\n buyerJourney: BuyerJourney;\n\n /**\n * Settings applied to the buyer's checkout.\n */\n checkoutSettings: SubscribableSignalLike;\n\n /**\n * A stable ID that represents the current checkout.\n *\n * The value is `undefined` when the checkout hasn't been created on the server yet.\n *\n * Use this to correlate checkout sessions across your extension, web pixels, and backend systems.\n *\n * This matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data)\n * and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object).\n */\n checkoutToken: SubscribableSignalLike;\n\n /**\n * The cost breakdown for the current checkout, including subtotal, shipping, tax, and total amounts. These values update as the buyer progresses through checkout and costs like shipping and tax are calculated.\n */\n cost: CartCost;\n\n /**\n * The delivery groups for this checkout. Each group contains one or more cart lines and the available delivery options (shipping, pickup point, or pickup location) for those items.\n */\n deliveryGroups: SubscribableSignalLike;\n\n /**\n * The discount codes currently applied to the checkout. The list is empty if no discount codes have been applied. Use `applyDiscountCodeChange()` to add or remove codes.\n */\n discountCodes: SubscribableSignalLike;\n\n /**\n * The discount allocations applied to the entire cart, including automatic discounts, code-based discounts, and custom discounts from [Shopify Functions](/docs/apps/build/functions). Each allocation indicates how much was discounted and how the discount was triggered.\n */\n discountAllocations: SubscribableSignalLike;\n\n /**\n * Metadata about the running extension, including the current target, API version,\n * capabilities, and editor context. Use this to conditionally render content\n * based on where the extension is running.\n */\n extension: Extension;\n\n /**\n * The identifier that specifies where in Shopify's UI your code is being\n * injected. This is one of the targets you've included in your\n * extension's configuration file.\n *\n * @example 'purchase.checkout.block.render'\n * @see /docs/api/checkout-ui-extensions/{API_VERSION}/extension-targets-overview\n * @see /docs/apps/app-extensions/configuration#targets\n *\n * @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.\n */\n extensionPoint: Target;\n\n /**\n * Utilities for translating strings, formatting currencies, numbers, and dates\n * according to the buyer's locale. Use alongside\n * [`localization`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization)\n * to build fully localized extensions.\n */\n i18n: I18n;\n\n /**\n * The list of line items the buyer intends to purchase. Each entry includes the merchandise, quantity, cost, and any custom attributes. Use `applyCartLinesChange()` to add, remove, or update line items.\n */\n lines: SubscribableSignalLike;\n\n /**\n * The buyer's language, country, currency, and timezone context. For\n * formatting and translation helpers, use the\n * [`i18n`](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/localization#standardapi-propertydetail-i18n)\n * object instead.\n */\n localization: Localization;\n\n /**\n * A note left by the customer to the merchant, either in their cart or during checkout.\n *\n * The value is `undefined` if the buyer hasn't entered a note. Use this to display or react to order-level instructions such as delivery preferences or gift messages.\n */\n note: SubscribableSignalLike;\n\n /**\n * The method used to query the Storefront GraphQL API with a prefetched token.\n *\n * Refer to [Storefront API access examples](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/storefront-api) for more information.\n */\n query: >(\n query: string,\n options?: {variables?: Variables; version?: StorefrontApiVersion},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n\n /**\n * The payment options the buyer has currently selected. This updates as the buyer changes their payment method. The array can contain multiple entries when the buyer splits payment across methods (for example, a gift card and a credit card).\n */\n selectedPaymentOptions: SubscribableSignalLike;\n\n /**\n * The session token providing a set of claims as a signed JSON Web Token (JWT).\n *\n * The token has a TTL of five minutes.\n *\n * If the previous token expires, this value reflects a new session token with a new signature and expiry.\n *\n * Learn more about [session tokens](/docs/apps/build/authentication-authorization/session-tokens).\n */\n sessionToken: SessionToken;\n\n /**\n * The settings matching the settings definition written in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n *\n * Refer to [settings examples](/docs/api/checkout-ui-extensions/{API_VERSION}/apis/settings#examples) for more information.\n *\n * > Note: When an extension is being installed in the editor, the settings are empty until\n * a merchant sets a value. In that case, this object updates in real time as a merchant fills in the settings.\n */\n settings: SubscribableSignalLike;\n\n /**\n * The proposed customer shipping address. During the information step, the address\n * updates when the field is committed (on change) rather than every keystroke.\n * The property is available only if the extension has access to protected customer\n * data. When available, the subscribable value is `undefined` if delivery isn't required.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n shippingAddress?: SubscribableSignalLike;\n\n /**\n * The proposed customer billing address. The address updates when the field is\n * committed (on change) rather than every keystroke. The property is available only\n * if the extension has access to protected customer data. The subscribable value is\n * `undefined` if the billing address hasn't been provided yet.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n billingAddress?: SubscribableSignalLike;\n\n /**\n * The store where the checkout is taking place, including the shop name,\n * storefront URL, `.myshopify.com` subdomain, and a globally-unique ID.\n */\n shop: Shop;\n\n /**\n * Key-value storage that persists across page loads within the current checkout\n * session. Data is shared across all activated extension targets of this\n * extension.\n *\n * > Caution: Data persistence isn't guaranteed and storage is cleared when the\n * buyer starts a new checkout.\n */\n storage: Storage;\n\n /**\n * The renderer version being used for the extension.\n *\n * @example '2025-10'\n */\n version: Version;\n\n /**\n * Customer privacy consent settings and a flag denoting if consent has previously been collected.\n */\n customerPrivacy: SubscribableSignalLike;\n\n /**\n * Enables setting and updating customer privacy consent settings and tracking consent metafields.\n *\n * > Note: Requires the [`customer_privacy` capability](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent) to be set to `true`.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n applyTrackingConsentChange: ApplyTrackingConsentChangeType;\n\n /**\n * Additional region-specific fields required during checkout, such as tax identification numbers (Brazil's CPF/CNPJ) or customs credentials. The property is available only if the extension has access to protected customer data. The array is empty if the current checkout doesn't require any localized fields.\n */\n localizedFields?: SubscribableSignalLike;\n}" } }, "Analytics": { @@ -4250,7 +4242,7 @@ "syntaxKind": "MethodSignature", "name": "publish", "value": "(name: string, data: Record) => Promise", - "description": "Publishes a custom event to [Web Pixels](/docs/apps/marketing). Returns `true` when the event is successfully dispatched.\n\nThe Promise resolves to `true` when the event was dispatched. The boolean indicates dispatch confirmation only. It doesn't indicate whether any specific web pixel processed the event." + "description": "Publishes a custom event to [Web Pixels](/docs/apps/marketing). Returns `true` when the event is successfully dispatched." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -4260,7 +4252,7 @@ "description": "Submits buyer contact details for attribution and analytics purposes." } ], - "value": "export interface Analytics {\n /**\n * Publishes a custom event to [Web Pixels](/docs/apps/marketing).\n * Returns `true` when the event is successfully dispatched.\n *\n * The Promise resolves to `true` when the event was dispatched. The boolean\n * indicates dispatch confirmation only. It doesn't indicate whether any\n * specific web pixel processed the event.\n */\n publish(name: string, data: Record): Promise;\n\n /**\n * Submits buyer contact details for attribution and analytics purposes.\n */\n visitor(data: {email?: string; phone?: string}): Promise;\n}" + "value": "export interface Analytics {\n /**\n * Publishes a custom event to [Web Pixels](/docs/apps/marketing).\n * Returns `true` when the event is successfully dispatched.\n */\n publish(name: string, data: Record): Promise;\n\n /**\n * Submits buyer contact details for attribution and analytics purposes.\n */\n visitor(data: {email?: string; phone?: string}): Promise;\n}" } }, "VisitorResult": { @@ -4460,10 +4452,10 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "string | null", - "description": "The new value to store in the metafield. Set to `null` to delete the metafield.\n\nConsent metafield values are strings, not booleans. Pass `null` to delete a tracking consent metafield." + "description": "The new value to store in the metafield. Set to `null` to delete the metafield." } ], - "value": "export interface TrackingConsentMetafieldChange {\n /**\n * The identifier for the tracking consent metafield to update.\n */\n key: string;\n /**\n * The new value to store in the metafield. Set to `null` to delete the metafield.\n *\n * Consent metafield values are strings, not booleans. Pass `null` to delete\n * a tracking consent metafield.\n */\n value: string | null;\n}" + "value": "export interface TrackingConsentMetafieldChange {\n /**\n * The identifier for the tracking consent metafield to update.\n */\n key: string;\n /**\n * The new value to store in the metafield. Set to `null` to delete the metafield.\n */\n value: string | null;\n}" } }, "VisitorConsent": { @@ -4792,7 +4784,7 @@ "syntaxKind": "PropertySignature", "name": "id", "value": "string", - "description": "An identifier for the customer in the format `gid://shopify/Customer/`. This value is unique per shop.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", + "description": "A globally-unique identifier for the customer in the format `gid://shopify/Customer/`.\n\n{% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).", "examples": [ { "title": "Example", @@ -4845,7 +4837,7 @@ "isPrivate": true } ], - "value": "export interface Customer {\n /**\n * An identifier for the customer in the format `gid://shopify/Customer/`. This value is unique per shop.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'gid://shopify/Customer/123'\n */\n id: string;\n /**\n * The email address associated with the customer's account. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n email?: string;\n /**\n * The phone number associated with the customer's account. The value is `undefined` if no phone number is on file or the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n phone?: string;\n /**\n * The customer's full name, typically a combination of first and last name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n fullName?: string;\n /**\n * The customer's first name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n firstName?: string;\n /**\n * The customer's last name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n lastName?: string;\n /**\n * The customer's profile image, such as a Gravatar avatar. Use this to personalize the extension UI for the logged-in buyer.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n image: ImageDetails;\n /**\n * Whether the customer has opted in to receiving marketing communications from the merchant, such as email campaigns and promotional offers.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * > Caution: This field is deprecated and will be removed in a future version. Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead.\n *\n * @deprecated Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead.\n */\n acceptsMarketing: boolean;\n /**\n * Whether the customer has opted in to email marketing.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n acceptsEmailMarketing: boolean;\n /**\n * Whether the customer has opted in to SMS marketing.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n acceptsSmsMarketing: boolean;\n /**\n * The store credit accounts owned by this customer that can be used as payment during checkout. Each account has a balance representing available store credit.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @private\n */\n storeCreditAccounts: StoreCreditAccount[];\n /**\n * The number of orders the customer has previously placed with this shop.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n ordersCount: number;\n}" + "value": "export interface Customer {\n /**\n * A globally-unique identifier for the customer in the format `gid://shopify/Customer/`.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @example 'gid://shopify/Customer/123'\n */\n id: string;\n /**\n * The email address associated with the customer's account. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n email?: string;\n /**\n * The phone number associated with the customer's account. The value is `undefined` if no phone number is on file or the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n phone?: string;\n /**\n * The customer's full name, typically a combination of first and last name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n fullName?: string;\n /**\n * The customer's first name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n firstName?: string;\n /**\n * The customer's last name. The value is `undefined` if the app doesn't have the required access level.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 2 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n lastName?: string;\n /**\n * The customer's profile image, such as a Gravatar avatar. Use this to personalize the extension UI for the logged-in buyer.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n image: ImageDetails;\n /**\n * Whether the customer has opted in to receiving marketing communications from the merchant, such as email campaigns and promotional offers.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * > Caution: This field is deprecated and will be removed in a future version. Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead.\n *\n * @deprecated Use `acceptsEmailMarketing` or `acceptsSmsMarketing` instead.\n */\n acceptsMarketing: boolean;\n /**\n * Whether the customer has opted in to email marketing.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n acceptsEmailMarketing: boolean;\n /**\n * Whether the customer has opted in to SMS marketing.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n acceptsSmsMarketing: boolean;\n /**\n * The store credit accounts owned by this customer that can be used as payment during checkout. Each account has a balance representing available store credit.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * @private\n */\n storeCreditAccounts: StoreCreditAccount[];\n /**\n * The number of orders the customer has previously placed with this shop.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n ordersCount: number;\n}" } }, "StoreCreditAccount": { @@ -5134,11 +5126,11 @@ "syntaxKind": "MethodSignature", "name": "perform", "value": "(result: InterceptorResult) => void | Promise", - "description": "This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.\n\nRuns after all intercept results are collected. Use it for local state updates such as setting an error flag. By the time it runs, the navigation decision is final, so blocking logic belongs in the intercept handler itself, not here.", + "description": "This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.", "isOptional": true } ], - "value": "interface InterceptorRequestAllow {\n /**\n * Indicates that the interceptor allows the buyer's journey to continue.\n */\n behavior: 'allow';\n\n /**\n * This callback is called when all interceptors finish. We recommend\n * setting errors or reasons for blocking at this stage, so that all the errors in\n * the UI show up at once.\n *\n * Runs after all intercept results are collected. Use it for local state\n * updates such as setting an error flag. By the time it runs, the navigation\n * decision is final, so blocking logic belongs in the intercept handler\n * itself, not here.\n * @param result InterceptorResult with behavior as either 'allow' or 'block'\n */\n perform?(result: InterceptorResult): void | Promise;\n}" + "value": "interface InterceptorRequestAllow {\n /**\n * Indicates that the interceptor allows the buyer's journey to continue.\n */\n behavior: 'allow';\n\n /**\n * This callback is called when all interceptors finish. We recommend\n * setting errors or reasons for blocking at this stage, so that all the errors in\n * the UI show up at once.\n * @param result InterceptorResult with behavior as either 'allow' or 'block'\n */\n perform?(result: InterceptorResult): void | Promise;\n}" } }, "InterceptorResult": { @@ -5210,7 +5202,7 @@ "syntaxKind": "MethodSignature", "name": "perform", "value": "(result: InterceptorResult) => void | Promise", - "description": "This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.\n\nRuns after all intercept results are collected. Use it for local state updates such as setting an error flag. By the time it runs, the navigation decision is final, so blocking logic belongs in the intercept handler itself, not here.", + "description": "This callback is called when all interceptors finish. We recommend setting errors or reasons for blocking at this stage, so that all the errors in the UI show up at once.", "isOptional": true }, { @@ -5221,7 +5213,7 @@ "description": "The reason for blocking the interceptor request. This value isn't presented to the buyer, so it doesn't need to be localized. The value is used only for Shopify's own internal debugging and metrics." } ], - "value": "interface InterceptorRequestBlock {\n /**\n * Indicates that the interceptor blocks the buyer's journey from continuing.\n */\n behavior: 'block';\n\n /**\n * The reason for blocking the interceptor request. This value isn't presented to\n * the buyer, so it doesn't need to be localized. The value is used only for Shopify's\n * own internal debugging and metrics.\n */\n reason: string;\n\n /**\n * Used to pass errors to the checkout UI, outside your extension's UI boundaries.\n */\n errors?: ValidationError[];\n\n /**\n * This callback is called when all interceptors finish. We recommend\n * setting errors or reasons for blocking at this stage, so that all the errors in\n * the UI show up at once.\n *\n * Runs after all intercept results are collected. Use it for local state\n * updates such as setting an error flag. By the time it runs, the navigation\n * decision is final, so blocking logic belongs in the intercept handler\n * itself, not here.\n * @param result InterceptorResult with behavior as either 'allow' or 'block'\n */\n perform?(result: InterceptorResult): void | Promise;\n}" + "value": "interface InterceptorRequestBlock {\n /**\n * Indicates that the interceptor blocks the buyer's journey from continuing.\n */\n behavior: 'block';\n\n /**\n * The reason for blocking the interceptor request. This value isn't presented to\n * the buyer, so it doesn't need to be localized. The value is used only for Shopify's\n * own internal debugging and metrics.\n */\n reason: string;\n\n /**\n * Used to pass errors to the checkout UI, outside your extension's UI boundaries.\n */\n errors?: ValidationError[];\n\n /**\n * This callback is called when all interceptors finish. We recommend\n * setting errors or reasons for blocking at this stage, so that all the errors in\n * the UI show up at once.\n * @param result InterceptorResult with behavior as either 'allow' or 'block'\n */\n perform?(result: InterceptorResult): void | Promise;\n}" } }, "BuyerJourneyStep": { @@ -5425,17 +5417,17 @@ "syntaxKind": "PropertySignature", "name": "totalShippingAmount", "value": "SubscribableSignalLike", - "description": "The total shipping cost after shipping discounts have been applied. The value is `undefined` if shipping hasn't been calculated yet, such as when the buyer is still on the information step.\n\n`undefined` until the buyer selects a shipping method (typically after the information step)." + "description": "The total shipping cost after shipping discounts have been applied. The value is `undefined` if shipping hasn't been calculated yet, such as when the buyer is still on the information step." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "totalTaxAmount", "value": "SubscribableSignalLike", - "description": "The total tax the buyer can expect to pay, or the total tax already included in product and shipping prices (for tax-inclusive regions). The value is `undefined` if taxes haven't been calculated yet.\n\n`undefined` when taxes haven't been calculated or aren't available for the buyer's region." + "description": "The total tax the buyer can expect to pay, or the total tax already included in product and shipping prices (for tax-inclusive regions). The value is `undefined` if taxes haven't been calculated yet." } ], - "value": "export interface CartCost {\n /**\n * The sum of all line item prices at the current step of checkout, before shipping and taxes are applied. Use this value to display the base cost of the items the buyer purchased.\n */\n subtotalAmount: SubscribableSignalLike;\n\n /**\n * The total shipping cost after shipping discounts have been applied. The value is `undefined` if shipping hasn't been calculated yet, such as when the buyer is still on the information step.\n *\n * `undefined` until the buyer selects a shipping method (typically after the\n * information step).\n */\n totalShippingAmount: SubscribableSignalLike;\n\n /**\n * The total tax the buyer can expect to pay, or the total tax already included in product and shipping prices (for tax-inclusive regions). The value is `undefined` if taxes haven't been calculated yet.\n *\n * `undefined` when taxes haven't been calculated or aren't available for the\n * buyer's region.\n */\n totalTaxAmount: SubscribableSignalLike;\n\n /**\n * The minimum total at the current step of checkout. Costs not yet calculated, such as shipping on the information step, aren't included. Gift cards and store credits are excluded from this total.\n */\n totalAmount: SubscribableSignalLike;\n}" + "value": "export interface CartCost {\n /**\n * The sum of all line item prices at the current step of checkout, before shipping and taxes are applied. Use this value to display the base cost of the items the buyer purchased.\n */\n subtotalAmount: SubscribableSignalLike;\n\n /**\n * The total shipping cost after shipping discounts have been applied. The value is `undefined` if shipping hasn't been calculated yet, such as when the buyer is still on the information step.\n */\n totalShippingAmount: SubscribableSignalLike;\n\n /**\n * The total tax the buyer can expect to pay, or the total tax already included in product and shipping prices (for tax-inclusive regions). The value is `undefined` if taxes haven't been calculated yet.\n */\n totalTaxAmount: SubscribableSignalLike;\n\n /**\n * The minimum total at the current step of checkout. Costs not yet calculated, such as shipping on the information step, aren't included. Gift cards and store credits are excluded from this total.\n */\n totalAmount: SubscribableSignalLike;\n}" } }, "CustomerPrivacy": { @@ -5528,31 +5520,31 @@ "syntaxKind": "PropertySignature", "name": "analytics", "value": "boolean", - "description": "Whether analytics data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Analytics data includes how the shop was used and what interactions occurred.\n\nWhether analytics data can be collected right now. Combines the buyer's consent, the merchant's privacy configuration, and the buyer's region into a single boolean. Check this flag, not `visitorConsent.analytics`, before calling `shopify.analytics.publish()`." + "description": "Whether analytics data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Analytics data includes how the shop was used and what interactions occurred." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "marketing", "value": "boolean", - "description": "Whether marketing data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Marketing data includes attribution and targeted advertising preferences.\n\nWhether marketing data can be collected right now. Combines the buyer's consent, the merchant's privacy configuration, and the buyer's region into a single boolean. Check this flag, not `visitorConsent.marketing`, before performing marketing-related data collection." + "description": "Whether marketing data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Marketing data includes attribution and targeted advertising preferences." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "preferences", "value": "boolean", - "description": "Whether preference data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Preference data includes language, currency, and sizing choices.\n\nWhether preference data can be collected right now. Combines the buyer's consent, the merchant's privacy configuration, and the buyer's region into a single boolean. Check this flag, not `visitorConsent.preferences`, before storing or reading buyer preference data." + "description": "Whether preference data can be collected based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. Preference data includes language, currency, and sizing choices." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "syntaxKind": "PropertySignature", "name": "saleOfData", "value": "boolean", - "description": "Whether data can be shared with third parties based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. This typically applies to behavioral advertising data.\n\nWhether buyer data can be shared with or sold to third parties right now. Combines the buyer's consent, the merchant's privacy configuration, and the buyer's region into a single boolean. Check this flag, not `visitorConsent.saleOfData`, before sharing or selling buyer data with third parties." + "description": "Whether data can be shared with third parties based on the visitor's consent, the merchant's privacy configuration, and the visitor's region. This typically applies to behavioral advertising data." } ], - "value": "export interface AllowedProcessing {\n /**\n * Whether analytics data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Analytics\n * data includes how the shop was used and what interactions occurred.\n *\n * Whether analytics data can be collected right now. Combines the buyer's\n * consent, the merchant's privacy configuration, and the buyer's region into\n * a single boolean. Check this flag, not `visitorConsent.analytics`, before\n * calling `shopify.analytics.publish()`.\n */\n analytics: boolean;\n /**\n * Whether marketing data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Marketing\n * data includes attribution and targeted advertising preferences.\n *\n * Whether marketing data can be collected right now. Combines the buyer's\n * consent, the merchant's privacy configuration, and the buyer's region into\n * a single boolean. Check this flag, not `visitorConsent.marketing`, before\n * performing marketing-related data collection.\n */\n marketing: boolean;\n /**\n * Whether preference data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Preference\n * data includes language, currency, and sizing choices.\n *\n * Whether preference data can be collected right now. Combines the buyer's\n * consent, the merchant's privacy configuration, and the buyer's region into\n * a single boolean. Check this flag, not `visitorConsent.preferences`,\n * before storing or reading buyer preference data.\n */\n preferences: boolean;\n /**\n * Whether data can be shared with third parties based on the visitor's\n * consent, the merchant's privacy configuration, and the visitor's region.\n * This typically applies to behavioral advertising data.\n *\n * Whether buyer data can be shared with or sold to third parties right now.\n * Combines the buyer's consent, the merchant's privacy configuration, and\n * the buyer's region into a single boolean. Check this flag, not\n * `visitorConsent.saleOfData`, before sharing or selling buyer data with\n * third parties.\n */\n saleOfData: boolean;\n}" + "value": "export interface AllowedProcessing {\n /**\n * Whether analytics data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Analytics\n * data includes how the shop was used and what interactions occurred.\n */\n analytics: boolean;\n /**\n * Whether marketing data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Marketing\n * data includes attribution and targeted advertising preferences.\n */\n marketing: boolean;\n /**\n * Whether preference data can be collected based on the visitor's consent,\n * the merchant's privacy configuration, and the visitor's region. Preference\n * data includes language, currency, and sizing choices.\n */\n preferences: boolean;\n /**\n * Whether data can be shared with third parties based on the visitor's\n * consent, the merchant's privacy configuration, and the visitor's region.\n * This typically applies to behavioral advertising data.\n */\n saleOfData: boolean;\n}" } }, "TrackingConsentMetafield": { @@ -5679,7 +5671,7 @@ "syntaxKind": "PropertySignature", "name": "capabilities", "value": "SubscribableSignalLike", - "description": "The allowed capabilities of the extension, defined in your [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file." + "description": "The allowed capabilities of the extension, defined in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n\n* [`api_access`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#api-access): the extension can access the Storefront API.\n\n* [`network_access`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access): the extension can make external network calls.\n\n* [`block_progress`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#block-progress): the extension can block a customer's progress and the merchant has allowed this blocking behavior.\n\n* [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent): the extension can collect customer consent for SMS marketing.\n\n* [`collect_buyer_consent.customer_privacy`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent): the extension can register customer consent decisions that are honored on Shopify-managed services.\n\n* [`iframe.sources`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#iframe): the extension can embed an external URL in an iframe." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -5727,7 +5719,7 @@ "syntaxKind": "PropertySignature", "name": "version", "value": "string", - "description": "The published version of the running extension target.\n\nFor unpublished extensions, the value is `undefined`.\n\nDon't use this property as a stable identifier in development environments. It becomes available only after the extension is published.", + "description": "The published version of the running extension target.\n\nFor unpublished extensions, the value is `undefined`.", "isOptional": true, "examples": [ { @@ -5743,7 +5735,7 @@ ] } ], - "value": "export interface Extension {\n /**\n * The API version that was set in the extension config file.\n *\n * @example '2024-10', '2025-01', '2025-04', '2025-07', '2025-10'\n */\n apiVersion: ApiVersion;\n\n /**\n * The allowed capabilities of the extension, defined in your\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n */\n capabilities: SubscribableSignalLike;\n\n /**\n * Information about the editor where the extension is being rendered.\n *\n * If the value is undefined, then the extension isn't running in an editor.\n */\n editor?: Editor;\n\n /**\n * A Boolean to show whether your extension is currently rendered to the screen.\n *\n * Shopify might render your extension before it's visible in the UI,\n * typically to pre-render extensions that appear on a later step of the\n * checkout.\n *\n * Your extension might also continue to run after the customer has navigated away\n * from where it was rendered. The extension continues running so that\n * your extension is immediately available to render if the customer navigates back.\n */\n rendered: SubscribableSignalLike;\n\n /**\n * The URL to the script that started the extension target.\n */\n scriptUrl: string;\n\n /**\n * The identifier that specifies where in Shopify's UI your code is being\n * injected. This is one of the targets you've included in your\n * extension's configuration file.\n *\n * @example 'purchase.checkout.block.render'\n * @see /docs/api/checkout-ui-extensions/{API_VERSION}/extension-targets-overview\n * @see /docs/apps/app-extensions/configuration#targets\n */\n target: Target;\n\n /**\n * The published version of the running extension target.\n *\n * For unpublished extensions, the value is `undefined`.\n *\n * Don't use this property as a stable identifier in development environments.\n * It becomes available only after the extension is published.\n *\n * @example 3.0.10\n */\n version?: string;\n}" + "value": "export interface Extension {\n /**\n * The API version that was set in the extension config file.\n *\n * @example '2024-10', '2025-01', '2025-04', '2025-07', '2025-10'\n */\n apiVersion: ApiVersion;\n\n /**\n * The allowed capabilities of the extension, defined\n * in your [shopify.extension.toml](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration) file.\n *\n * * [`api_access`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#api-access): the extension can access the Storefront API.\n *\n * * [`network_access`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#network-access): the extension can make external network calls.\n *\n * * [`block_progress`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#block-progress): the extension can block a customer's progress and the merchant has allowed this blocking behavior.\n *\n * * [`collect_buyer_consent.sms_marketing`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent): the extension can collect customer consent for SMS marketing.\n *\n * * [`collect_buyer_consent.customer_privacy`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent): the extension can register customer consent decisions that are honored on Shopify-managed services.\n *\n * * [`iframe.sources`](/docs/api/checkout-ui-extensions/{API_VERSION}/configuration#iframe): the extension can embed an external URL in an iframe.\n */\n capabilities: SubscribableSignalLike;\n\n /**\n * Information about the editor where the extension is being rendered.\n *\n * If the value is undefined, then the extension isn't running in an editor.\n */\n editor?: Editor;\n\n /**\n * A Boolean to show whether your extension is currently rendered to the screen.\n *\n * Shopify might render your extension before it's visible in the UI,\n * typically to pre-render extensions that appear on a later step of the\n * checkout.\n *\n * Your extension might also continue to run after the customer has navigated away\n * from where it was rendered. The extension continues running so that\n * your extension is immediately available to render if the customer navigates back.\n */\n rendered: SubscribableSignalLike;\n\n /**\n * The URL to the script that started the extension target.\n */\n scriptUrl: string;\n\n /**\n * The identifier that specifies where in Shopify's UI your code is being\n * injected. This is one of the targets you've included in your\n * extension's configuration file.\n *\n * @example 'purchase.checkout.block.render'\n * @see /docs/api/checkout-ui-extensions/{API_VERSION}/extension-targets-overview\n * @see /docs/apps/app-extensions/configuration#targets\n */\n target: Target;\n\n /**\n * The published version of the running extension target.\n *\n * For unpublished extensions, the value is `undefined`.\n *\n * @example 3.0.10\n */\n version?: string;\n}" } }, "ApiVersion": { @@ -6021,7 +6013,7 @@ "syntaxKind": "PropertySignature", "name": "country", "value": "SubscribableSignalLike", - "description": "The country context of the checkout, carried over from the cart. It updates when the buyer changes their shipping address country. Use this value to display region-specific content such as local support information or regional policies. The value is `undefined` if the buyer's country is unknown.\n\nDerived from the buyer's shipping address. Returns `undefined` until the buyer enters a shipping address." + "description": "The country context of the checkout, carried over from the cart. It updates when the buyer changes their shipping address country. Use this value to display region-specific content such as local support information or regional policies. The value is `undefined` if the buyer's country is unknown." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -6049,8 +6041,8 @@ "syntaxKind": "PropertySignature", "name": "market", "value": "SubscribableSignalLike", - "description": "The [market](/docs/apps/build/markets) context of the checkout, carried over from the cart context. Markets group countries and regions with shared pricing, languages, and domains. The market context updates when the buyer changes the country of their shipping address. The value is `undefined` if the market is unknown.", - "deprecationMessage": "Merchants now manage which extensions load for each\nmarket, so extensions no longer need to check this value." + "description": "The [market](/docs/apps/build/markets) context of the checkout, carried over from the cart context. Markets group countries and regions with shared pricing, languages, and domains. It updates when the buyer changes the country of their shipping address. The value is `undefined` if the market is unknown.\n\n> Caution: Deprecated as of version `2025-04`. Merchants now manage which extensions load for each market, so extensions no longer need to check this value.", + "deprecationMessage": "Deprecated as of version `2025-04`" }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -6060,7 +6052,7 @@ "description": "The buyer's time zone, based on their browser or account settings. Use this value to format dates and times relative to the buyer's local time." } ], - "value": "export interface Localization {\n /**\n * The currency that the buyer sees for money amounts in the checkout. Use this value to format prices and totals in the buyer's expected currency.\n */\n currency: SubscribableSignalLike;\n\n /**\n * The buyer's time zone, based on their browser or account settings. Use this value to format dates and times relative to the buyer's local time.\n */\n timezone: SubscribableSignalLike;\n\n /**\n * The language the buyer sees in the checkout. This reflects the language selected by the buyer or determined by their browser settings, and might differ from the languages your extension supports.\n */\n language: SubscribableSignalLike;\n\n /**\n * The best available language match for your extension based on the buyer's language. If the buyer's language is `'fr-CA'` but your extension supports only `'fr'`, this returns `'fr'`. If your extension doesn't support any variant of the buyer's language, this falls back to your extension's default locale (the `.default.json` translation file). Use this value to load the correct translation file for your extension.\n */\n extensionLanguage: SubscribableSignalLike;\n\n /**\n * The country context of the checkout, carried over from the cart. It updates when the buyer changes their shipping address country. Use this value to display region-specific content such as local support information or regional policies. The value is `undefined` if the buyer's country is unknown.\n *\n * Derived from the buyer's shipping address. Returns `undefined` until the\n * buyer enters a shipping address.\n */\n country: SubscribableSignalLike;\n\n /**\n * The [market](/docs/apps/build/markets) context of the checkout,\n * carried over from the cart context. Markets group countries and\n * regions with shared pricing, languages, and domains. The market\n * context updates when the buyer changes the country of their\n * shipping address. The value is `undefined` if the market is unknown.\n *\n * @deprecated Merchants now manage which extensions load for each\n * market, so extensions no longer need to check this value.\n */\n market: SubscribableSignalLike;\n}" + "value": "export interface Localization {\n /**\n * The currency that the buyer sees for money amounts in the checkout. Use this value to format prices and totals in the buyer's expected currency.\n */\n currency: SubscribableSignalLike;\n\n /**\n * The buyer's time zone, based on their browser or account settings. Use this value to format dates and times relative to the buyer's local time.\n */\n timezone: SubscribableSignalLike;\n\n /**\n * The language the buyer sees in the checkout. This reflects the language selected by the buyer or determined by their browser settings, and might differ from the languages your extension supports.\n */\n language: SubscribableSignalLike;\n\n /**\n * The best available language match for your extension based on the buyer's language. If the buyer's language is `'fr-CA'` but your extension supports only `'fr'`, this returns `'fr'`. If your extension doesn't support any variant of the buyer's language, this falls back to your extension's default locale (the `.default.json` translation file). Use this value to load the correct translation file for your extension.\n */\n extensionLanguage: SubscribableSignalLike;\n\n /**\n * The country context of the checkout, carried over from the cart. It updates when the buyer changes their shipping address country. Use this value to display region-specific content such as local support information or regional policies. The value is `undefined` if the buyer's country is unknown.\n */\n country: SubscribableSignalLike;\n\n /**\n * The [market](/docs/apps/build/markets) context of the checkout, carried over from the cart context. Markets group countries and regions with shared pricing, languages, and domains. It updates when the buyer changes the country of their shipping address. The value is `undefined` if the market is unknown.\n *\n * > Caution: Deprecated as of version `2025-04`. Merchants now manage which extensions load for each market, so extensions no longer need to check this value.\n *\n * @deprecated Deprecated as of version `2025-04`\n */\n market: SubscribableSignalLike;\n}" } }, "Country": { @@ -6288,7 +6280,7 @@ "src/surfaces/checkout/api/standard/standard.ts": { "filePath": "src/surfaces/checkout/api/standard/standard.ts", "name": "SessionToken", - "description": "Authenticates requests between your extension and your app backend. Use session tokens to verify the identity of the buyer and the shop context when making server-side API calls. The token is a signed JWT that contains claims such as the customer ID, shop domain, and expiration.\n\nThe `sub` claim in the decoded token is present only when the buyer is logged in and the app has permission to read customer accounts. Absent for anonymous buyers.", + "description": "Authenticates requests between your extension and your app backend. Use session tokens to verify the identity of the buyer and the shop context when making server-side API calls. The token is a signed JWT that contains claims such as the customer ID, shop domain, and expiration.", "members": [ { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -6381,7 +6373,7 @@ "syntaxKind": "MethodSignature", "name": "read", "value": "(key: string) => Promise", - "description": "Read and return a stored value by key.\n\nThe stored data is deserialized from JSON and returned as its original type.\n\nReturns the stored value for the given key, or `null` when no value exists. Doesn't throw on a missing key." + "description": "Read and return a stored value by key.\n\nThe stored data is deserialized from JSON and returned as its original type.\n\nReturns `null` if no stored data exists." }, { "filePath": "src/surfaces/checkout/api/standard/standard.ts", @@ -6391,7 +6383,7 @@ "description": "Write stored data for this key.\n\nThe data must be serializable to JSON." } ], - "value": "export interface Storage {\n /**\n * Read and return a stored value by key.\n *\n * The stored data is deserialized from JSON and returned as\n * its original type.\n *\n * Returns the stored value for the given key, or `null` when no value\n * exists. Doesn't throw on a missing key.\n */\n read(key: string): Promise;\n\n /**\n * Write stored data for this key.\n *\n * The data must be serializable to JSON.\n */\n write(key: string, data: any): Promise;\n\n /**\n * Deletes a previously stored value by key.\n */\n delete(key: string): Promise;\n}" + "value": "export interface Storage {\n /**\n * Read and return a stored value by key.\n *\n * The stored data is deserialized from JSON and returned as\n * its original type.\n *\n * Returns `null` if no stored data exists.\n */\n read(key: string): Promise;\n\n /**\n * Write stored data for this key.\n *\n * The data must be serializable to JSON.\n */\n write(key: string, data: any): Promise;\n\n /**\n * Deletes a previously stored value by key.\n */\n delete(key: string): Promise;\n}" } }, "Version": { @@ -6551,7 +6543,7 @@ "syntaxKind": "PropertySignature", "name": "localization", "value": "Localization", - "description": "The details about the location, language, and currency of the customer. For utilities to easily format and translate content based on these details, you can use the [`i18n`](/docs/api/checkout-ui-extensions/apis/localization#properties-propertydetail-i18n) object instead." + "description": "The details about the location, language, and currency of the customer. For utilities to easily format and translate content based on these details, you can use the [`i18n`](/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-i18n) object instead." }, { "filePath": "src/surfaces/checkout/api/address-autocomplete/standard.ts", @@ -6616,7 +6608,7 @@ ] } ], - "value": "export interface AddressAutocompleteStandardApi<\n Target extends\n | 'purchase.address-autocomplete.suggest'\n | 'purchase.address-autocomplete.format-suggestion',\n> {\n /**\n * The metafields requested in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration)\n * file. These metafields are updated when there's a change in the merchandise items\n * being purchased by the customer.\n *\n * App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * > Tip:\n * > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*\n */\n appMetafields: AppMetafieldEntry[];\n\n /**\n * The methods for interacting with [Web Pixels](/docs/apps/marketing), such as emitting an event.\n */\n analytics: Analytics;\n\n /**\n * The custom attributes left by the customer to the merchant, either in their cart or during checkout.\n */\n attributes: Attribute[] | undefined;\n\n /**\n * The proposed customer billing address. The address updates when the field is\n * committed (on change) rather than every keystroke.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n billingAddress?: MailingAddress | undefined;\n\n /**\n * A stable ID that represents the current checkout.\n *\n * This matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data)\n * and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object).\n */\n checkoutToken: CheckoutToken | undefined;\n\n /**\n * The meta information about the extension.\n */\n extension: Extension;\n\n /**\n * Utilities for translating content and formatting values according to the current\n * [`localization`](/docs/api/checkout-ui-extensions/apis/localization)\n * Type 'RunnableExtensionInstance' is not assignable to type 'ExtensionInstance'.\n *\n * Refer to [`localization` examples](/docs/api/checkout-ui-extensions/apis/localization#examples)\n * for more information.\n */\n i18n: I18n;\n\n /**\n * The details about the location, language, and currency of the customer. For utilities to easily\n * format and translate content based on these details, you can use the\n * [`i18n`](/docs/api/checkout-ui-extensions/apis/localization#properties-propertydetail-i18n)\n * object instead.\n */\n localization: Localization;\n\n /**\n * The method used to query the Storefront GraphQL API with a prefetched token.\n *\n * Refer to [Storefront API access examples](/docs/api/checkout-ui-extensions/apis/storefront-api) for more information.\n */\n query: >(\n query: string,\n options?: {variables?: Variables; version?: StorefrontApiVersion},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n\n /**\n * The session token providing a set of claims as a signed JSON Web Token (JWT).\n *\n * The token has a TTL of 5 minutes.\n *\n * If the previous token expires, this value will reflect a new session token with a new signature and expiry.\n *\n * Learn more about [session tokens](/docs/apps/build/authentication-authorization/session-tokens).\n */\n sessionToken: SessionToken;\n\n /**\n * The settings matching the settings definition written in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration) file.\n *\n * Refer to [settings examples](/docs/api/checkout-ui-extensions/apis/settings#examples) for more information.\n *\n * > Note: The settings are empty when an extension is being installed in the [checkout editor](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-editor).\n\n */\n settings: ExtensionSettings;\n\n /**\n * The proposed customer shipping address. During the information step,\n * the address updates when the field is committed (on change) rather than every keystroke.\n *\n * > Note: An address value is only present if delivery is required. Otherwise, the subscribable value is undefined.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n shippingAddress?: MailingAddress | undefined;\n\n /** The shop where the checkout is taking place. */\n shop: Shop;\n\n /**\n * The key-value storage for the extension.\n *\n * It uses `localStorage` and should persist across the customer's current checkout session.\n *\n * > Caution: Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout.\n *\n * Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier,\n * each activated extension target had its own storage.\n */\n storage: Storage;\n\n /**\n * The runner version being used for the extension.\n *\n * @example 'unstable'\n */\n version: Version;\n}" + "value": "export interface AddressAutocompleteStandardApi<\n Target extends\n | 'purchase.address-autocomplete.suggest'\n | 'purchase.address-autocomplete.format-suggestion',\n> {\n /**\n * The metafields requested in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration)\n * file. These metafields are updated when there's a change in the merchandise items\n * being purchased by the customer.\n *\n * App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported. See [app owned metafields](/docs/apps/build/custom-data/ownership#reserved-prefixes) for more information.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n *\n * > Tip:\n * > Cart metafields are only available on carts created via the Storefront API version `2023-04` or later.*\n */\n appMetafields: AppMetafieldEntry[];\n\n /**\n * The methods for interacting with [Web Pixels](/docs/apps/marketing), such as emitting an event.\n */\n analytics: Analytics;\n\n /**\n * The custom attributes left by the customer to the merchant, either in their cart or during checkout.\n */\n attributes: Attribute[] | undefined;\n\n /**\n * The proposed customer billing address. The address updates when the field is\n * committed (on change) rather than every keystroke.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n billingAddress?: MailingAddress | undefined;\n\n /**\n * A stable ID that represents the current checkout.\n *\n * This matches the `data.checkout.token` field in a [checkout-related WebPixel event](/docs/api/web-pixels-api/standard-events/checkout_started#properties-propertydetail-data)\n * and the `checkout_token` field in the [REST Admin API `Order` resource](/docs/api/admin-rest/unstable/resources/order#resource-object).\n */\n checkoutToken: CheckoutToken | undefined;\n\n /**\n * The meta information about the extension.\n */\n extension: Extension;\n\n /**\n * Utilities for translating content and formatting values according to the current\n * [`localization`](/docs/api/checkout-ui-extensions/apis/localization)\n * Type 'RunnableExtensionInstance' is not assignable to type 'ExtensionInstance'.\n *\n * Refer to [`localization` examples](/docs/api/checkout-ui-extensions/apis/localization#examples)\n * for more information.\n */\n i18n: I18n;\n\n /**\n * The details about the location, language, and currency of the customer. For utilities to easily\n * format and translate content based on these details, you can use the\n * [`i18n`](/docs/api/checkout-ui-extensions/apis/localization#standardapi-propertydetail-i18n)\n * object instead.\n */\n localization: Localization;\n\n /**\n * The method used to query the Storefront GraphQL API with a prefetched token.\n *\n * Refer to [Storefront API access examples](/docs/api/checkout-ui-extensions/apis/storefront-api) for more information.\n */\n query: >(\n query: string,\n options?: {variables?: Variables; version?: StorefrontApiVersion},\n ) => Promise<{data?: Data; errors?: GraphQLError[]}>;\n\n /**\n * The session token providing a set of claims as a signed JSON Web Token (JWT).\n *\n * The token has a TTL of 5 minutes.\n *\n * If the previous token expires, this value will reflect a new session token with a new signature and expiry.\n *\n * Learn more about [session tokens](/docs/apps/build/authentication-authorization/session-tokens).\n */\n sessionToken: SessionToken;\n\n /**\n * The settings matching the settings definition written in the\n * [`shopify.extension.toml`](/docs/api/checkout-ui-extensions/configuration) file.\n *\n * Refer to [settings examples](/docs/api/checkout-ui-extensions/apis/settings#examples) for more information.\n *\n * > Note: The settings are empty when an extension is being installed in the [checkout editor](https://help.shopify.com/en/manual/checkout-settings/checkout-extensibility/checkout-editor).\n\n */\n settings: ExtensionSettings;\n\n /**\n * The proposed customer shipping address. During the information step,\n * the address updates when the field is committed (on change) rather than every keystroke.\n *\n * > Note: An address value is only present if delivery is required. Otherwise, the subscribable value is undefined.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data).\n */\n shippingAddress?: MailingAddress | undefined;\n\n /** The shop where the checkout is taking place. */\n shop: Shop;\n\n /**\n * The key-value storage for the extension.\n *\n * It uses `localStorage` and should persist across the customer's current checkout session.\n *\n * > Caution: Data persistence isn't guaranteed and storage is reset when the customer starts a new checkout.\n *\n * Data is shared across all activated extension targets of this extension. In versions 2023-07 and earlier,\n * each activated extension target had its own storage.\n */\n storage: Storage;\n\n /**\n * The runner version being used for the extension.\n *\n * @example 'unstable'\n */\n version: Version;\n}" } }, "AddressAutocompleteFormatSuggestionApi": { @@ -7003,10 +6995,10 @@ "syntaxKind": "PropertySignature", "name": "suggestions", "value": "AddressAutocompleteSuggestion[]", - "description": "An array of address autocomplete suggestions to show to the buyer. Checkout displays up to five address suggestions. Return no more than five. Additional suggestions are ignored." + "description": "An array of address autocomplete suggestions to show to the buyer.\n\n> Note: Only the first five suggestions will be displayed to the buyer." } ], - "value": "export interface AddressAutocompleteSuggestOutput {\n /**\n * An array of address autocomplete suggestions to show to the buyer.\n * Checkout displays up to five address suggestions. Return no more\n * than five. Additional suggestions are ignored.\n */\n suggestions: AddressAutocompleteSuggestion[];\n}" + "value": "export interface AddressAutocompleteSuggestOutput {\n /**\n * An array of address autocomplete suggestions to show to the buyer.\n *\n * > Note: Only the first five suggestions will be displayed to the buyer.\n */\n suggestions: AddressAutocompleteSuggestion[];\n}" } }, "ExtensionTargets": { @@ -8624,11 +8616,11 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "string", - "description": "The resource identifier for edit actions (such as `gid://shopify/SubscriptionContract/123`).", + "description": "The resource identifier for edit actions (e.g. `gid://shopify/SubscriptionContract/123`).", "isOptional": true } ], - "value": "export interface IntentQueryOptions {\n /**\n * The resource identifier for edit actions (such as `gid://shopify/SubscriptionContract/123`).\n */\n value?: string;\n /**\n * Optional input payload passed to the intent. Used to seed forms or supply parameters. The accepted shape is intent-specific. For example, replacing a payment method on a subscription contract requires `{ field: 'paymentMethod' }`.\n */\n data?: Record;\n}" + "value": "export interface IntentQueryOptions {\n /**\n * The resource identifier for edit actions (e.g. `gid://shopify/SubscriptionContract/123`).\n */\n value?: string;\n /**\n * Optional input payload passed to the intent. Used to seed forms or supply parameters. The accepted shape is intent-specific. For example, replacing a payment method on a subscription contract requires `{ field: 'paymentMethod' }`.\n */\n data?: Record;\n}" } }, "IntentAction": { @@ -8668,18 +8660,18 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "string", - "description": "The resource type (such as `shopify/SubscriptionContract`)." + "description": "The resource type (e.g. `shopify/SubscriptionContract`)." }, { "filePath": "src/surfaces/customer-account/api/shared.ts", "syntaxKind": "PropertySignature", "name": "value", "value": "string", - "description": "The resource identifier for edit actions (such as `gid://shopify/SubscriptionContract/123`).", + "description": "The resource identifier for edit actions (e.g. `gid://shopify/SubscriptionContract/123`).", "isOptional": true } ], - "value": "export interface IntentQuery extends IntentQueryOptions {\n /**\n * Verb describing the operation to perform on the target resource.\n *\n * Common values include `create` and `open`. The set of\n * allowed verbs is intent-specific; unknown verbs will fail validation.\n */\n action: IntentAction;\n /**\n * The resource type (such as `shopify/SubscriptionContract`).\n */\n type: string;\n}" + "value": "export interface IntentQuery extends IntentQueryOptions {\n /**\n * Verb describing the operation to perform on the target resource.\n *\n * Common values include `create` and `open`. The set of\n * allowed verbs is intent-specific; unknown verbs will fail validation.\n */\n action: IntentAction;\n /**\n * The resource type (e.g. `shopify/SubscriptionContract`).\n */\n type: string;\n}" } }, "SuccessIntentResponse": { @@ -8832,7 +8824,7 @@ "src/surfaces/customer-account/api/order-status/order-status.ts": { "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "name": "OrderStatusLocalization", - "description": "Provides raw localization data only. The `i18n` translation and formatting helpers from the Localization API aren't available on order status targets.", + "description": "", "isPublicDocs": true, "members": [ { @@ -8924,14 +8916,14 @@ "syntaxKind": "PropertySignature", "name": "authenticationState", "value": "SubscribableSignalLike", - "description": "The buyer's current authentication level on the **Order status** page. Use this to determine whether to display sensitive information or prompt the buyer to log in.\n\nRead-only. The authentication level can't be changed programmatically." + "description": "The buyer's current authentication level on the **Order status** page. Use this to determine whether to display sensitive information or prompt the buyer to log in." }, { "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "billingAddress", "value": "SubscribableSignalLike", - "description": "The billing address associated with the buyer's payment method for the order. The value is `undefined` if the order doesn't have a billing address on file.\n\nReflects the state at the time the order was placed. Doesn't update if the customer changes their account address afterward.", + "description": "The billing address associated with the buyer's payment method for the order. The value is `undefined` if the order doesn't have a billing address on file.", "isOptional": true }, { @@ -8939,7 +8931,7 @@ "syntaxKind": "PropertySignature", "name": "buyerIdentity", "value": "OrderStatusBuyerIdentity", - "description": "The buyer who placed the order, including their customer account, email, phone number, and B2B purchasing company. Use this to personalize the **Order status** page or identify B2B orders.\n\nReflects the customer account at the time the order was placed. Doesn't update if account details change afterward.", + "description": "The buyer who placed the order, including their customer account, email, phone number, and B2B purchasing company. Use this to personalize the **Order status** page or identify B2B orders.", "isOptional": true }, { @@ -8947,7 +8939,7 @@ "syntaxKind": "PropertySignature", "name": "checkoutSettings", "value": "SubscribableSignalLike", - "description": "The checkout settings that were active when the buyer placed the order, such as whether order notes and login are enabled.\n\nReturns the merchant's checkout configuration at the time of checkout. Doesn't reflect updates made after the order was placed." + "description": "The checkout settings that were active when the buyer placed the order, such as whether order notes and login are enabled." }, { "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", @@ -8968,7 +8960,7 @@ "syntaxKind": "PropertySignature", "name": "discountAllocations", "value": "SubscribableSignalLike", - "description": "The cart-level discount allocations applied to the order. A discount allocation represents how a discount is distributed across the order. Each allocation includes the discounted amount and one of the following types:\n\n- `CartCodeDiscountAllocation`: A discount the buyer applied by entering a code at checkout.\n- `CartAutomaticDiscountAllocation`: A discount the merchant configured in Shopify admin to apply automatically.\n- `CartCustomDiscountAllocation`: A discount created programmatically by a [Shopify Function](/docs/apps/build/functions).\n\nReturns order-level discounts only. For per-line discount allocations, read from individual cart lines via the Cart Lines API." + "description": "The cart-level discount allocations applied to the order. A discount allocation represents how a discount is distributed across the order. Each allocation includes the discounted amount and one of the following types:\n\n- `CartCodeDiscountAllocation`: A discount the buyer applied by entering a code at checkout.\n- `CartAutomaticDiscountAllocation`: A discount the merchant configured in Shopify admin to apply automatically.\n- `CartCustomDiscountAllocation`: A discount created programmatically by a [Shopify Function](/docs/apps/build/functions)." }, { "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", @@ -8990,14 +8982,14 @@ "name": "extensionPoint", "value": "Target", "description": "The identifier that specifies where in Shopify's UI your code is being injected. This will be one of the targets you have included in your extension's configuration file.", - "deprecationMessage": "Use `extension.target` instead.", + "deprecationMessage": "Deprecated as of version `2023-07`, use `extension.target` instead.", "examples": [ { "title": "Example", "description": "", "tabs": [ { - "code": "'customer-account.order-status.block.render'\nLearn more about [targets](/docs/api/customer-account-ui-extensions/{API_VERSION}/targets) and [target configuration](/docs/api/customer-account-ui-extensions/{API_VERSION}#configuration).", + "code": "'customer-account.order-status.block.render'", "title": "Example" } ] @@ -9037,14 +9029,14 @@ "syntaxKind": "PropertySignature", "name": "requireLogin", "value": "() => Promise", - "description": "Triggers a login prompt if the customer is viewing a pre-authenticated **Order status** page. Use this to require full authentication before displaying sensitive information in your extension.\n\nTriggers a login prompt for pre-authenticated buyers. Doesn't guarantee the buyer completes the login. Handle the dismissal case in your code." + "description": "Triggers a login prompt if the customer is viewing a pre-authenticated **Order status** page. Use this to require full authentication before displaying sensitive information in your extension." }, { "filePath": "src/surfaces/customer-account/api/order-status/order-status.ts", "syntaxKind": "PropertySignature", "name": "shippingAddress", "value": "SubscribableSignalLike", - "description": "The shipping address that the buyer provided for the order. This is where physical goods are delivered. The value is `undefined` if the order contains only digital products or if a shipping address wasn't required.\n\nReflects the state at the time the order was placed. Doesn't update if the customer changes their account address afterward.", + "description": "The shipping address that the buyer provided for the order. This is where physical goods are delivered. The value is `undefined` if the order contains only digital products or if a shipping address wasn't required.", "isOptional": true }, { @@ -9074,7 +9066,7 @@ ] } ], - "value": "export interface OrderStatusApi {\n /**\n * The gift cards that were applied to the order. Each gift card includes the last four\n * characters of the code, the amount used for this order, and the remaining balance.\n */\n appliedGiftCards: SubscribableSignalLike;\n\n /**\n * The [metafields](/docs/apps/build/custom-data/metafields) requested in the\n * [`shopify.extension.toml`](/docs/apps/build/customer-accounts/metafields#create-the-metafield-definition)\n * file. Metafields are custom data fields that store additional information on Shopify resources\n * such as products, variants, customers, and the shop. These metafields are updated when there's\n * a change in the merchandise items being purchased by the customer.\n *\n * App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported. See [app owned metafields](/docs/apps/build/metafields#app-owned-metafields) for more information.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when accessing metafields attached to `customer`, `company`, or `companyLocation` resources.\n */\n appMetafields: SubscribableSignalLike;\n\n /**\n * The custom key-value pairs attached to the order by the customer or by other extensions\n * during cart or checkout. These are commonly used for delivery instructions, gift messages,\n * or other information the buyer provides. The value is `undefined` if no attributes were set.\n */\n attributes: SubscribableSignalLike;\n\n /**\n * The buyer who placed the order, including their customer account, email, phone number, and B2B purchasing company. Use this to personalize the **Order status** page or identify B2B orders.\n *\n * Reflects the customer account at the time the order was placed. Doesn't\n * update if account details change afterward.\n */\n buyerIdentity?: OrderStatusBuyerIdentity;\n\n /**\n * The checkout settings that were active when the buyer placed the order, such as\n * whether order notes and login are enabled.\n *\n * Returns the merchant's checkout configuration at the time of checkout.\n * Doesn't reflect updates made after the order was placed.\n */\n checkoutSettings: SubscribableSignalLike;\n\n /**\n * A breakdown of the costs for the order, including the subtotal, shipping, tax, and total amounts.\n */\n cost: CartCost;\n\n /**\n * A list of discount codes that the buyer entered during checkout and that were applied to the order.\n */\n discountCodes: SubscribableSignalLike;\n\n /**\n * The cart-level discount allocations applied to the order. A discount allocation represents\n * how a discount is distributed across the order. Each allocation includes the discounted\n * amount and one of the following types:\n *\n * - `CartCodeDiscountAllocation`: A discount the buyer applied by entering a code at checkout.\n * - `CartAutomaticDiscountAllocation`: A discount the merchant configured in Shopify admin to apply automatically.\n * - `CartCustomDiscountAllocation`: A discount created programmatically by a [Shopify Function](/docs/apps/build/functions).\n *\n * Returns order-level discounts only. For per-line discount allocations,\n * read from individual cart lines via the Cart Lines API.\n */\n discountAllocations: SubscribableSignalLike;\n\n /**\n * Metadata about the current extension, including its target, API version, and capabilities.\n */\n extension: Extension;\n\n /**\n * The identifier that specifies where in Shopify's UI your code is being injected. This will be one of the targets you have included in your extension's configuration file.\n *\n * @example 'customer-account.order-status.block.render'\n * Learn more about [targets](/docs/api/customer-account-ui-extensions/{API_VERSION}/targets) and [target configuration](/docs/api/customer-account-ui-extensions/{API_VERSION}#configuration).\n *\n * @deprecated Use `extension.target` instead.\n */\n extensionPoint: Target;\n\n /**\n * A list of line items in the order. Each line includes the merchandise, quantity, cost,\n * custom attributes, and discount allocations.\n */\n lines: SubscribableSignalLike;\n\n /**\n * The buyer's locale, currency, time zone, country, and market context for the order.\n * Use these values to adapt your extension's content to the buyer's region. For formatted\n * dates, numbers, and translated strings, use the [Localization API](/docs/api/customer-account-ui-extensions/{API_VERSION}/target-apis/platform-apis/localization-api)\n * instead.\n */\n localization: OrderStatusLocalization;\n\n /**\n * A note left by the customer to the merchant, either in their cart or during checkout.\n * The value is `undefined` if no note was provided.\n */\n note: SubscribableSignalLike;\n\n /**\n * The order that was placed after checkout completion. Includes the order ID,\n * display name, confirmation number, and timestamps for processing and cancellation.\n * The value is `undefined` if the order hasn't been fully processed yet.\n */\n order: SubscribableSignalLike;\n\n /**\n * The token that identifies the checkout session used to create the order. Use this value\n * to correlate the order with analytics events or backend API calls. This matches the\n * `token` field in the [WebPixel checkout payload](/docs/api/pixels/customer-events#checkout).\n * The value is `undefined` if the checkout token is unavailable.\n */\n checkoutToken: SubscribableSignalLike;\n\n /**\n * The shipping address that the buyer provided for the order. This is where physical goods\n * are delivered. The value is `undefined` if the order contains only digital products or\n * if a shipping address wasn't required.\n *\n * Reflects the state at the time the order was placed. Doesn't update if the\n * customer changes their account address afterward.\n */\n shippingAddress?: SubscribableSignalLike;\n\n /**\n * The billing address associated with the buyer's payment method for the order. The value\n * is `undefined` if the order doesn't have a billing address on file.\n *\n * Reflects the state at the time the order was placed. Doesn't update if the\n * customer changes their account address afterward.\n */\n billingAddress?: SubscribableSignalLike;\n\n /**\n * The shop where the order was placed. Includes the shop ID, name, primary\n * storefront URL, and myshopify.com domain.\n */\n shop: Shop;\n\n /**\n * The API version that the extension is using, such as `'2026-01'` or `'unstable'`. This corresponds to the version declared in your extension's configuration.\n *\n * @example 'unstable'\n */\n version: Version;\n\n /**\n * Triggers a login prompt if the customer is viewing a pre-authenticated **Order status** page.\n * Use this to require full authentication before displaying sensitive information in your extension.\n *\n * Triggers a login prompt for pre-authenticated buyers. Doesn't guarantee\n * the buyer completes the login. Handle the dismissal case in your code.\n */\n requireLogin: () => Promise;\n\n /**\n * The buyer's current authentication level on the **Order status** page. Use this to determine whether to display sensitive information or prompt the buyer to log in.\n *\n * Read-only. The authentication level can't be changed programmatically.\n */\n authenticationState: SubscribableSignalLike;\n}" + "value": "export interface OrderStatusApi {\n /**\n * The gift cards that were applied to the order. Each gift card includes the last four\n * characters of the code, the amount used for this order, and the remaining balance.\n */\n appliedGiftCards: SubscribableSignalLike;\n\n /**\n * The [metafields](/docs/apps/build/custom-data/metafields) requested in the\n * [`shopify.extension.toml`](/docs/apps/build/customer-accounts/metafields#create-the-metafield-definition)\n * file. Metafields are custom data fields that store additional information on Shopify resources\n * such as products, variants, customers, and the shop. These metafields are updated when there's\n * a change in the merchandise items being purchased by the customer.\n *\n * App owned metafields are supported and are returned using the `$app` format. The fully qualified reserved namespace format such as `app--{your-app-id}[--{optional-namespace}]` is not supported. See [app owned metafields](/docs/apps/build/metafields#app-owned-metafields) for more information.\n *\n * {% include /apps/checkout/privacy-icon.md %} Requires level 1 access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data) when accessing metafields attached to `customer`, `company`, or `companyLocation` resources.\n */\n appMetafields: SubscribableSignalLike;\n\n /**\n * The custom key-value pairs attached to the order by the customer or by other extensions\n * during cart or checkout. These are commonly used for delivery instructions, gift messages,\n * or other information the buyer provides. The value is `undefined` if no attributes were set.\n */\n attributes: SubscribableSignalLike;\n\n /**\n * The buyer who placed the order, including their customer account, email, phone number, and B2B purchasing company. Use this to personalize the **Order status** page or identify B2B orders.\n */\n buyerIdentity?: OrderStatusBuyerIdentity;\n\n /**\n * The checkout settings that were active when the buyer placed the order, such as\n * whether order notes and login are enabled.\n */\n checkoutSettings: SubscribableSignalLike;\n\n /**\n * A breakdown of the costs for the order, including the subtotal, shipping, tax, and total amounts.\n */\n cost: CartCost;\n\n /**\n * A list of discount codes that the buyer entered during checkout and that were applied to the order.\n */\n discountCodes: SubscribableSignalLike;\n\n /**\n * The cart-level discount allocations applied to the order. A discount allocation represents\n * how a discount is distributed across the order. Each allocation includes the discounted\n * amount and one of the following types:\n *\n * - `CartCodeDiscountAllocation`: A discount the buyer applied by entering a code at checkout.\n * - `CartAutomaticDiscountAllocation`: A discount the merchant configured in Shopify admin to apply automatically.\n * - `CartCustomDiscountAllocation`: A discount created programmatically by a [Shopify Function](/docs/apps/build/functions).\n */\n discountAllocations: SubscribableSignalLike;\n\n /**\n * Metadata about the current extension, including its target, API version, and capabilities.\n */\n extension: Extension;\n\n /**\n * The identifier that specifies where in Shopify's UI your code is being injected. This will be one of the targets you have included in your extension's configuration file.\n *\n * @example 'customer-account.order-status.block.render'\n * @see /docs/api/customer-account-ui-extensions/extension-targets-overview\n * @see /docs/apps/app-extensions/configuration#targets\n *\n * @deprecated Deprecated as of version `2023-07`, use `extension.target` instead.\n */\n extensionPoint: Target;\n\n /**\n * A list of line items in the order. Each line includes the merchandise, quantity, cost,\n * custom attributes, and discount allocations.\n */\n lines: SubscribableSignalLike;\n\n /**\n * The buyer's locale, currency, time zone, country, and market context for the order.\n * Use these values to adapt your extension's content to the buyer's region. For formatted\n * dates, numbers, and translated strings, use the [Localization API](/docs/api/customer-account-ui-extensions/{API_VERSION}/target-apis/platform-apis/localization-api)\n * instead.\n */\n localization: OrderStatusLocalization;\n\n /**\n * A note left by the customer to the merchant, either in their cart or during checkout.\n * The value is `undefined` if no note was provided.\n */\n note: SubscribableSignalLike;\n\n /**\n * The order that was placed after checkout completion. Includes the order ID,\n * display name, confirmation number, and timestamps for processing and cancellation.\n * The value is `undefined` if the order hasn't been fully processed yet.\n */\n order: SubscribableSignalLike;\n\n /**\n * The token that identifies the checkout session used to create the order. Use this value\n * to correlate the order with analytics events or backend API calls. This matches the\n * `token` field in the [WebPixel checkout payload](/docs/api/pixels/customer-events#checkout).\n * The value is `undefined` if the checkout token is unavailable.\n */\n checkoutToken: SubscribableSignalLike;\n\n /**\n * The shipping address that the buyer provided for the order. This is where physical goods\n * are delivered. The value is `undefined` if the order contains only digital products or\n * if a shipping address wasn't required.\n */\n shippingAddress?: SubscribableSignalLike;\n\n /**\n * The billing address associated with the buyer's payment method for the order. The value\n * is `undefined` if the order doesn't have a billing address on file.\n */\n billingAddress?: SubscribableSignalLike;\n\n /**\n * The shop where the order was placed. Includes the shop ID, name, primary\n * storefront URL, and myshopify.com domain.\n */\n shop: Shop;\n\n /**\n * The API version that the extension is using, such as `'2026-01'` or `'unstable'`. This corresponds to the version declared in your extension's configuration.\n *\n * @example 'unstable'\n */\n version: Version;\n\n /**\n * Triggers a login prompt if the customer is viewing a pre-authenticated **Order status** page.\n * Use this to require full authentication before displaying sensitive information in your extension.\n */\n requireLogin: () => Promise;\n\n /**\n * The buyer's current authentication level on the **Order status** page. Use this to determine whether to display sensitive information or prompt the buyer to log in.\n */\n authenticationState: SubscribableSignalLike;\n}" } }, "OrderStatusBuyerIdentity": { @@ -9360,6 +9352,57 @@ "value": "export interface Order {\n /**\n * A globally-unique identifier for the order in the format `gid://shopify/Order/`. Use this to reference the order in the [GraphQL Admin API](/docs/api/admin-graphql).\n *\n * @example 'gid://shopify/Order/1'\n */\n id: string;\n\n /**\n * The merchant-facing order number prefixed with `#`, such as `#1001`. This is the human-readable identifier displayed to both the merchant in Shopify admin and the buyer on the **Order status** page and in email confirmations.\n *\n * @example '#1000'\n */\n name: string;\n\n /**\n * The date and time when the order was cancelled, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. The value is `undefined` if the order hasn't been cancelled. Use this to conditionally display cancellation details to the buyer.\n */\n cancelledAt?: string;\n\n /**\n * A randomly generated alphanumeric identifier for the order that the buyer can use when contacting the merchant about their purchase. This is always present for orders created in 2024 and onwards. For older orders, this value may be `undefined`.\n */\n confirmationNumber?: string;\n\n /**\n * The date and time when the order was processed, in [ISO 8601](https://en.wikipedia.org/wiki/ISO_8601) format. An order is processed after the buyer completes checkout and the payment is captured, at which point the order becomes visible in Shopify admin.\n */\n processedAt?: string;\n}" } }, + "BaseElementPropsWithChildren": { + "src/surfaces/customer-account/components/shared.ts": { + "filePath": "src/surfaces/customer-account/components/shared.ts", + "name": "BaseElementPropsWithChildren", + "description": "The base properties for elements that have children, extending `BaseElementProps` with children support.", + "members": [ + { + "filePath": "src/surfaces/customer-account/components/shared.ts", + "syntaxKind": "PropertySignature", + "name": "children", + "value": "preact.ComponentChildren", + "description": "The child elements to render within this component.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components/shared.ts", + "syntaxKind": "PropertySignature", + "name": "key", + "value": "preact.Key", + "description": "A unique identifier for this element within its parent. Used by Preact for efficient rendering and reconciliation when lists of elements change by tracking which items have been added, removed, or reordered.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components/shared.ts", + "syntaxKind": "PropertySignature", + "name": "ref", + "value": "preact.Ref", + "description": "A reference to the underlying DOM element, typically created using `useRef()`. This allows you to access and manipulate the DOM element directly in your component logic for imperative operations.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/components/shared.ts", + "syntaxKind": "PropertySignature", + "name": "slot", + "value": "Lowercase", + "description": "Assigns this element to a named slot in a parent component that uses slot-based composition patterns.", + "isOptional": true + } + ], + "value": "export interface BaseElementPropsWithChildren\n extends BaseElementProps {\n /**\n * The child elements to render within this component.\n */\n children?: preact.ComponentChildren;\n}" + } + }, + "ComponentChildren": { + "src/surfaces/checkout/components/components.ts": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ComponentChildren", + "value": "any", + "description": "TODO: Update `any` type here after this is resolved https://github.com/Shopify/ui-api-design/issues/139" + } + }, "CustomerAccountActionPropsDocs": { "src/surfaces/customer-account/components.ts": { "filePath": "src/surfaces/customer-account/components.ts", @@ -16437,7 +16480,7 @@ "syntaxKind": "PropertySignature", "name": "initials", "value": "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.\n\nCharacters beyond the first two might be truncated. Special characters, emojis, and non-Latin scripts might not render as expected.", + "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.", "isOptional": true }, { @@ -17418,7 +17461,7 @@ "syntaxKind": "PropertySignature", "name": "initials", "value": "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.\n\nCharacters beyond the first two might be truncated. Special characters, emojis, and non-Latin scripts might not render as expected.", + "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.", "isOptional": true }, { @@ -18819,26 +18862,6 @@ ] } }, - "CallbackEventListener": { - "src/surfaces/customer-account/api/docs.ts": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEventListener", - "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", - "description": "A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.", - "isPublicDocs": true - } - }, - "CallbackEvent": { - "src/surfaces/customer-account/api/docs.ts": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "CallbackEvent", - "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", - "description": "An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.", - "isPublicDocs": true - } - }, "MenuPropsDocs": { "src/surfaces/customer-account/components.ts": { "filePath": "src/surfaces/customer-account/components.ts", @@ -25883,6 +25906,139 @@ ] } }, + "CallbackEvent": { + "src/surfaces/customer-account/api/docs.ts": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEvent", + "value": "TEvent & {\n currentTarget: HTMLElementTagNameMap[TTagName];\n}", + "description": "An event type that narrows the `currentTarget` to the specific HTML element associated with the custom element tag. This provides type-safe event handling in callback listeners.", + "isPublicDocs": true + } + }, + "CallbackEventListener": { + "src/surfaces/customer-account/api/docs.ts": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "CallbackEventListener", + "value": "(EventListener & {\n (event: CallbackEvent): void;\n }) | null", + "description": "A typed event listener for custom element events. The listener receives a `CallbackEvent` with the correct `currentTarget` type for the associated custom element tag.", + "isPublicDocs": true + } + }, + "ButtonProps": { + "src/surfaces/customer-account/api/docs.ts": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "name": "ButtonProps", + "description": "", + "members": [ + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "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.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "click", + "value": "((event: CallbackEventListener) => void) | null", + "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "command", + "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", + "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", + "isOptional": true, + "defaultValue": "'--auto'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "commandFor", + "value": "string", + "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the button, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "href", + "value": "string", + "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "id", + "value": "string", + "description": "A unique identifier for the element.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Replaces content with a loading indicator.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "target", + "value": "'auto' | '_self' | '_blank'", + "description": "Specifies where to display the linked URL.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "'auto' | 'neutral' | 'critical'", + "description": "Sets the tone of the Button, based on the intention of the information being conveyed.", + "isOptional": true, + "defaultValue": "'auto'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "type", + "value": "'button' | 'submit'", + "description": "The behavior of the button.\n\n- `'submit'` - Used to indicate the component acts as a submit button, meaning it submits the closest form.\n- `'button'` - Used to indicate the component acts as a button, meaning it has no default action.\n- `'reset'` - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", + "isOptional": true, + "defaultValue": "'button'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "variant", + "value": "'auto' | 'primary' | 'secondary'", + "description": "Changes the visual appearance of the Button.", + "isOptional": true, + "defaultValue": "'auto' - the variant is automatically determined by the Button's context" + } + ], + "value": "interface ButtonProps {\n /**\n * A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.\n *\n * Use this when using only an icon or the button text is not enough context\n * for users using assistive technologies.\n */\n accessibilityLabel?: string;\n /**\n * ID of a component that should respond to activations (e.g. clicks) on this component.\n *\n * See `command` for how to control the behavior of the target.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor\n */\n commandFor?: string;\n /**\n * Sets the action the `commandFor` should take when this clickable is activated.\n *\n * See the documentation of particular components for the actions they support.\n *\n * - `--auto`: a default action for the target component.\n * - `--show`: shows the target component.\n * - `--hide`: hides the target component.\n * - `--toggle`: toggles the target component.\n * - `--copy`: copies the target ClipboardItem.\n *\n * @default '--auto'\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command\n */\n command?: '--auto' | '--show' | '--hide' | '--toggle' | '--copy';\n /**\n * Disables the button, disallowing any interaction.\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The URL to link to.\n *\n * - If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n * - If a `commandFor` is set, the `command` will be executed instead of the navigation.\n */\n href?: string;\n /**\n * A unique identifier for the element.\n */\n id?: string;\n /**\n * Replaces content with a loading indicator.\n *\n * @defaultValue false\n */\n loading?: boolean;\n /**\n * Specifies where to display the linked URL.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n *\n * 'auto' - The target is automatically determined based on the origin of the URL. Surfaces can set specific rules on how they handle each URL.\n * It's expected that the behavior of `auto` is as `_self` except in specific cases.\n * For example, a surface could decide to open cross-origin URLs in a new window (as `_blank`).\n *\n * @default 'auto'\n */\n target?: 'auto' | '_self' | '_blank';\n /**\n * Sets the tone of the Button, based on the intention of the information being conveyed.\n *\n * @default 'auto'\n */\n tone?: 'auto' | 'neutral' | 'critical';\n /**\n * The behavior of the button.\n *\n * - `'submit'` - Used to indicate the component acts as a submit button, meaning it submits the closest form.\n * - `'button'` - Used to indicate the component acts as a button, meaning it has no default action.\n * - `'reset'` - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n *\n * This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.\n *\n * @default 'button'\n */\n type?: 'button' | 'submit';\n /**\n * Changes the visual appearance of the Button.\n *\n * @default 'auto' - the variant is automatically determined by the Button's context\n */\n variant?: 'auto' | 'primary' | 'secondary';\n\n /**\n * Callback when the button is activated.\n * This will be called before the action indicated by `type`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event\n */\n click?: ((event: CallbackEventListener) => void) | null;\n}" + } + }, "Docs_OrderStatus_MetafieldsApi": { "src/surfaces/customer-account/api/docs.ts": { "filePath": "src/surfaces/customer-account/api/docs.ts", @@ -25931,7 +26087,7 @@ "syntaxKind": "PropertySignature", "name": "buyerIdentity", "value": "OrderStatusBuyerIdentity", - "description": "The buyer who placed the order, including their customer account, email, phone number, and B2B purchasing company. Use this to personalize the **Order status** page or identify B2B orders.\n\nReflects the customer account at the time the order was placed. Doesn't update if account details change afterward.", + "description": "The buyer who placed the order, including their customer account, email, phone number, and B2B purchasing company. Use this to personalize the **Order status** page or identify B2B orders.", "isOptional": true } ], @@ -25950,7 +26106,7 @@ "syntaxKind": "PropertySignature", "name": "checkoutSettings", "value": "SubscribableSignalLike", - "description": "The checkout settings that were active when the buyer placed the order, such as whether order notes and login are enabled.\n\nReturns the merchant's checkout configuration at the time of checkout. Doesn't reflect updates made after the order was placed." + "description": "The checkout settings that were active when the buyer placed the order, such as whether order notes and login are enabled." } ], "value": "export interface Docs_OrderStatus_CheckoutSettingsApi\n extends Pick, 'checkoutSettings'> {}" @@ -26004,7 +26160,7 @@ "syntaxKind": "PropertySignature", "name": "discountAllocations", "value": "SubscribableSignalLike", - "description": "The cart-level discount allocations applied to the order. A discount allocation represents how a discount is distributed across the order. Each allocation includes the discounted amount and one of the following types:\n\n- `CartCodeDiscountAllocation`: A discount the buyer applied by entering a code at checkout.\n- `CartAutomaticDiscountAllocation`: A discount the merchant configured in Shopify admin to apply automatically.\n- `CartCustomDiscountAllocation`: A discount created programmatically by a [Shopify Function](/docs/apps/build/functions).\n\nReturns order-level discounts only. For per-line discount allocations, read from individual cart lines via the Cart Lines API." + "description": "The cart-level discount allocations applied to the order. A discount allocation represents how a discount is distributed across the order. Each allocation includes the discounted amount and one of the following types:\n\n- `CartCodeDiscountAllocation`: A discount the buyer applied by entering a code at checkout.\n- `CartAutomaticDiscountAllocation`: A discount the merchant configured in Shopify admin to apply automatically.\n- `CartCustomDiscountAllocation`: A discount created programmatically by a [Shopify Function](/docs/apps/build/functions)." }, { "filePath": "src/surfaces/customer-account/api/docs.ts", @@ -26065,7 +26221,7 @@ "syntaxKind": "PropertySignature", "name": "billingAddress", "value": "SubscribableSignalLike", - "description": "The billing address associated with the buyer's payment method for the order. The value is `undefined` if the order doesn't have a billing address on file.\n\nReflects the state at the time the order was placed. Doesn't update if the customer changes their account address afterward.", + "description": "The billing address associated with the buyer's payment method for the order. The value is `undefined` if the order doesn't have a billing address on file.", "isOptional": true }, { @@ -26073,7 +26229,7 @@ "syntaxKind": "PropertySignature", "name": "shippingAddress", "value": "SubscribableSignalLike", - "description": "The shipping address that the buyer provided for the order. This is where physical goods are delivered. The value is `undefined` if the order contains only digital products or if a shipping address wasn't required.\n\nReflects the state at the time the order was placed. Doesn't update if the customer changes their account address afterward.", + "description": "The shipping address that the buyer provided for the order. This is where physical goods are delivered. The value is `undefined` if the order contains only digital products or if a shipping address wasn't required.", "isOptional": true } ], @@ -26110,7 +26266,7 @@ "syntaxKind": "PropertySignature", "name": "requireLogin", "value": "() => Promise", - "description": "Triggers a login prompt if the customer is viewing a pre-authenticated **Order status** page. Use this to require full authentication before displaying sensitive information in your extension.\n\nTriggers a login prompt for pre-authenticated buyers. Doesn't guarantee the buyer completes the login. Handle the dismissal case in your code." + "description": "Triggers a login prompt if the customer is viewing a pre-authenticated **Order status** page. Use this to require full authentication before displaying sensitive information in your extension." } ], "value": "export interface Docs_OrderStatus_RequireLoginApi\n extends Pick, 'requireLogin'> {}" @@ -26128,7 +26284,7 @@ "syntaxKind": "PropertySignature", "name": "authenticationState", "value": "SubscribableSignalLike", - "description": "The buyer's current authentication level on the **Order status** page. Use this to determine whether to display sensitive information or prompt the buyer to log in.\n\nRead-only. The authentication level can't be changed programmatically." + "description": "The buyer's current authentication level on the **Order status** page. Use this to determine whether to display sensitive information or prompt the buyer to log in." } ], "value": "export interface Docs_OrderStatus_AuthenticationStateApi\n extends Pick, 'authenticationState'> {}" @@ -26164,7 +26320,7 @@ "syntaxKind": "PropertySignature", "name": "target", "value": "SubscribableSignalLike", - "description": "The cart line that this extension is attached to. Use this to read the line item's merchandise, quantity, cost, and attributes." + "description": "The cart line the extension is attached to." } ], "value": "export interface Docs_CartLineItem_CartLinesApi\n extends Pick {}" @@ -26363,7 +26519,7 @@ "syntaxKind": "PropertySignature", "name": "applyTrackingConsentChange", "value": "ApplyTrackingConsentChangeType", - "description": "Applies updated tracking consent preferences for the buyer, including their decisions for analytics, marketing, and data sale, along with any custom tracking consent [metafields](/docs/apps/build/custom-data/metafields). Returns a promise that resolves with the result of the consent update.\n\n{% include /apps/checkout/privacy-icon.md %} Requires the [`collect_buyer_consent` capability](/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent) and access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." + "description": "Applies updated tracking consent preferences for the buyer, including their decisions for analytics, marketing, and data sale, along with any custom tracking consent [metafields](/docs/apps/build/custom-data/metafields). Returns a promise that resolves with the result of the consent update.\n\n{% include /apps/checkout/privacy-icon.md %} Requires the [`customer_privacy` capability](/docs/api/customer-account-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent) and access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/customer-account/api/docs.ts", @@ -26431,7 +26587,7 @@ "syntaxKind": "PropertySignature", "name": "applyTrackingConsentChange", "value": "ApplyTrackingConsentChangeType", - "description": "Applies updated tracking consent preferences for the buyer, including their decisions for analytics, marketing, and data sale, along with any custom tracking consent [metafields](/docs/apps/build/custom-data/metafields). Returns a promise that resolves with the result of the consent update.\n\n{% include /apps/checkout/privacy-icon.md %} Requires the [`collect_buyer_consent` capability](/docs/apps/build/customer-accounts/capabilities#collect-buyer-consent) and access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." + "description": "Applies updated tracking consent preferences for the buyer, including their decisions for analytics, marketing, and data sale, along with any custom tracking consent [metafields](/docs/apps/build/custom-data/metafields). Returns a promise that resolves with the result of the consent update.\n\n{% include /apps/checkout/privacy-icon.md %} Requires the [`customer_privacy` capability](/docs/api/customer-account-ui-extensions/{API_VERSION}/configuration#collect-buyer-consent) and access to [protected customer data](/docs/apps/store/data-protection/protected-customer-data)." }, { "filePath": "src/surfaces/customer-account/api/docs.ts", @@ -26460,7 +26616,7 @@ "name": "extensionPoint", "value": "Target", "description": "The identifier that specifies where in Shopify’s UI your code is being injected. This will be one of the [targets](/docs/api/customer-account-ui-extensions/{API_VERSION}/configuration#targets) you have included in your extension’s configuration file. For more information, refer to the [extension targets overview](/docs/api/customer-account-ui-extensions/{API_VERSION}/extension-targets-overview).", - "deprecationMessage": "Use `extension.target` instead.", + "deprecationMessage": "Deprecated as of version `2023-07`, use `extension.target` instead.", "examples": [ { "title": "Example", @@ -26590,7 +26746,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", + "description": "The `id` of a component that should respond to activations on this button. See `command` for how to control the behavior of the target.", "isOptional": true }, { @@ -26620,7 +26776,7 @@ "defaultValue": "false" } ], - "value": "export interface Docs_Page_Button_PrimaryAction\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {\n /**\n * A label that describes the button's purpose to assistive technologies. Use this when the button text alone doesn't provide enough context.\n */\n accessibilityLabel?: ButtonProps['accessibilityLabel'];\n /**\n * A callback that fires when the button is activated, before the action indicated by `type`.\n */\n click?: ButtonProps['click'];\n /**\n * The action the `commandFor` target should take when this button is activated.\n *\n * - `--auto`: A default action for the target component.\n * - `--show`: Shows the target component.\n * - `--hide`: Hides the target component.\n * - `--toggle`: Toggles the target component.\n * - `--copy`: Copies the target ClipboardItem.\n *\n * @default '--auto'\n */\n command?: ButtonProps['command'];\n /**\n * The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n */\n commandFor?: ButtonProps['commandFor'];\n /**\n * Whether the button is disabled and non-interactive.\n *\n * @default false\n */\n disabled?: ButtonProps['disabled'];\n /**\n * The URL to navigate to when the button is activated. If a `commandFor` is set, the `command` is executed instead of the navigation.\n */\n href?: ButtonProps['href'];\n /**\n * Whether to replace the button content with a loading indicator.\n *\n * @default false\n */\n loading?: ButtonProps['loading'];\n}" + "value": "export interface Docs_Page_Button_PrimaryAction\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {\n /**\n * A label that describes the button's purpose to assistive technologies. Use this when the button text alone doesn't provide enough context.\n */\n accessibilityLabel?: ButtonProps['accessibilityLabel'];\n /**\n * A callback that fires when the button is activated, before the action indicated by `type`.\n */\n click?: ButtonProps['click'];\n /**\n * The action the `commandFor` target should take when this button is activated.\n *\n * - `--auto`: A default action for the target component.\n * - `--show`: Shows the target component.\n * - `--hide`: Hides the target component.\n * - `--toggle`: Toggles the target component.\n * - `--copy`: Copies the target ClipboardItem.\n *\n * @default '--auto'\n */\n command?: ButtonProps['command'];\n /**\n * The `id` of a component that should respond to activations on this button. See `command` for how to control the behavior of the target.\n */\n commandFor?: ButtonProps['commandFor'];\n /**\n * Whether the button is disabled and non-interactive.\n *\n * @default false\n */\n disabled?: ButtonProps['disabled'];\n /**\n * The URL to navigate to when the button is activated. If a `commandFor` is set, the `command` is executed instead of the navigation.\n */\n href?: ButtonProps['href'];\n /**\n * Whether to replace the button content with a loading indicator.\n *\n * @default false\n */\n loading?: ButtonProps['loading'];\n}" } }, "Docs_Page_Button_SecondaryAction": { @@ -26660,7 +26816,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", + "description": "The `id` of a component that should respond to activations on this button. See `command` for how to control the behavior of the target.", "isOptional": true }, { @@ -26690,7 +26846,7 @@ "defaultValue": "false" } ], - "value": "export interface Docs_Page_Button_SecondaryAction\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {\n /**\n * A label that describes the button's purpose to assistive technologies. Use this when the button text alone doesn't provide enough context.\n */\n accessibilityLabel?: ButtonProps['accessibilityLabel'];\n /**\n * A callback that fires when the button is activated, before the action indicated by `type`.\n */\n click?: ButtonProps['click'];\n /**\n * The action the `commandFor` target should take when this button is activated.\n *\n * - `--auto`: A default action for the target component.\n * - `--show`: Shows the target component.\n * - `--hide`: Hides the target component.\n * - `--toggle`: Toggles the target component.\n * - `--copy`: Copies the target ClipboardItem.\n *\n * @default '--auto'\n */\n command?: ButtonProps['command'];\n /**\n * The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n */\n commandFor?: ButtonProps['commandFor'];\n /**\n * Whether the button is disabled and non-interactive.\n *\n * @default false\n */\n disabled?: ButtonProps['disabled'];\n /**\n * The URL to navigate to when the button is activated. If a `commandFor` is set, the `command` is executed instead of the navigation.\n */\n href?: ButtonProps['href'];\n /**\n * Whether to replace the button content with a loading indicator.\n *\n * @default false\n */\n loading?: ButtonProps['loading'];\n}" + "value": "export interface Docs_Page_Button_SecondaryAction\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {\n /**\n * A label that describes the button's purpose to assistive technologies. Use this when the button text alone doesn't provide enough context.\n */\n accessibilityLabel?: ButtonProps['accessibilityLabel'];\n /**\n * A callback that fires when the button is activated, before the action indicated by `type`.\n */\n click?: ButtonProps['click'];\n /**\n * The action the `commandFor` target should take when this button is activated.\n *\n * - `--auto`: A default action for the target component.\n * - `--show`: Shows the target component.\n * - `--hide`: Hides the target component.\n * - `--toggle`: Toggles the target component.\n * - `--copy`: Copies the target ClipboardItem.\n *\n * @default '--auto'\n */\n command?: ButtonProps['command'];\n /**\n * The `id` of a component that should respond to activations on this button. See `command` for how to control the behavior of the target.\n */\n commandFor?: ButtonProps['commandFor'];\n /**\n * Whether the button is disabled and non-interactive.\n *\n * @default false\n */\n disabled?: ButtonProps['disabled'];\n /**\n * The URL to navigate to when the button is activated. If a `commandFor` is set, the `command` is executed instead of the navigation.\n */\n href?: ButtonProps['href'];\n /**\n * Whether to replace the button content with a loading indicator.\n *\n * @default false\n */\n loading?: ButtonProps['loading'];\n}" } }, "Docs_Page_Button_BreadcrumbAction": { @@ -26755,293 +26911,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the target component.\n- `--copy`: Copies the target clipboard item.\n\nLearn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", - "isOptional": true, - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the button, disallowing any interaction.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "href", - "value": "string", - "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "id", - "value": "string", - "description": "A unique identifier for the element.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "loading", - "value": "boolean", - "description": "Replaces content with a loading indicator.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "target", - "value": "'auto' | '_self' | '_blank'", - "description": "Specifies where to display the linked URL.", - "isOptional": true, - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "'auto' | 'neutral' | 'critical'", - "description": "Sets the tone of the Button, based on the intention of the information being conveyed.", - "isOptional": true, - "defaultValue": "'auto'" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "type", - "value": "'button' | 'submit'", - "description": "The behavior of the button.\n\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", - "isOptional": true, - "defaultValue": "'button'" - } - ], - "value": "export interface Docs_Menu_Button_Action\n extends Omit<\n ButtonProps,\n 'variant' | 'textDecoration' | 'inlineAlignment' | 'inlineSize' | 'size'\n > {}" - } - }, - "Docs_OrderActionMenu_Button": { - "src/surfaces/customer-account/api/docs.ts": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_OrderActionMenu_Button", - "description": "Supported props for Buttons used in order action menus.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "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.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "((event: CallbackEventListener) => void) | null", - "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the button, disallowing any interaction.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "href", - "value": "string", - "description": "Destination URL to link to.\n\nE.g. `extension:/` to navigate to the Full-page extension." - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "loading", - "value": "boolean", - "description": "Replaces content with a loading indicator.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "tone", - "value": "'auto' | 'neutral' | 'critical'", - "description": "Sets the tone of the Button, based on the intention of the information being conveyed.", - "isOptional": true, - "defaultValue": "'auto'" - } - ], - "value": "export interface Docs_OrderActionMenu_Button\n extends Pick<\n ButtonProps,\n 'click' | 'loading' | 'disabled' | 'accessibilityLabel' | 'href' | 'tone'\n > {\n /**\n * Destination URL to link to.\n *\n * E.g. `extension:/` to navigate to the Full-page extension.\n */\n href: ButtonProps['href'];\n}" - } - }, - "Docs_CustomerAccountAction_SlotButton": { - "src/surfaces/customer-account/api/docs.ts": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "Docs_CustomerAccountAction_SlotButton", - "description": "Supported props for Buttons used inside CustomerAccountAction slots.", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "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.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "((event: CallbackEventListener) => void) | null", - "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the target component.\n- `--copy`: Copies the target clipboard item.\n\nLearn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", - "isOptional": true, - "defaultValue": "'--auto'" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "commandFor", - "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "disabled", - "value": "boolean", - "description": "Disables the button, disallowing any interaction.", - "isOptional": true, - "defaultValue": "false" - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "href", - "value": "string", - "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "loading", - "value": "boolean", - "description": "Replaces content with a loading indicator.", - "isOptional": true, - "defaultValue": "false" - } - ], - "value": "export interface Docs_CustomerAccountAction_SlotButton\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {}" - } - }, - "BaseElementPropsWithChildren": { - "src/surfaces/customer-account/components/shared.ts": { - "filePath": "src/surfaces/customer-account/components/shared.ts", - "name": "BaseElementPropsWithChildren", - "description": "The base properties for elements that have children, extending `BaseElementProps` with children support.", - "members": [ - { - "filePath": "src/surfaces/customer-account/components/shared.ts", - "syntaxKind": "PropertySignature", - "name": "children", - "value": "preact.ComponentChildren", - "description": "The child elements to render within this component.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/components/shared.ts", - "syntaxKind": "PropertySignature", - "name": "key", - "value": "preact.Key", - "description": "A unique identifier for this element within its parent. Used by Preact for efficient rendering and reconciliation when lists of elements change by tracking which items have been added, removed, or reordered.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/components/shared.ts", - "syntaxKind": "PropertySignature", - "name": "ref", - "value": "preact.Ref", - "description": "A reference to the underlying DOM element, typically created using `useRef()`. This allows you to access and manipulate the DOM element directly in your component logic for imperative operations.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/components/shared.ts", - "syntaxKind": "PropertySignature", - "name": "slot", - "value": "Lowercase", - "description": "Assigns this element to a named slot in a parent component that uses slot-based composition patterns.", - "isOptional": true - } - ], - "value": "export interface BaseElementPropsWithChildren\n extends BaseElementProps {\n /**\n * The child elements to render within this component.\n */\n children?: preact.ComponentChildren;\n}" - } - }, - "ComponentChildren": { - "src/surfaces/checkout/components/components.ts": { - "filePath": "src/surfaces/checkout/components/components.ts", - "syntaxKind": "TypeAliasDeclaration", - "name": "ComponentChildren", - "value": "any", - "description": "TODO: Update `any` type here after this is resolved https://github.com/Shopify/ui-api-design/issues/139" - } - }, - "ButtonProps": { - "src/surfaces/customer-account/api/docs.ts": { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "name": "ButtonProps", - "description": "", - "members": [ - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "accessibilityLabel", - "value": "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.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "click", - "value": "((event: CallbackEventListener) => void) | null", - "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", - "isOptional": true - }, - { - "filePath": "src/surfaces/customer-account/api/docs.ts", - "syntaxKind": "PropertySignature", - "name": "command", - "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated.\n\n- `--auto`: A default action for the target component.\n- `--show`: Shows the target component.\n- `--hide`: Hides the target component.\n- `--toggle`: Toggles the target component.\n- `--copy`: Copies the target clipboard item.\n\nLearn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -27050,7 +26920,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", + "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", "isOptional": true }, { @@ -27110,74 +26980,150 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'button' | 'submit'", - "description": "The behavior of the button.\n\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", + "description": "The behavior of the button.\n\n- `'submit'` - Used to indicate the component acts as a submit button, meaning it submits the closest form.\n- `'button'` - Used to indicate the component acts as a button, meaning it has no default action.\n- `'reset'` - Used to indicate the component acts as a reset button, meaning it resets the closest form (returning fields to their default values).\n\nThis property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.", "isOptional": true, "defaultValue": "'button'" + } + ], + "value": "export interface Docs_Menu_Button_Action\n extends Omit<\n ButtonProps,\n 'variant' | 'textDecoration' | 'inlineAlignment' | 'inlineSize' | 'size'\n > {}" + } + }, + "Docs_OrderActionMenu_Button": { + "src/surfaces/customer-account/api/docs.ts": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "name": "Docs_OrderActionMenu_Button", + "description": "Supported props for Buttons used in order action menus.", + "isPublicDocs": true, + "members": [ + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "accessibilityLabel", + "value": "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.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", + "isOptional": true }, { "filePath": "src/surfaces/customer-account/api/docs.ts", "syntaxKind": "PropertySignature", - "name": "variant", - "value": "'auto' | 'primary' | 'secondary'", - "description": "Changes the visual appearance of the Button.", + "name": "click", + "value": "((event: CallbackEventListener) => void) | null", + "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "disabled", + "value": "boolean", + "description": "Disables the button, disallowing any interaction.", "isOptional": true, - "defaultValue": "'auto' - the variant is automatically determined by the Button's context" + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "href", + "value": "string", + "description": "Destination URL to link to.\n\nE.g. `extension:/` to navigate to the Full-page extension." + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Replaces content with a loading indicator.", + "isOptional": true, + "defaultValue": "false" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "tone", + "value": "'auto' | 'neutral' | 'critical'", + "description": "Sets the tone of the Button, based on the intention of the information being conveyed.", + "isOptional": true, + "defaultValue": "'auto'" } ], - "value": "interface ButtonProps {\n /**\n * A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.\n *\n * Use this when using only an icon or the button text is not enough context\n * for users using assistive technologies.\n */\n accessibilityLabel?: string;\n /**\n * The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n */\n commandFor?: string;\n /**\n * Sets the action the `commandFor` target should take when this component is activated.\n *\n * - `--auto`: A default action for the target component.\n * - `--show`: Shows the target component.\n * - `--hide`: Hides the target component.\n * - `--toggle`: Toggles the target component.\n * - `--copy`: Copies the target clipboard item.\n *\n * Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n *\n * @default '--auto'\n */\n command?: '--auto' | '--show' | '--hide' | '--toggle' | '--copy';\n /**\n * Disables the button, disallowing any interaction.\n *\n * @defaultValue false\n */\n disabled?: boolean;\n /**\n * The URL to link to.\n *\n * - If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n * - If a `commandFor` is set, the `command` will be executed instead of the navigation.\n */\n href?: string;\n /**\n * A unique identifier for the element.\n */\n id?: string;\n /**\n * Replaces content with a loading indicator.\n *\n * @defaultValue false\n */\n loading?: boolean;\n /**\n * Specifies where to display the linked URL.\n * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#target\n *\n * 'auto' - The target is automatically determined based on the origin of the URL. Surfaces can set specific rules on how they handle each URL.\n * It's expected that the behavior of `auto` is as `_self` except in specific cases.\n * For example, a surface could decide to open cross-origin URLs in a new window (as `_blank`).\n *\n * @default 'auto'\n */\n target?: 'auto' | '_self' | '_blank';\n /**\n * Sets the tone of the Button, based on the intention of the information being conveyed.\n *\n * @default 'auto'\n */\n tone?: 'auto' | 'neutral' | 'critical';\n /**\n * The behavior of the button.\n *\n * - `'submit'`: Submits the nearest containing form.\n * - `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n *\n * This property is ignored if the component supports `href` or `commandFor`/`command` and one of them is set.\n *\n * @default 'button'\n */\n type?: 'button' | 'submit';\n /**\n * Changes the visual appearance of the Button.\n *\n * @default 'auto' - the variant is automatically determined by the Button's context\n */\n variant?: 'auto' | 'primary' | 'secondary';\n\n /**\n * Callback when the button is activated.\n * This will be called before the action indicated by `type`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event\n */\n click?: ((event: CallbackEventListener) => void) | null;\n}" + "value": "export interface Docs_OrderActionMenu_Button\n extends Pick<\n ButtonProps,\n 'click' | 'loading' | 'disabled' | 'accessibilityLabel' | 'href' | 'tone'\n > {\n /**\n * Destination URL to link to.\n *\n * E.g. `extension:/` to navigate to the Full-page extension.\n */\n href: ButtonProps['href'];\n}" } }, - "SharedReferenceEntityTemplateSchema": { - "src/docs/shared/docs-type.ts": { - "filePath": "src/docs/shared/docs-type.ts", - "name": "SharedReferenceEntityTemplateSchema", - "description": "", + "Docs_CustomerAccountAction_SlotButton": { + "src/surfaces/customer-account/api/docs.ts": { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "name": "Docs_CustomerAccountAction_SlotButton", + "description": "Supported props for Buttons used inside CustomerAccountAction slots.", + "isPublicDocs": true, "members": [ { - "filePath": "src/docs/shared/docs-type.ts", + "filePath": "src/surfaces/customer-account/api/docs.ts", "syntaxKind": "PropertySignature", - "name": "category", + "name": "accessibilityLabel", "value": "string", - "description": "The category of the page." + "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.\n\nUse this when using only an icon or the button text is not enough context for users using assistive technologies.", + "isOptional": true }, { - "filePath": "src/docs/shared/docs-type.ts", + "filePath": "src/surfaces/customer-account/api/docs.ts", "syntaxKind": "PropertySignature", - "name": "description", - "value": "string", - "description": "A description of the reference entity. Can include Markdown." + "name": "click", + "value": "((event: CallbackEventListener) => void) | null", + "description": "Callback when the button is activated. This will be called before the action indicated by `type`.", + "isOptional": true }, { - "filePath": "src/docs/shared/docs-type.ts", + "filePath": "src/surfaces/customer-account/api/docs.ts", "syntaxKind": "PropertySignature", - "name": "name", + "name": "command", + "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", + "description": "Sets the action the `commandFor` should take when this clickable is activated.\n\nSee the documentation of particular components for the actions they support.\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.\n- `--copy`: copies the target ClipboardItem.", + "isOptional": true, + "defaultValue": "'--auto'" + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "commandFor", "value": "string", - "description": "The title of the page." + "description": "ID of a component that should respond to activations (e.g. clicks) on this component.\n\nSee `command` for how to control the behavior of the target.", + "isOptional": true }, { - "filePath": "src/docs/shared/docs-type.ts", + "filePath": "src/surfaces/customer-account/api/docs.ts", "syntaxKind": "PropertySignature", - "name": "related", - "value": "LinkType[]", - "description": "A section that displays related entities in a grid of cards." + "name": "disabled", + "value": "boolean", + "description": "Disables the button, disallowing any interaction.", + "isOptional": true, + "defaultValue": "false" }, { - "filePath": "src/docs/shared/docs-type.ts", + "filePath": "src/surfaces/customer-account/api/docs.ts", "syntaxKind": "PropertySignature", - "name": "subCategory", + "name": "href", "value": "string", - "description": "The subcategory of the page.", + "description": "The URL to link to.\n\n- If set, it will navigate to the location specified by `href` after executing the `onClick` callback.\n- If a `commandFor` is set, the `command` will be executed instead of the navigation.", "isOptional": true + }, + { + "filePath": "src/surfaces/customer-account/api/docs.ts", + "syntaxKind": "PropertySignature", + "name": "loading", + "value": "boolean", + "description": "Replaces content with a loading indicator.", + "isOptional": true, + "defaultValue": "false" } ], - "value": "export interface SharedReferenceEntityTemplateSchema\n extends Pick<\n ReferenceEntityTemplateSchema,\n 'name' | 'description' | 'category' | 'subCategory' | 'related'\n > {}" + "value": "export interface Docs_CustomerAccountAction_SlotButton\n extends Pick<\n ButtonProps,\n | 'click'\n | 'loading'\n | 'disabled'\n | 'accessibilityLabel'\n | 'href'\n | 'command'\n | 'commandFor'\n > {}" } }, "AbbreviationElementProps": { "src/surfaces/checkout/components/Abbreviation.ts": { "filePath": "src/surfaces/checkout/components/Abbreviation.ts", "name": "AbbreviationElementProps", - "description": "", + "description": "The element props interface for the Abbreviation component.", "isPublicDocs": true, "members": [ { @@ -27193,7 +27139,7 @@ "syntaxKind": "PropertySignature", "name": "title", "value": "string", - "description": "Defines the full expansion of the abbreviation or acronym. Helps user agents and users understand the meaning of the abbreviated text.\n\nLearn more about the [abbreviation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr).", + "description": "Defines the full expansion of the abbreviation or acronym.\n\nHelps user agents and users understand the meaning of the abbreviated text.", "isOptional": true, "defaultValue": "''" } @@ -29445,7 +29391,7 @@ "syntaxKind": "PropertySignature", "name": "title", "value": "string", - "description": "Defines the full expansion of the abbreviation or acronym. Helps user agents and users understand the meaning of the abbreviated text.\n\nLearn more about the [abbreviation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr).", + "description": "Defines the full expansion of the abbreviation or acronym.\n\nHelps user agents and users understand the meaning of the abbreviated text.", "isOptional": true, "defaultValue": "''" }, @@ -29508,7 +29454,7 @@ "syntaxKind": "PropertySignature", "name": "title", "value": "string", - "description": "Defines the full expansion of the abbreviation or acronym. Helps user agents and users understand the meaning of the abbreviated text.\n\nLearn more about the [abbreviation element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr).", + "description": "Defines the full expansion of the abbreviation or acronym.\n\nHelps user agents and users understand the meaning of the abbreviated text.", "isOptional": true, "defaultValue": "''" } @@ -29527,7 +29473,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -29543,7 +29489,7 @@ "syntaxKind": "PropertySignature", "name": "onToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.", + "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true } ], @@ -29562,7 +29508,7 @@ "syntaxKind": "PropertySignature", "name": "aftertoggle", "value": "CallbackEventListener", - "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -29578,11 +29524,11 @@ "syntaxKind": "PropertySignature", "name": "toggle", "value": "CallbackEventListener", - "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true } ], - "value": "export interface AnnouncementElementEvents {\n /**\n * A callback that fires when the element state changes, after any toggle animations have finished.\n *\n * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).\n */\n aftertoggle?: CallbackEventListener;\n /**\n * A callback that fires when the announcement is dismissed by the user clicking the close button or by calling the `dismiss()` method programmatically.\n */\n dismiss?: CallbackEventListener;\n /**\n * A callback that fires immediately when the element state changes, before any animations.\n *\n * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).\n */\n toggle?: CallbackEventListener;\n}" + "value": "export interface AnnouncementElementEvents {\n /**\n * A callback that fires when the element state changes, after any toggle animations have finished.\n *\n * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).\n */\n aftertoggle?: CallbackEventListener;\n /**\n * A callback that fires when the announcement is dismissed by the user clicking the close button or by calling the `dismiss()` method programmatically.\n */\n dismiss?: CallbackEventListener;\n /**\n * A callback that fires immediately when the element state changes, before any animations.\n *\n * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).\n */\n toggle?: CallbackEventListener;\n}" } }, "ToggleArgumentsEvent": { @@ -31933,7 +31879,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -31949,7 +31895,7 @@ "syntaxKind": "PropertySignature", "name": "onToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.", + "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true } ], @@ -37048,7 +36994,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -37123,7 +37069,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -37329,7 +37275,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -37392,7 +37338,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -37589,7 +37535,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -38303,7 +38249,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -40057,7 +40003,7 @@ "src/surfaces/checkout/components/Button.ts": { "filePath": "src/surfaces/checkout/components/Button.ts", "name": "ButtonElementProps", - "description": "", + "description": "Configure the following properties on the button component.", "isPublicDocs": true, "members": [ { @@ -40073,7 +40019,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -40082,7 +40028,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -40159,7 +40105,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the button component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" }, @@ -40173,7 +40119,7 @@ "defaultValue": "'auto'" } ], - "value": "export interface ButtonElementProps extends Pick {\n target?: Extract;\n tone?: Extract;\n /**\n * The behavioral type of the button component, which determines what action it performs when activated.\n *\n * - `submit`: Submits the nearest containing form.\n * - `button`: Performs no default action, relying on the `click` event handler for behavior.\n *\n * This property is ignored if `href` or `commandFor`/`command` is set.\n *\n * @default 'button'\n */\n type?: Extract;\n variant?: Extract;\n}" + "value": "export interface ButtonElementProps extends Pick {\n target?: Extract;\n tone?: Extract;\n type?: Extract;\n variant?: Extract;\n}" } }, "ButtonEvents": { @@ -40198,7 +40144,7 @@ "src/surfaces/checkout/components/Button.ts": { "filePath": "src/surfaces/checkout/components/Button.ts", "name": "ButtonElementEvents", - "description": "", + "description": "The button component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -40820,7 +40766,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -40829,7 +40775,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -42571,7 +42517,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the button component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" }, @@ -42631,7 +42577,7 @@ "syntaxKind": "PropertySignature", "name": "remoteMethods", "value": "Record unknown>", - "description": "", + "description": "Construct a type with a set of properties K of type T", "isOptional": true } ], @@ -42642,7 +42588,7 @@ "src/surfaces/checkout/components/Checkbox.ts": { "filePath": "src/surfaces/checkout/components/Checkbox.ts", "name": "CheckboxElementProps", - "description": "", + "description": "Configure the following properties on the checkbox component.", "isPublicDocs": true, "members": [ { @@ -42667,7 +42613,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -42676,7 +42622,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -42718,7 +42664,7 @@ "syntaxKind": "PropertySignature", "name": "label", "value": "string", - "description": "The visual content to use as the control label. Use a string to provide a simple text label displayed to the user.\n\nIf a `label` slot is also provided, the slot content takes precedence. [Learn more about slots](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox#slots-propertydetail-label).", + "description": "The text displayed as the control label, which identifies the purpose of the control to users. This label is associated with the control for accessibility.", "isOptional": true }, { @@ -42734,7 +42680,7 @@ "syntaxKind": "PropertySignature", "name": "required", "value": "boolean", - "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.\n\nAdds semantic meaning for accessibility. Doesn't trigger automatic validation or display an error. Implement validation logic yourself and use the `error` prop to show results.", + "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.", "isOptional": true, "defaultValue": "false" }, @@ -42747,7 +42693,7 @@ "isOptional": true } ], - "value": "export interface CheckboxElementProps extends Pick {\n command?: Extract;\n /**\n * The visual content to use as the control label. Use a string to provide a simple text label displayed to the user.\n *\n * If a `label` slot is also provided, the slot content takes precedence. [Learn more about slots](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox#slots-propertydetail-label).\n */\n label?: string;\n}" + "value": "export interface CheckboxElementProps extends Pick {\n command?: Extract;\n}" } }, "CheckboxEvents": { @@ -42755,7 +42701,6 @@ "filePath": "src/surfaces/checkout/components/Checkbox.ts", "name": "CheckboxEvents", "description": "", - "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/components/Checkbox.ts", @@ -42773,7 +42718,7 @@ "src/surfaces/checkout/components/Checkbox.ts": { "filePath": "src/surfaces/checkout/components/Checkbox.ts", "name": "CheckboxElementEvents", - "description": "", + "description": "The checkbox component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -42793,7 +42738,6 @@ "filePath": "src/surfaces/checkout/components/Checkbox.ts", "name": "CheckboxElement", "description": "", - "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/components/Checkbox.ts", @@ -43405,7 +43349,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -43414,7 +43358,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -43870,7 +43814,7 @@ "syntaxKind": "PropertySignature", "name": "label", "value": "string", - "description": "The visual content to use as the control label. Use a string to provide a simple text label displayed to the user.\n\nIf a `label` slot is also provided, the slot content takes precedence. [Learn more about slots](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox#slots-propertydetail-label).", + "description": "The text displayed as the control label, which identifies the purpose of the control to users. This label is associated with the control for accessibility.", "isOptional": true }, { @@ -44941,7 +44885,7 @@ "syntaxKind": "PropertySignature", "name": "required", "value": "boolean", - "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.\n\nAdds semantic meaning for accessibility. Doesn't trigger automatic validation or display an error. Implement validation logic yourself and use the `error` prop to show results.", + "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.", "isOptional": true, "defaultValue": "false" }, @@ -45168,31 +45112,11 @@ "value": "export interface CheckboxElement extends CheckboxElementProps, Omit {\n onchange: CheckboxEvents['onChange'];\n}" } }, - "CheckboxElementSlots": { - "src/surfaces/checkout/components/Checkbox.ts": { - "filePath": "src/surfaces/checkout/components/Checkbox.ts", - "name": "CheckboxElementSlots", - "description": "", - "isPublicDocs": true, - "members": [ - { - "filePath": "src/surfaces/checkout/components/Checkbox.ts", - "syntaxKind": "PropertySignature", - "name": "label", - "value": "HTMLElement", - "description": "The visual content to use as the control label.\n\nUse an `HTMLElement` as a rich control label composed of elements. Only an `s-text` element is supported with plain text and `s-link` as its only allowed children. Any other elements are stripped while preserving their text content.", - "isOptional": true - } - ], - "value": "export interface CheckboxElementSlots {\n /**\n * The visual content to use as the control label.\n *\n * Use an `HTMLElement` as a rich control label composed of elements. Only an `s-text` element is supported with plain text and `s-link` as its only allowed children. Any other elements are stripped while preserving their text content.\n */\n label?: HTMLElement;\n}" - } - }, "CheckboxProps": { "src/surfaces/checkout/components/Checkbox.ts": { "filePath": "src/surfaces/checkout/components/Checkbox.ts", "name": "CheckboxProps", "description": "", - "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/components/Checkbox.ts", @@ -45216,7 +45140,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -45225,7 +45149,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -45267,7 +45191,7 @@ "syntaxKind": "PropertySignature", "name": "label", "value": "string", - "description": "The visual content to use as the control label. Use a string to provide a simple text label displayed to the user.\n\nIf a `label` slot is also provided, the slot content takes precedence. [Learn more about slots](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/checkbox#slots-propertydetail-label).", + "description": "The text displayed as the control label, which identifies the purpose of the control to users. This label is associated with the control for accessibility.", "isOptional": true }, { @@ -45291,7 +45215,7 @@ "syntaxKind": "PropertySignature", "name": "required", "value": "boolean", - "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.\n\nAdds semantic meaning for accessibility. Doesn't trigger automatic validation or display an error. Implement validation logic yourself and use the `error` prop to show results.", + "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.", "isOptional": true, "defaultValue": "false" }, @@ -45311,7 +45235,7 @@ "src/surfaces/checkout/components/Chip.ts": { "filePath": "src/surfaces/checkout/components/Chip.ts", "name": "ChipElementProps", - "description": "", + "description": "Configure the following properties on the chip component.", "isPublicDocs": true, "members": [ { @@ -45338,7 +45262,7 @@ "src/surfaces/checkout/components/Chip.ts": { "filePath": "src/surfaces/checkout/components/Chip.ts", "name": "ChipElementSlots", - "description": "", + "description": "The chip component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -45346,11 +45270,11 @@ "syntaxKind": "PropertySignature", "name": "graphic", "value": "HTMLElement", - "description": "An optional graphic displayed at the start of the chip, such as an icon to visually reinforce the chip's label. Only the `s-icon` element and its `type` attribute are supported.", + "description": "The graphic to display inside of the chip.\n\nOnly `s-icon` element and its `type` attribute are supported.", "isOptional": true } ], - "value": "export interface ChipElementSlots {\n /**\n * An optional graphic displayed at the start of the chip, such as an icon to visually reinforce the chip's label. Only the `s-icon` element and its `type` attribute are supported.\n */\n graphic?: HTMLElement;\n}" + "value": "export interface ChipElementSlots {\n /**\n * The graphic to display inside of the chip.\n *\n * Only `s-icon` element and its `type` attribute are supported.\n */\n graphic?: HTMLElement;\n}" } }, "ChipProps": { @@ -47677,7 +47601,7 @@ "src/surfaces/checkout/components/Choice.ts": { "filePath": "src/surfaces/checkout/components/Choice.ts", "name": "ChoiceElementProps", - "description": "", + "description": "Configure the following properties on the choice component.", "isPublicDocs": true, "members": [ { @@ -47748,7 +47672,7 @@ "src/surfaces/checkout/components/Choice.ts": { "filePath": "src/surfaces/checkout/components/Choice.ts", "name": "ChoiceElementSlots", - "description": "", + "description": "The choice component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -50191,7 +50115,7 @@ "src/surfaces/checkout/components/ChoiceList.ts": { "filePath": "src/surfaces/checkout/components/ChoiceList.ts", "name": "ChoiceListElementProps", - "description": "", + "description": "Configure the following properties on the choice list component.", "isPublicDocs": true, "members": [ { @@ -50258,7 +50182,7 @@ "syntaxKind": "PropertySignature", "name": "values", "value": "string[]", - "description": "An array of `value` attributes for the currently selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.\n\nForm data captures the selected value strings only. Complex nested content inside choices is for display purposes and isn't included in form submissions.", + "description": "An array of the `value`s of the selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.", "isOptional": true }, { @@ -50266,7 +50190,7 @@ "syntaxKind": "PropertySignature", "name": "variant", "value": "'auto' | 'list' | 'inline' | 'block' | 'grid'", - "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.\n\nThe selected content slot is supported only in the default (stacked) variant. `inline` and `grid` ignore it.", + "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.", "isOptional": true, "defaultValue": "'auto'" } @@ -50296,7 +50220,7 @@ "src/surfaces/checkout/components/ChoiceList.ts": { "filePath": "src/surfaces/checkout/components/ChoiceList.ts", "name": "ChoiceListElementEvents", - "description": "", + "description": "The choice list component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -52634,7 +52558,7 @@ "syntaxKind": "PropertySignature", "name": "values", "value": "string[]", - "description": "An array of `value` attributes for the currently selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.\n\nForm data captures the selected value strings only. Complex nested content inside choices is for display purposes and isn't included in form submissions.", + "description": "An array of the `value`s of the selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.", "isOptional": true }, { @@ -52642,7 +52566,7 @@ "syntaxKind": "PropertySignature", "name": "variant", "value": "'auto' | 'list' | 'inline' | 'block' | 'grid'", - "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.\n\nThe selected content slot is supported only in the default (stacked) variant. `inline` and `grid` ignore it.", + "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.", "isOptional": true, "defaultValue": "'auto'" }, @@ -52743,7 +52667,7 @@ "syntaxKind": "PropertySignature", "name": "values", "value": "string[]", - "description": "An array of `value` attributes for the currently selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.\n\nForm data captures the selected value strings only. Complex nested content inside choices is for display purposes and isn't included in form submissions.", + "description": "An array of the `value`s of the selected options.\n\nThis is a convenience prop for setting the `selected` prop on child options.", "isOptional": true }, { @@ -52751,7 +52675,7 @@ "syntaxKind": "PropertySignature", "name": "variant", "value": "'auto' | 'list' | 'inline' | 'block' | 'grid'", - "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.\n\nThe selected content slot is supported only in the default (stacked) variant. `inline` and `grid` ignore it.", + "description": "The variant of the choice grid.\n\n- `auto`: The variant is determined by the context.\n- `list`: The choices are displayed in a list.\n- `inline`: The choices are displayed on the inline axis.\n- `block`: The choices are displayed on the block axis.\n- `grid`: The choices are displayed in a grid.", "isOptional": true, "defaultValue": "'auto'" } @@ -52763,7 +52687,7 @@ "src/surfaces/checkout/components/Clickable.ts": { "filePath": "src/surfaces/checkout/components/Clickable.ts", "name": "ClickableElementProps", - "description": "", + "description": "Configure the following properties on the clickable component.", "isPublicDocs": true, "members": [ { @@ -52779,7 +52703,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -52854,7 +52778,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -52863,7 +52787,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -52880,7 +52804,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -52922,7 +52846,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).", + "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)", "isOptional": true, "defaultValue": "''" }, @@ -53057,12 +52981,12 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the clickable component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" } ], - "value": "export interface ClickableElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n target?: Extract;\n /**\n * The behavioral type of the clickable component, which determines what action it performs when activated.\n *\n * - `submit`: Submits the nearest containing form.\n * - `button`: Performs no default action, relying on the `click` event handler for behavior.\n *\n * This property is ignored if `href` or `commandFor`/`command` is set.\n *\n * @default 'button'\n */\n type?: Extract;\n}" + "value": "export interface ClickableElementProps extends Pick {\n background?: Extract;\n border?: BorderShorthand;\n borderWidth?: MaybeAllValuesShorthandProperty | '';\n borderRadius?: MaybeAllValuesShorthandProperty>;\n target?: Extract;\n type?: Extract;\n}" } }, "ClickableProps": { @@ -53084,7 +53008,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -53145,7 +53069,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -53154,7 +53078,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -53171,7 +53095,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -53213,7 +53137,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).", + "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)", "isOptional": true, "defaultValue": "''" }, @@ -53372,7 +53296,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the clickable component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" } @@ -53418,7 +53342,7 @@ "src/surfaces/checkout/components/Clickable.ts": { "filePath": "src/surfaces/checkout/components/Clickable.ts", "name": "ClickableElementEvents", - "description": "", + "description": "The clickable component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -53468,7 +53392,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -54117,7 +54041,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -54126,7 +54050,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -54206,7 +54130,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -54599,7 +54523,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).", + "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)", "isOptional": true, "defaultValue": "''" }, @@ -55978,7 +55902,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'submit' | 'button'", - "description": "The behavioral type of the clickable component, which determines what action it performs when activated.\n\n- `submit`: Submits the nearest containing form.\n- `button`: Performs no default action, relying on the `click` event handler for behavior.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", + "description": "The behavioral type of the button component, which determines what action it performs when activated.\n- `'submit'`: Submits the nearest containing form.\n- `'button'`: Performs no default action, relying on the `click` event handler for behavior.\n- `'reset'`: Resets all fields in the nearest containing form to their default values.\n\nThis property is ignored if `href` or `commandFor`/`command` is set.", "isOptional": true, "defaultValue": "'button'" }, @@ -56005,7 +55929,7 @@ "src/surfaces/checkout/components/ClickableChip.ts": { "filePath": "src/surfaces/checkout/components/ClickableChip.ts", "name": "ClickableChipElementProps", - "description": "", + "description": "Configure the following properties on the clickable chip component.", "isPublicDocs": true, "members": [ { @@ -56021,7 +55945,7 @@ "syntaxKind": "PropertySignature", "name": "disabled", "value": "boolean", - "description": "Disables the chip, preventing all user interaction including clicks and removal. Disabled chips are visually dimmed to indicate they are not interactive.", + "description": "Disables the chip, disallowing any interaction.", "isOptional": true, "defaultValue": "false" }, @@ -56030,7 +55954,7 @@ "syntaxKind": "PropertySignature", "name": "hidden", "value": "boolean", - "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.\n\nWhen using the `removable` variant, keep `hidden` synced with your app state. If `hidden` isn't updated after the chip is removed, the chip can become permanently hidden.", + "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.", "isOptional": true, "defaultValue": "false" }, @@ -56055,7 +55979,7 @@ "syntaxKind": "PropertySignature", "name": "removable", "value": "boolean", - "description": "Whether the chip displays a remove button, allowing users to dismiss it. When `true`, clicking the remove button fires the `remove` event.", + "description": "Whether the chip is removable.", "isOptional": true, "defaultValue": "false" } @@ -56074,7 +55998,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterHide", "value": "(event: Event) => void", - "description": "A callback fired when the chip has fully hidden after a removal animation.\n\nThe `hidden` property will be `true` when this event fires.", + "description": "Event handler when the chip has fully hidden.\n\nThe `hidden` property will be `true` when this event fires.", "isOptional": true }, { @@ -56082,7 +56006,7 @@ "syntaxKind": "PropertySignature", "name": "onClick", "value": "(event: Event) => void", - "description": "A callback fired when the chip is clicked. Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", + "description": "Callback when the chip is clicked.", "isOptional": true }, { @@ -56090,7 +56014,7 @@ "syntaxKind": "PropertySignature", "name": "onRemove", "value": "(event: Event) => void", - "description": "A callback fired when the chip is removed by the user clicking the remove button.", + "description": "Callback when the chip is removed.", "isOptional": true } ], @@ -56101,7 +56025,7 @@ "src/surfaces/checkout/components/ClickableChip.ts": { "filePath": "src/surfaces/checkout/components/ClickableChip.ts", "name": "ClickableChipElementEvents", - "description": "", + "description": "The clickable chip component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -56136,7 +56060,7 @@ "src/surfaces/checkout/components/ClickableChip.ts": { "filePath": "src/surfaces/checkout/components/ClickableChip.ts", "name": "ClickableChipElementSlots", - "description": "", + "description": "The clickable chip component supports slots for additional content placement. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -56144,11 +56068,11 @@ "syntaxKind": "PropertySignature", "name": "graphic", "value": "HTMLElement", - "description": "An optional graphic displayed at the start of the chip, such as an icon to visually reinforce the chip's label. Only the `s-icon` element and its `type` attribute are supported.", + "description": "The graphic to display inside of the chip.\n\nOnly `s-icon` element and its `type` attribute are supported.", "isOptional": true } ], - "value": "export interface ClickableChipElementSlots {\n /**\n * An optional graphic displayed at the start of the chip, such as an icon to visually reinforce the chip's label. Only the `s-icon` element and its `type` attribute are supported.\n */\n graphic?: HTMLElement;\n}" + "value": "export interface ClickableChipElementSlots {\n /**\n * The graphic to display inside of the chip.\n *\n * Only `s-icon` element and its `type` attribute are supported.\n */\n graphic?: HTMLElement;\n}" } }, "ClickableChipElement": { @@ -56814,7 +56738,7 @@ "syntaxKind": "PropertySignature", "name": "disabled", "value": "boolean", - "description": "Disables the chip, preventing all user interaction including clicks and removal. Disabled chips are visually dimmed to indicate they are not interactive.", + "description": "Disables the chip, disallowing any interaction.", "isOptional": true, "defaultValue": "false" }, @@ -57076,7 +57000,7 @@ "syntaxKind": "PropertySignature", "name": "hidden", "value": "boolean", - "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.\n\nWhen using the `removable` variant, keep `hidden` synced with your app state. If `hidden` isn't updated after the chip is removed, the chip can become permanently hidden.", + "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.", "isOptional": true, "defaultValue": "false" }, @@ -58191,7 +58115,7 @@ "syntaxKind": "PropertySignature", "name": "removable", "value": "boolean", - "description": "Whether the chip displays a remove button, allowing users to dismiss it. When `true`, clicking the remove button fires the `remove` event.", + "description": "Whether the chip is removable.", "isOptional": true, "defaultValue": "false" }, @@ -58506,7 +58430,7 @@ "syntaxKind": "PropertySignature", "name": "disabled", "value": "boolean", - "description": "Disables the chip, preventing all user interaction including clicks and removal. Disabled chips are visually dimmed to indicate they are not interactive.", + "description": "Disables the chip, disallowing any interaction.", "isOptional": true, "defaultValue": "false" }, @@ -58515,7 +58439,7 @@ "syntaxKind": "PropertySignature", "name": "hidden", "value": "boolean", - "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.\n\nWhen using the `removable` variant, keep `hidden` synced with your app state. If `hidden` isn't updated after the chip is removed, the chip can become permanently hidden.", + "description": "Determines whether the chip is hidden.\n\nIf this property is being set on each framework render (as in 'controlled' usage), and the chip is `removable`, ensure you update app state for this property when the `remove` event fires.\n\nIf the chip is not `removable`, it can still be hidden by setting this property.", "isOptional": true, "defaultValue": "false" }, @@ -58540,7 +58464,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterHide", "value": "(event: Event) => void", - "description": "A callback fired when the chip has fully hidden after a removal animation.\n\nThe `hidden` property will be `true` when this event fires.", + "description": "Event handler when the chip has fully hidden.\n\nThe `hidden` property will be `true` when this event fires.", "isOptional": true }, { @@ -58548,7 +58472,7 @@ "syntaxKind": "PropertySignature", "name": "onClick", "value": "(event: Event) => void", - "description": "A callback fired when the chip is clicked. Learn more about the [click event](https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event).", + "description": "Callback when the chip is clicked.", "isOptional": true }, { @@ -58556,7 +58480,7 @@ "syntaxKind": "PropertySignature", "name": "onRemove", "value": "(event: Event) => void", - "description": "A callback fired when the chip is removed by the user clicking the remove button.", + "description": "Callback when the chip is removed.", "isOptional": true }, { @@ -58564,7 +58488,7 @@ "syntaxKind": "PropertySignature", "name": "removable", "value": "boolean", - "description": "Whether the chip displays a remove button, allowing users to dismiss it. When `true`, clicking the remove button fires the `remove` event.", + "description": "Whether the chip is removable.", "isOptional": true, "defaultValue": "false" } @@ -58576,7 +58500,7 @@ "src/surfaces/checkout/components/ClipboardItem.ts": { "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", "name": "ClipboardItemElementProps", - "description": "", + "description": "Configure the following properties on the clipboard item component.", "isPublicDocs": true, "members": [ { @@ -58592,7 +58516,7 @@ "syntaxKind": "PropertySignature", "name": "text", "value": "string", - "description": "Plain text to be written to the clipboard.\n\nRich text, HTML, and binary content aren't supported.", + "description": "Plain text to be written to the clipboard.", "isOptional": true, "defaultValue": "''" } @@ -58630,7 +58554,7 @@ "src/surfaces/checkout/components/ClipboardItem.ts": { "filePath": "src/surfaces/checkout/components/ClipboardItem.ts", "name": "ClipboardItemElementEvents", - "description": "", + "description": "The clipboard item component provides event callbacks for handling copy interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -60890,7 +60814,7 @@ "syntaxKind": "PropertySignature", "name": "text", "value": "string", - "description": "Plain text to be written to the clipboard.\n\nRich text, HTML, and binary content aren't supported.", + "description": "Plain text to be written to the clipboard.", "isOptional": true, "defaultValue": "''" }, @@ -60990,7 +60914,7 @@ "syntaxKind": "PropertySignature", "name": "text", "value": "string", - "description": "Plain text to be written to the clipboard.\n\nRich text, HTML, and binary content aren't supported.", + "description": "Plain text to be written to the clipboard.", "isOptional": true, "defaultValue": "''" } @@ -61002,7 +60926,7 @@ "src/surfaces/checkout/components/ConsentCheckbox.ts": { "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", "name": "ConsentCheckboxElementProps", - "description": "", + "description": "Configure the following properties on the consent checkbox component.", "isPublicDocs": true, "members": [ { @@ -61027,7 +60951,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -61036,7 +60960,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -61093,8 +61017,8 @@ "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -61106,7 +61030,16 @@ "isOptional": true } ], - "value": "export interface ConsentCheckboxElementProps extends Pick {\n command?: Extract;\n /**\n * The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n *\n * - `sms-marketing`: Represents the policy for SMS marketing consent.\n */\n policy?: ConsentCheckboxProps$1['policy'];\n}" + "value": "export interface ConsentCheckboxElementProps extends Pick {\n command?: Extract;\n}" + } + }, + "ConsentPolicy": { + "src/surfaces/checkout/components/components.ts": { + "filePath": "src/surfaces/checkout/components/components.ts", + "syntaxKind": "TypeAliasDeclaration", + "name": "ConsentPolicy", + "value": "\"sms-marketing\"", + "description": "" } }, "ConsentCheckboxEvents": { @@ -61131,7 +61064,7 @@ "src/surfaces/checkout/components/ConsentCheckbox.ts": { "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", "name": "ConsentCheckboxElementEvents", - "description": "", + "description": "The consent checkbox component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -61762,7 +61695,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -61771,7 +61704,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -63155,8 +63088,8 @@ "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -63552,7 +63485,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -63561,7 +63494,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -63626,8 +63559,8 @@ "filePath": "src/surfaces/checkout/components/ConsentCheckbox.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -63748,9 +63681,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -66176,9 +66109,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -66345,9 +66278,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -66365,7 +66298,7 @@ "src/surfaces/checkout/components/ConsentPhoneField.ts": { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", "name": "ConsentPhoneFieldElementProps", - "description": "", + "description": "Configure the following properties on the consent phone field component.", "isPublicDocs": true, "members": [ { @@ -66449,8 +66382,8 @@ "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -66476,9 +66409,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -66489,7 +66422,7 @@ "isOptional": true } ], - "value": "export interface ConsentPhoneFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n /**\n * The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n *\n * - `sms-marketing`: Represents the policy for SMS marketing consent.\n */\n policy?: ConsentPhoneFieldProps$1['policy'];\n}" + "value": "export interface ConsentPhoneFieldElementProps extends Pick {\n /**\n * @deprecated Use `label` instead.\n * @private\n */\n placeholder?: string;\n}" } }, "ConsentPhoneFieldEvents": { @@ -66538,7 +66471,7 @@ "src/surfaces/checkout/components/ConsentPhoneField.ts": { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", "name": "ConsentPhoneFieldElementEvents", - "description": "", + "description": "The consent phone field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -66692,8 +66625,8 @@ "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -66719,9 +66652,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -66739,7 +66672,7 @@ "src/surfaces/checkout/components/ConsentPhoneField.ts": { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", "name": "ConsentPhoneFieldElementSlots", - "description": "", + "description": "The consent phone field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -66873,8 +66806,8 @@ "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", "syntaxKind": "PropertySignature", "name": "policy", - "value": "'sms-marketing'", - "description": "The policy for which buyer consent is being collected. Used by the [consent checkbox](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-checkbox) and [consent phone field](/docs/api/{API_NAME}/{API_VERSION}/web-components/forms/consent-phone-field) components to identify the type of marketing permission requested.\n\n- `sms-marketing`: Represents the policy for SMS marketing consent.", + "value": "ConsentPolicy", + "description": "The policy for which user consent is being collected.", "isOptional": true }, { @@ -66900,9 +66833,9 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'mobile' | ''", - "description": "The type of phone number to collect. Specific styling may be applied to each type to provide extra guidance to users. No additional validation is performed based on the type.\n\nStyling hint for the input keyboard. Doesn't validate the phone number format. Implement validation in your extension and use the `error` prop to show results.", + "description": "The type of number to collect.\n\nSpecific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.", "isOptional": true, - "defaultValue": "''" + "defaultValue": "'' meaning no specific kind of phone number" }, { "filePath": "src/surfaces/checkout/components/ConsentPhoneField.ts", @@ -66920,7 +66853,7 @@ "src/surfaces/checkout/components/DateField.ts": { "filePath": "src/surfaces/checkout/components/DateField.ts", "name": "DateFieldElementProps", - "description": "", + "description": "Configure the following properties on the date field component.", "isPublicDocs": true, "members": [ { @@ -66928,7 +66861,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -66949,7 +66882,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -67004,7 +66937,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -67164,7 +67097,7 @@ "syntaxKind": "PropertySignature", "name": "onInvalid", "value": "(event: Event) => void", - "description": "Callback when the field has an invalid date. This callback will be called, if the date typed is invalid or disabled.\n\nDates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:\n- 2021-02-31: February doesn’t have 31 days\n- 2021-02-00: The day can’t be 00\n\nDisallowed dates are considered invalid.\n\nThis callback fires only when the user finishes editing the date, right after the `change` callback. The field isn't validated on every change to the input. Once the user has finished editing the field (typically by blurring it), the field is validated and the callback fires if the value is invalid.", + "description": "Callback when the field has an invalid date. This callback will be called, if the date typed is invalid or disabled.\n\nDates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:\n- 2021-02-31: February doesn’t have 31 days\n- 2021-02-00: The day can’t be 00\n\nDisallowed dates are considered invalid.\n\nIt’s important to note that this callback will be called only when the user **finishes editing** the date, and it’s called right after the `onChange` callback. The field is **not** validated on every change to the input. Once the buyer has signalled that they have finished editing the field (typically, by blurring the field), the field gets validated and the callback is run if the value is invalid.", "isOptional": true }, { @@ -67183,7 +67116,7 @@ "src/surfaces/checkout/components/DateField.ts": { "filePath": "src/surfaces/checkout/components/DateField.ts", "name": "DateFieldElementEvents", - "description": "", + "description": "The date field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -67277,7 +67210,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -67298,7 +67231,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -67969,7 +67902,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -69714,7 +69647,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -69735,7 +69668,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -69790,7 +69723,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -69896,7 +69829,7 @@ "syntaxKind": "PropertySignature", "name": "onInvalid", "value": "(event: Event) => void", - "description": "Callback when the field has an invalid date. This callback will be called, if the date typed is invalid or disabled.\n\nDates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:\n- 2021-02-31: February doesn’t have 31 days\n- 2021-02-00: The day can’t be 00\n\nDisallowed dates are considered invalid.\n\nThis callback fires only when the user finishes editing the date, right after the `change` callback. The field isn't validated on every change to the input. Once the user has finished editing the field (typically by blurring it), the field is validated and the callback fires if the value is invalid.", + "description": "Callback when the field has an invalid date. This callback will be called, if the date typed is invalid or disabled.\n\nDates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:\n- 2021-02-31: February doesn’t have 31 days\n- 2021-02-00: The day can’t be 00\n\nDisallowed dates are considered invalid.\n\nIt’s important to note that this callback will be called only when the user **finishes editing** the date, and it’s called right after the `onChange` callback. The field is **not** validated on every change to the input. Once the buyer has signalled that they have finished editing the field (typically, by blurring the field), the field gets validated and the callback is run if the value is invalid.", "isOptional": true }, { @@ -69959,7 +69892,7 @@ "src/surfaces/checkout/components/DatePicker.ts": { "filePath": "src/surfaces/checkout/components/DatePicker.ts", "name": "DatePickerElementProps", - "description": "", + "description": "Configure the following properties on the date picker component.", "isPublicDocs": true, "members": [ { @@ -69967,7 +69900,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -69988,7 +69921,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -70035,7 +69968,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -70102,7 +70035,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "string", - "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.\n\nSingle dates use ISO 8601 format (`YYYY-MM-DD`); ranges use `YYYY-MM-DD--YYYY-MM-DD`. Locale-specific formats aren't supported.", + "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.", "isOptional": true, "defaultValue": "\"\"" }, @@ -70172,7 +70105,7 @@ "src/surfaces/checkout/components/DatePicker.ts": { "filePath": "src/surfaces/checkout/components/DatePicker.ts", "name": "DatePickerElementEvents", - "description": "", + "description": "The date picker component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -70258,7 +70191,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -70279,7 +70212,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -70942,7 +70875,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -72625,7 +72558,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "string", - "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.\n\nSingle dates use ISO 8601 format (`YYYY-MM-DD`); ranges use `YYYY-MM-DD--YYYY-MM-DD`. Locale-specific formats aren't supported.", + "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.", "isOptional": true, "defaultValue": "\"\"" }, @@ -72667,7 +72600,7 @@ "syntaxKind": "PropertySignature", "name": "allow", "value": "string", - "description": "Restricts which dates the user can select. Accepts a comma-separated list of dates and date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of allowed dates in `YYYY-MM-DD` format.", + "description": "Dates that can be selected.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` allows all dates.\n\n- Dates in `YYYY-MM-DD` format allow a single date.\n- Dates in `YYYY-MM` format allow a whole month.\n- Dates in `YYYY` format allow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -72688,7 +72621,7 @@ "syntaxKind": "PropertySignature", "name": "allowDays", "value": "string", - "description": "Restricts which days of the week the user can select. Only dates that fall on an allowed day AND pass the `allow`/`disallow` filters are selectable. For example, setting `allowedDays` to `'mon, wed, fri'` with `allow` set to `'2024-06'` restricts selection to Mondays, Wednesdays, and Fridays in June 2024.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", + "description": "Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.\n\nA comma-separated list of days. Whitespace is allowed after commas.\n\nThe default `''` has no effect on the result of `allow` and `disallow`.\n\nDays are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -72735,7 +72668,7 @@ "syntaxKind": "PropertySignature", "name": "disallow", "value": "string", - "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.\n\nComma-separated list of disallowed dates in `YYYY-MM-DD` format.", + "description": "Dates that cannot be selected. These subtract from `allow`.\n\nA comma-separated list of dates, date ranges. Whitespace is allowed after commas.\n\nThe default `''` has no effect on `allow`.\n\n- Dates in `YYYY-MM-DD` format disallow a single date.\n- Dates in `YYYY-MM` format disallow a whole month.\n- Dates in `YYYY` format disallow a whole year.\n- Ranges are expressed as `start--end`. - Ranges are inclusive.\n - If either `start` or `end` is omitted, the range is unbounded in that direction.\n - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.\n So `2024--` is equivalent to `2024-01-01--`.\n - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.\n So `--2024` is equivalent to `--2024-12-31`.\n - Whitespace is allowed either side of `--`.", "isOptional": true, "defaultValue": "\"\"", "examples": [ @@ -72842,7 +72775,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "string", - "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.\n\nSingle dates use ISO 8601 format (`YYYY-MM-DD`); ranges use `YYYY-MM-DD--YYYY-MM-DD`. Locale-specific formats aren't supported.", + "description": "Current selected value.\n\nThe default means no date is selected.\n\nIf the provided value is invalid, no date is selected.\n\nOtherwise:\n\n- If `type=\"single\"`, this is a date in `YYYY-MM-DD` format.\n- If `type=\"multiple\"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.\n- If `type=\"range\"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.", "isOptional": true, "defaultValue": "\"\"" }, @@ -72862,7 +72795,7 @@ "src/surfaces/checkout/components/Details.ts": { "filePath": "src/surfaces/checkout/components/Details.ts", "name": "DetailsElementProps", - "description": "", + "description": "The element props interface for the Details component.", "isPublicDocs": true, "members": [ { @@ -72870,7 +72803,7 @@ "syntaxKind": "PropertySignature", "name": "defaultOpen", "value": "boolean", - "description": "Whether the element should be open when it first renders. Use this for uncontrolled behavior where the component manages its own open state after the initial render.", + "description": "Indicates whether the element should be open by default.\n\nThis reflects to the `open` attribute.", "isOptional": true, "defaultValue": "false" }, @@ -72887,7 +72820,7 @@ "syntaxKind": "PropertySignature", "name": "open", "value": "boolean", - "description": "Whether the element is currently open and showing its content. Use this for controlled behavior where you manage the open state yourself.", + "description": "Whether the element is open.\n\nThis does not reflect to any attribute.", "isOptional": true, "defaultValue": "false" }, @@ -72896,7 +72829,7 @@ "syntaxKind": "PropertySignature", "name": "toggleTransition", "value": "'none' | 'auto'", - "description": "Sets the animation transition between the open and closed states.\n\n- `none`: Disables all transition animations.\n- `auto`: Uses the default transition animation.", + "description": "Sets the transition between the two states.", "isOptional": true, "defaultValue": "'auto'" } @@ -72915,7 +72848,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -72923,7 +72856,7 @@ "syntaxKind": "PropertySignature", "name": "onToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.", + "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true } ], @@ -72934,7 +72867,7 @@ "src/surfaces/checkout/components/Details.ts": { "filePath": "src/surfaces/checkout/components/Details.ts", "name": "DetailsElementEvents", - "description": "", + "description": "The events interface for the Details component.", "isPublicDocs": true, "members": [ { @@ -72942,7 +72875,7 @@ "syntaxKind": "PropertySignature", "name": "aftertoggle", "value": "CallbackEventListener", - "description": "A callback fired when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "Callback fired when the element state changes **after** any animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.", "isOptional": true }, { @@ -72950,11 +72883,11 @@ "syntaxKind": "PropertySignature", "name": "toggle", "value": "CallbackEventListener", - "description": "A callback fired immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.", + "description": "Callback straight after the element state changes.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.", "isOptional": true } ], - "value": "export interface DetailsElementEvents {\n /**\n * A callback fired immediately when the element state changes, before any animations.\n *\n * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.\n */\n toggle?: CallbackEventListener;\n /**\n * A callback fired when the element state changes, after any toggle animations have finished.\n *\n * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * Learn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).\n */\n aftertoggle?: CallbackEventListener;\n}" + "value": "export interface DetailsElementEvents {\n /**\n * Callback straight after the element state changes.\n *\n * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState\n */\n toggle?: CallbackEventListener;\n /**\n * Callback fired when the element state changes **after** any animations have finished.\n *\n * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the\n * `newState` property will be set to `open`.\n * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the\n * `newState` will be `closed`.\n *\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState\n * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState\n */\n aftertoggle?: CallbackEventListener;\n}" } }, "DetailsElement": { @@ -75253,7 +75186,7 @@ "syntaxKind": "PropertySignature", "name": "defaultOpen", "value": "boolean", - "description": "Whether the element should be open when it first renders. Use this for uncontrolled behavior where the component manages its own open state after the initial render.", + "description": "Indicates whether the element should be open by default.\n\nThis reflects to the `open` attribute.", "isOptional": true, "defaultValue": "false" }, @@ -75270,7 +75203,7 @@ "syntaxKind": "PropertySignature", "name": "onAfterToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`newState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState` property](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", + "description": "A callback that fires when the element state changes, after any toggle animations have finished.\n\n- If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -75278,7 +75211,7 @@ "syntaxKind": "PropertySignature", "name": "onToggle", "value": "(event: ToggleEvent$1) => void", - "description": "A callback fired immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then the `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [`toggle` event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), and the [`newState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState) and [`oldState`](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState) properties.", + "description": "A callback that fires immediately when the element state changes, before any animations.\n\n- If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the `newState` property will be set to `open`.\n- If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the `newState` will be `closed`.\n\nLearn more about the [toggle event](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event), [ToggleEvent.newState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState), and [ToggleEvent.oldState](https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState).", "isOptional": true }, { @@ -75286,7 +75219,7 @@ "syntaxKind": "PropertySignature", "name": "open", "value": "boolean", - "description": "Whether the element is currently open and showing its content. Use this for controlled behavior where you manage the open state yourself.", + "description": "Whether the element is open.\n\nThis does not reflect to any attribute.", "isOptional": true, "defaultValue": "false" }, @@ -75295,7 +75228,7 @@ "syntaxKind": "PropertySignature", "name": "toggleTransition", "value": "'none' | 'auto'", - "description": "Sets the animation transition between the open and closed states.\n\n- `none`: Disables all transition animations.\n- `auto`: Uses the default transition animation.", + "description": "Sets the transition between the two states.", "isOptional": true, "defaultValue": "'auto'" } @@ -75315,7 +75248,7 @@ "syntaxKind": "PropertySignature", "name": "direction", "value": "'inline' | 'block'", - "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally. Requires a parent with a defined height to render visibly.", + "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally.", "isOptional": true, "defaultValue": "'inline'" }, @@ -75986,7 +75919,7 @@ "syntaxKind": "PropertySignature", "name": "direction", "value": "'inline' | 'block'", - "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally. Requires a parent with a defined height to render visibly.", + "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally.", "isOptional": true, "defaultValue": "'inline'" }, @@ -77637,7 +77570,7 @@ "syntaxKind": "PropertySignature", "name": "direction", "value": "'inline' | 'block'", - "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally. Requires a parent with a defined height to render visibly.", + "description": "The orientation of the divider, using [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).\n\n- `inline`: A horizontal divider that separates content stacked vertically.\n- `block`: A vertical divider that separates content arranged horizontally.", "isOptional": true, "defaultValue": "'inline'" }, @@ -77657,7 +77590,7 @@ "src/surfaces/checkout/components/DropZone.ts": { "filePath": "src/surfaces/checkout/components/DropZone.ts", "name": "DropZoneElementProps", - "description": "", + "description": "Configure the following properties on the drop zone component.", "isPublicDocs": true, "members": [ { @@ -77787,7 +77720,7 @@ "src/surfaces/checkout/components/DropZone.ts": { "filePath": "src/surfaces/checkout/components/DropZone.ts", "name": "DropZoneElementEvents", - "description": "", + "description": "The drop zone component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -80311,7 +80244,7 @@ "src/surfaces/checkout/components/EmailField.ts": { "filePath": "src/surfaces/checkout/components/EmailField.ts", "name": "EmailFieldElementProps", - "description": "", + "description": "Configure the following properties on the email field component.", "isPublicDocs": true, "members": [ { @@ -80485,7 +80418,7 @@ "src/surfaces/checkout/components/EmailField.ts": { "filePath": "src/surfaces/checkout/components/EmailField.ts", "name": "EmailFieldElementEvents", - "description": "", + "description": "The email field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -80528,7 +80461,7 @@ "src/surfaces/checkout/components/EmailField.ts": { "filePath": "src/surfaces/checkout/components/EmailField.ts", "name": "EmailFieldElementSlots", - "description": "", + "description": "The email field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -83102,7 +83035,7 @@ "src/surfaces/checkout/components/Form.ts": { "filePath": "src/surfaces/checkout/components/Form.ts", "name": "FormElementProps", - "description": "", + "description": "Configure the following properties on the form component.", "isPublicDocs": true, "members": [ { @@ -83150,7 +83083,7 @@ "src/surfaces/checkout/components/Form.ts": { "filePath": "src/surfaces/checkout/components/Form.ts", "name": "FormElementEvents", - "description": "", + "description": "The form component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -85568,7 +85501,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -85679,7 +85612,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -85912,7 +85845,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -86011,7 +85944,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -86253,7 +86186,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -87003,7 +86936,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -88854,7 +88787,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -88938,7 +88871,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -89117,7 +89050,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -89189,7 +89122,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -89368,7 +89301,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -90091,7 +90024,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -91863,7 +91796,7 @@ "src/surfaces/checkout/components/Heading.ts": { "filePath": "src/surfaces/checkout/components/Heading.ts", "name": "HeadingElementProps", - "description": "", + "description": "The element props interface for the Heading component.", "isPublicDocs": true, "members": [ { @@ -91871,7 +91804,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityRole", "value": "'heading' | 'none' | 'presentation'", - "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.\n\n- `presentation`: Removes semantic meaning, making the element purely decorative and ignored by screen readers.\n- `none`: Completely hides the element and its content from assistive technologies.", + "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.\n\n- `heading`: defines the element as a heading to a page or section.\n- `presentation`: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree.\n- `none`: a synonym for the `presentation` role.", "isOptional": true, "defaultValue": "'heading'" }, @@ -91898,7 +91831,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityRole", "value": "'heading' | 'none' | 'presentation'", - "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.\n\n- `presentation`: Removes semantic meaning, making the element purely decorative and ignored by screen readers.\n- `none`: Completely hides the element and its content from assistive technologies.", + "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.\n\n- `heading`: defines the element as a heading to a page or section.\n- `presentation`: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree.\n- `none`: a synonym for the `presentation` role.", "isOptional": true, "defaultValue": "'heading'" }, @@ -94193,7 +94126,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityRole", "value": "'heading' | 'none' | 'presentation'", - "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.\n\n- `presentation`: Removes semantic meaning, making the element purely decorative and ignored by screen readers.\n- `none`: Completely hides the element and its content from assistive technologies.", + "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.\n\n- `heading`: defines the element as a heading to a page or section.\n- `presentation`: the heading level will be stripped, and will prevent the element’s implicit ARIA semantics from being exposed to the accessibility tree.\n- `none`: a synonym for the `presentation` role.", "isOptional": true, "defaultValue": "'heading'" }, @@ -99287,7 +99220,7 @@ "src/surfaces/checkout/components/Link.ts": { "filePath": "src/surfaces/checkout/components/Link.ts", "name": "LinkElementProps", - "description": "", + "description": "Configure the following properties on the link component.", "isPublicDocs": true, "members": [ { @@ -99303,7 +99236,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -99312,7 +99245,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -99391,7 +99324,7 @@ "src/surfaces/checkout/components/Link.ts": { "filePath": "src/surfaces/checkout/components/Link.ts", "name": "LinkElementEvents", - "description": "", + "description": "The link component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -100013,7 +99946,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -100022,7 +99955,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -101771,7 +101704,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle' | '--copy'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -101780,7 +101713,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -101849,7 +101782,7 @@ "src/surfaces/checkout/components/ListItem.ts": { "filePath": "src/surfaces/checkout/components/ListItem.ts", "name": "ListItemElementProps", - "description": "", + "description": "The element props interface for the ListItem component.", "isPublicDocs": true, "members": [ { @@ -107647,7 +107580,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", + "description": "Sets the action the `commandFor` target should take when this marker is activated. See the documentation of particular components for the actions they support. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -107656,7 +107589,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", + "description": "The ID of a component that should respond to activations (for example, clicks) on this component. Refer to the `command` property for how to control the behavior of the target. Learn more about the [`commandfor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -107687,7 +107620,7 @@ "defaultValue": "0" } ], - "value": "export interface MapMarkerElementProps extends Pick {\n /**\n * Sets the action the `commandFor` target should take when this component is activated. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n *\n * - `--auto`: a default action for the target component.\n * - `--show`: shows the target component.\n * - `--hide`: hides the target component.\n * - `--toggle`: toggles the target component.\n *\n * @default '--auto'\n */\n command?: Extract;\n /**\n * The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n */\n commandFor?: MapMarkerProps$1['commandFor'];\n}" + "value": "export interface MapMarkerElementProps extends Pick {\n /**\n * Sets the action the `commandFor` target should take when this marker is activated. See the documentation of particular components for the actions they support. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n *\n * - `--auto`: a default action for the target component.\n * - `--show`: shows the target component.\n * - `--hide`: hides the target component.\n * - `--toggle`: toggles the target component.\n *\n * @default '--auto'\n */\n command?: Extract;\n /**\n * The ID of a component that should respond to activations (for example, clicks) on this component. Refer to the `command` property for how to control the behavior of the target. Learn more about the [`commandfor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n */\n commandFor?: MapMarkerProps$1['commandFor'];\n}" } }, "MapMarkerEvents": { @@ -107731,7 +107664,7 @@ "src/surfaces/checkout/components/MapMarker.ts": { "filePath": "src/surfaces/checkout/components/MapMarker.ts", "name": "MapMarkerElementSlots", - "description": "", + "description": "The named slots for the map marker component. Slots allow you to insert custom content into specific areas of the marker.", "isPublicDocs": true, "members": [ { @@ -108371,7 +108304,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", + "description": "Sets the action the `commandFor` target should take when this marker is activated. See the documentation of particular components for the actions they support. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -108380,7 +108313,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", + "description": "The ID of a component that should respond to activations (for example, clicks) on this component. Refer to the `command` property for how to control the behavior of the target. Learn more about the [`commandfor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -110131,7 +110064,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", + "description": "Sets the action the `commandFor` target should take when this marker is activated. See the documentation of particular components for the actions they support. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).\n\n- `--auto`: a default action for the target component.\n- `--show`: shows the target component.\n- `--hide`: hides the target component.\n- `--toggle`: toggles the target component.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -110140,7 +110073,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", + "description": "The ID of a component that should respond to activations (for example, clicks) on this component. Refer to the `command` property for how to control the behavior of the target. Learn more about the [`commandfor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -112766,7 +112699,7 @@ "src/surfaces/checkout/components/MoneyField.ts": { "filePath": "src/surfaces/checkout/components/MoneyField.ts", "name": "MoneyFieldElementProps", - "description": "", + "description": "Configure the following properties on the money field component.", "isPublicDocs": true, "members": [ { @@ -112939,7 +112872,7 @@ "src/surfaces/checkout/components/MoneyField.ts": { "filePath": "src/surfaces/checkout/components/MoneyField.ts", "name": "MoneyFieldElementEvents", - "description": "", + "description": "The money field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -113302,7 +113235,7 @@ "src/surfaces/checkout/components/NumberField.ts": { "filePath": "src/surfaces/checkout/components/NumberField.ts", "name": "NumberFieldElementProps", - "description": "", + "description": "Configure the following properties on the number field component.", "isPublicDocs": true, "members": [ { @@ -113352,7 +113285,7 @@ "filePath": "src/surfaces/checkout/components/NumberField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true, "defaultValue": "''" @@ -113530,7 +113463,7 @@ "src/surfaces/checkout/components/NumberField.ts": { "filePath": "src/surfaces/checkout/components/NumberField.ts", "name": "NumberFieldElementEvents", - "description": "", + "description": "The number field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -113573,7 +113506,7 @@ "src/surfaces/checkout/components/NumberField.ts": { "filePath": "src/surfaces/checkout/components/NumberField.ts", "name": "NumberFieldElementSlots", - "description": "", + "description": "The number field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -114552,7 +114485,7 @@ "filePath": "src/surfaces/checkout/components/NumberField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true }, @@ -116079,7 +116012,7 @@ "filePath": "src/surfaces/checkout/components/NumberField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true }, @@ -116246,7 +116179,7 @@ "src/surfaces/checkout/components/Option.ts": { "filePath": "src/surfaces/checkout/components/Option.ts", "name": "OptionElementProps", - "description": "", + "description": "Configure the following properties on the option component.", "isPublicDocs": true, "members": [ { @@ -118698,7 +118631,7 @@ "src/surfaces/checkout/components/OrderedList.ts": { "filePath": "src/surfaces/checkout/components/OrderedList.ts", "name": "OrderedListElementProps", - "description": "", + "description": "The element props interface for the OrderedList component.", "isPublicDocs": true, "members": [ { @@ -121021,7 +120954,7 @@ "src/surfaces/checkout/components/Paragraph.ts": { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "name": "ParagraphElementProps", - "description": "", + "description": "The element props interface for the Paragraph component.", "isPublicDocs": true, "members": [ { @@ -121029,7 +120962,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -121038,7 +120971,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -121047,7 +120980,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -121064,25 +120997,16 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, - { - "filePath": "src/surfaces/checkout/components/Paragraph.ts", - "syntaxKind": "PropertySignature", - "name": "textAlign", - "value": "'start' | 'end' | 'center' | 'auto'", - "description": "Sets the alignment of the text.", - "isOptional": true, - "defaultValue": "'auto'" - }, { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "syntaxKind": "PropertySignature", "name": "tone", "value": "'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -121091,12 +121015,12 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "ParagraphType", - "description": "The semantic type and styling treatment for the paragraph content.\n\nOther presentation properties on `s-paragraph` override the default styling.", + "description": "Provide semantic meaning and default styling to the paragraph.\n\nOther presentation properties on `s-paragraph` override the default styling.", "isOptional": true, "defaultValue": "'paragraph'" } ], - "value": "export interface ParagraphElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n /**\n * Sets the alignment of the text.\n * @see https://developer.mozilla.org/en-US/docs/Web/CSS/text-align\n *\n * @default 'auto'\n */\n textAlign?: 'start' | 'end' | 'center' | 'auto';\n}" + "value": "export interface ParagraphElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n}" } }, "ParagraphType": { @@ -121113,14 +121037,13 @@ "filePath": "src/surfaces/checkout/components/Paragraph.ts", "name": "ParagraphElement", "description": "", - "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -121717,7 +121640,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -121775,7 +121698,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -122150,7 +122073,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, @@ -123363,15 +123286,6 @@ "value": "3", "description": "node is a Text node." }, - { - "filePath": "src/surfaces/checkout/components/Paragraph.ts", - "syntaxKind": "PropertySignature", - "name": "textAlign", - "value": "'start' | 'end' | 'center' | 'auto'", - "description": "Sets the alignment of the text.", - "isOptional": true, - "defaultValue": "'auto'" - }, { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "syntaxKind": "GetAccessor", @@ -123405,7 +123319,7 @@ "syntaxKind": "PropertySignature", "name": "tone", "value": "'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -123421,7 +123335,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "ParagraphType", - "description": "The semantic type and styling treatment for the paragraph content.\n\nOther presentation properties on `s-paragraph` override the default styling.", + "description": "Provide semantic meaning and default styling to the paragraph.\n\nOther presentation properties on `s-paragraph` override the default styling.", "isOptional": true, "defaultValue": "'paragraph'" }, @@ -123449,14 +123363,13 @@ "filePath": "src/surfaces/checkout/components/Paragraph.ts", "name": "ParagraphProps", "description": "", - "isPublicDocs": true, "members": [ { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -123465,7 +123378,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -123474,7 +123387,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -123491,25 +123404,16 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, - { - "filePath": "src/surfaces/checkout/components/Paragraph.ts", - "syntaxKind": "PropertySignature", - "name": "textAlign", - "value": "'start' | 'end' | 'center' | 'auto'", - "description": "Sets the alignment of the text.", - "isOptional": true, - "defaultValue": "'auto'" - }, { "filePath": "src/surfaces/checkout/components/Paragraph.ts", "syntaxKind": "PropertySignature", "name": "tone", "value": "'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -123518,7 +123422,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "ParagraphType", - "description": "The semantic type and styling treatment for the paragraph content.\n\nOther presentation properties on `s-paragraph` override the default styling.", + "description": "Provide semantic meaning and default styling to the paragraph.\n\nOther presentation properties on `s-paragraph` override the default styling.", "isOptional": true, "defaultValue": "'paragraph'" } @@ -123530,7 +123434,7 @@ "src/surfaces/checkout/components/PasswordField.ts": { "filePath": "src/surfaces/checkout/components/PasswordField.ts", "name": "PasswordFieldElementProps", - "description": "", + "description": "Configure the following properties on the password field component.", "isPublicDocs": true, "members": [ { @@ -123694,7 +123598,7 @@ "src/surfaces/checkout/components/PasswordField.ts": { "filePath": "src/surfaces/checkout/components/PasswordField.ts", "name": "PasswordFieldElementEvents", - "description": "", + "description": "The password field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -123737,7 +123641,7 @@ "src/surfaces/checkout/components/PasswordField.ts": { "filePath": "src/surfaces/checkout/components/PasswordField.ts", "name": "PasswordFieldElementSlots", - "description": "", + "description": "The password field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -128708,7 +128612,7 @@ "src/surfaces/checkout/components/PhoneField.ts": { "filePath": "src/surfaces/checkout/components/PhoneField.ts", "name": "PhoneFieldElementEvents", - "description": "", + "description": "The phone field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -128751,7 +128655,7 @@ "src/surfaces/checkout/components/PhoneField.ts": { "filePath": "src/surfaces/checkout/components/PhoneField.ts", "name": "PhoneFieldElementSlots", - "description": "", + "description": "The phone field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -131338,7 +131242,7 @@ "src/surfaces/checkout/components/PressButton.ts": { "filePath": "src/surfaces/checkout/components/PressButton.ts", "name": "PressButtonElementProps", - "description": "", + "description": "Configure the following properties on the press button component.", "isPublicDocs": true, "members": [ { @@ -131452,7 +131356,7 @@ "src/surfaces/checkout/components/PressButton.ts": { "filePath": "src/surfaces/checkout/components/PressButton.ts", "name": "PressButtonElementEvents", - "description": "", + "description": "The press button component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -136396,7 +136300,7 @@ "syntaxKind": "PropertySignature", "name": "max", "value": "number", - "description": "The total amount of work the task requires. Must be a value greater than `0` and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", + "description": "The total amount of work the task requires. Must be a value greater than 0 and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", "isOptional": true, "defaultValue": "1" }, @@ -136414,11 +136318,11 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "number", - "description": "How much of the task has been completed. Must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", + "description": "How much of the task has been completed. Must be a valid floating point number between 0 and `max`, or between 0 and 1 if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", "isOptional": true } ], - "value": "export interface ProgressElementProps extends Pick {\n /**\n * A label announced by assistive technologies that describes what is progressing. Use this to provide context about the ongoing task, such as \"Loading order details\" or \"Uploading file\".\n */\n accessibilityLabel?: ProgressProps$1['accessibilityLabel'];\n /**\n * The total amount of work the task requires. Must be a value greater than `0` and a valid floating point number.\n *\n * Learn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).\n *\n * @default 1\n */\n max?: ProgressProps$1['max'];\n /**\n * The semantic meaning and color treatment of the progress indicator.\n *\n * - `auto`: Automatically determined based on context.\n * - `critical`: Indicates an urgent or error state requiring immediate attention.\n *\n * @default 'auto'\n */\n tone?: Extract;\n /**\n * How much of the task has been completed. Must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n *\n * Learn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).\n */\n value?: ProgressProps$1['value'];\n}" + "value": "export interface ProgressElementProps extends Pick {\n /**\n * A label announced by assistive technologies that describes what is progressing. Use this to provide context about the ongoing task, such as \"Loading order details\" or \"Uploading file\".\n */\n accessibilityLabel?: ProgressProps$1['accessibilityLabel'];\n /**\n * The total amount of work the task requires. Must be a value greater than 0 and a valid floating point number.\n *\n * Learn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).\n *\n * @default 1\n */\n max?: ProgressProps$1['max'];\n /**\n * The semantic meaning and color treatment of the progress indicator.\n *\n * - `auto`: Automatically determined based on context.\n * - `critical`: Indicates an urgent or error state requiring immediate attention.\n *\n * @default 'auto'\n */\n tone?: Extract;\n /**\n * How much of the task has been completed. Must be a valid floating point number between 0 and `max`, or between 0 and 1 if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n *\n * Learn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).\n */\n value?: ProgressProps$1['value'];\n}" } }, "ProgressElement": { @@ -137499,7 +137403,7 @@ "syntaxKind": "PropertySignature", "name": "max", "value": "number", - "description": "The total amount of work the task requires. Must be a value greater than `0` and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", + "description": "The total amount of work the task requires. Must be a value greater than 0 and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", "isOptional": true, "defaultValue": "1" }, @@ -138719,7 +138623,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "number", - "description": "How much of the task has been completed. Must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", + "description": "How much of the task has been completed. Must be a valid floating point number between 0 and `max`, or between 0 and 1 if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", "isOptional": true }, { @@ -138768,7 +138672,7 @@ "syntaxKind": "PropertySignature", "name": "max", "value": "number", - "description": "The total amount of work the task requires. Must be a value greater than `0` and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", + "description": "The total amount of work the task requires. Must be a value greater than 0 and a valid floating point number.\n\nLearn more about the [max attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#max).", "isOptional": true, "defaultValue": "1" }, @@ -138786,7 +138690,7 @@ "syntaxKind": "PropertySignature", "name": "value", "value": "number", - "description": "How much of the task has been completed. Must be a valid floating point number between `0` and `max`, or between `0` and `1` if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", + "description": "How much of the task has been completed. Must be a valid floating point number between 0 and `max`, or between 0 and 1 if `max` is omitted. When no value is set, the progress bar is indeterminate, indicating an ongoing activity with no estimated completion time.\n\nLearn more about the [value attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#value).", "isOptional": true } ], @@ -143685,7 +143589,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -143769,7 +143673,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -143930,7 +143834,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -144002,7 +143906,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -144172,7 +144076,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -144895,7 +144799,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -149022,7 +148926,7 @@ "src/surfaces/checkout/components/Select.ts": { "filePath": "src/surfaces/checkout/components/Select.ts", "name": "SelectElementProps", - "description": "", + "description": "Configure the following properties on the select component.", "isPublicDocs": true, "members": [ { @@ -149142,7 +149046,7 @@ "src/surfaces/checkout/components/Select.ts": { "filePath": "src/surfaces/checkout/components/Select.ts", "name": "SelectElementEvents", - "description": "", + "description": "The select component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -154248,7 +154152,7 @@ "src/surfaces/checkout/components/SkeletonParagraph.ts": { "filePath": "src/surfaces/checkout/components/SkeletonParagraph.ts", "name": "SkeletonParagraphElementProps", - "description": "", + "description": "The element props interface for the SkeletonParagraph component.", "isPublicDocs": true, "members": [ { @@ -159099,7 +159003,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -159377,7 +159281,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -160306,7 +160210,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -162087,7 +161991,7 @@ "src/surfaces/checkout/components/Summary.ts": { "filePath": "src/surfaces/checkout/components/Summary.ts", "name": "SummaryElementProps", - "description": "", + "description": "The element props interface for the Summary component.", "isPublicDocs": true, "members": [ { @@ -164410,7 +164314,7 @@ "src/surfaces/checkout/components/Switch.ts": { "filePath": "src/surfaces/checkout/components/Switch.ts", "name": "SwitchElementProps", - "description": "", + "description": "Configure the following properties on the switch component.", "isPublicDocs": true, "members": [ { @@ -164435,7 +164339,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -164444,7 +164348,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -164523,7 +164427,7 @@ "src/surfaces/checkout/components/Switch.ts": { "filePath": "src/surfaces/checkout/components/Switch.ts", "name": "SwitchElementEvents", - "description": "", + "description": "The switch component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -165154,7 +165058,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -165163,7 +165067,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -166928,7 +166832,7 @@ "syntaxKind": "PropertySignature", "name": "command", "value": "'--auto' | '--show' | '--hide' | '--toggle'", - "description": "Sets the action the `commandFor` target should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type. Learn more about the [`command` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command).", + "description": "Sets the action the [`command`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#command) should take when this component is activated. Available options:\n\n- `'--auto'`: Performs the default action appropriate for the target component.\n- `'--show'`: Displays the target component if it's currently hidden.\n- `'--hide'`: Conceals the target component from view.\n- `'--toggle'`: Alternates the target component between visible and hidden states.\n- `'--copy'`: Copies the target clipboard item.\n\nThe supported actions vary by target component type.", "isOptional": true, "defaultValue": "'--auto'" }, @@ -166937,7 +166841,7 @@ "syntaxKind": "PropertySignature", "name": "commandFor", "value": "string", - "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).\n\nWhen both `commandFor` and `href` are set, `commandFor` takes precedence. The command runs and the link doesn't navigate.", + "description": "The ID of the component to control when this component is activated. Pair with the `command` property to specify what action to perform on the target component. Learn more about the [`commandFor` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#commandfor).", "isOptional": true }, { @@ -167006,7 +166910,7 @@ "src/surfaces/checkout/components/Text.ts": { "filePath": "src/surfaces/checkout/components/Text.ts", "name": "TextElementProps", - "description": "", + "description": "The element props interface for the Text component.", "isPublicDocs": true, "members": [ { @@ -167014,7 +166918,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -167023,7 +166927,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -167032,7 +166936,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -167041,7 +166945,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -167058,7 +166962,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, @@ -167067,7 +166971,7 @@ "syntaxKind": "PropertySignature", "name": "tone", "value": "'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -167076,12 +166980,12 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'address' | 'mark' | 'small' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'", - "description": "The semantic type and styling treatment for the text content.\n\nOther presentation properties on `s-text` override the default styling.\n\n- `address`: A semantic type that indicates the text is contact information. Typically used for addresses.\n- `redundant`: A semantic type that indicates the text is no longer accurate or no longer relevant. One such use-case is discounted prices.\n- `mark`: A semantic type that indicates the text is marked or highlighted and relevant to the user's current action.\n- `emphasis`: A semantic type that indicates emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.\n- `offset`: A semantic type that indicates an offset from the normal prose of the text.\n- `strong`: A semantic type that indicates strong importance, seriousness, or urgency.\n- `small`: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.\n- `generic`: No additional semantics or styling is applied.", + "description": "Provide semantic meaning and default styling to the text.\n\nOther presentation properties on Text override the default styling.", "isOptional": true, "defaultValue": "'generic'" } ], - "value": "export interface TextElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n /**\n * The semantic type and styling treatment for the text content.\n *\n * Other presentation properties on `s-text` override the default styling.\n *\n * - `address`: A semantic type that indicates the text is contact information. Typically used for addresses.\n * - `redundant`: A semantic type that indicates the text is no longer accurate or no longer relevant. One such use-case is discounted prices.\n * - `mark`: A semantic type that indicates the text is marked or highlighted and relevant to the user's current action.\n * - `emphasis`: A semantic type that indicates emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.\n * - `offset`: A semantic type that indicates an offset from the normal prose of the text.\n * - `strong`: A semantic type that indicates strong importance, seriousness, or urgency.\n * - `small`: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.\n * - `generic`: No additional semantics or styling is applied.\n *\n * @default 'generic'\n */\n type?: Extract;\n}" + "value": "export interface TextElementProps extends Pick {\n color?: Extract;\n tone?: Extract;\n type?: Extract;\n}" } }, "TextElement": { @@ -167095,7 +166999,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -167692,7 +167596,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -167750,7 +167654,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -167766,7 +167670,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -168134,7 +168038,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, @@ -169380,7 +169284,7 @@ "syntaxKind": "PropertySignature", "name": "tone", "value": "'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -169396,7 +169300,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'address' | 'mark' | 'small' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'", - "description": "The semantic type and styling treatment for the text content.\n\nOther presentation properties on `s-text` override the default styling.\n\n- `address`: A semantic type that indicates the text is contact information. Typically used for addresses.\n- `redundant`: A semantic type that indicates the text is no longer accurate or no longer relevant. One such use-case is discounted prices.\n- `mark`: A semantic type that indicates the text is marked or highlighted and relevant to the user's current action.\n- `emphasis`: A semantic type that indicates emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.\n- `offset`: A semantic type that indicates an offset from the normal prose of the text.\n- `strong`: A semantic type that indicates strong importance, seriousness, or urgency.\n- `small`: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.\n- `generic`: No additional semantics or styling is applied.", + "description": "Provide semantic meaning and default styling to the text.\n\nOther presentation properties on Text override the default styling.", "isOptional": true, "defaultValue": "'generic'" }, @@ -169430,7 +169334,7 @@ "syntaxKind": "PropertySignature", "name": "accessibilityVisibility", "value": "'visible' | 'hidden' | 'exclusive'", - "description": "Controls how the element is exposed to sighted users and to assistive technologies such as screen readers.\n\n- `visible`: The element is visible to all users (both sighted users and screen readers).\n- `hidden`: The element is visually visible but hidden from screen readers. Use this for decorative elements that don't provide meaningful information.\n- `exclusive`: The element is visually hidden but announced by screen readers. Use this for screen-reader-only content like skip links or additional context.", + "description": "Changes the visibility of the element.\n\n- `visible`: the element is visible to all users.\n- `hidden`: the element is removed from the accessibility tree but remains visible.\n- `exclusive`: the element is visually hidden but remains in the accessibility tree.", "isOptional": true, "defaultValue": "'visible'" }, @@ -169439,7 +169343,7 @@ "syntaxKind": "PropertySignature", "name": "color", "value": "'base' | 'subdued'", - "description": "The color emphasis level that controls visual intensity.\n\n- `subdued`: Deemphasized color for secondary text, supporting labels, and less critical interface elements.\n- `base`: Primary color for body text, standard UI elements, and general content with good readability.\n- `strong`: Emphasized color for headings, key labels, and interactive elements that need prominence.", + "description": "Modify the color to be more or less intense.", "isOptional": true, "defaultValue": "'base'" }, @@ -169448,7 +169352,7 @@ "syntaxKind": "PropertySignature", "name": "dir", "value": "'ltr' | 'rtl' | 'auto' | ''", - "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: The languages written from left to right (such as English).\n- `rtl`: The languages written from right to left (such as Arabic).\n- `auto`: The user agent determines the direction based on the content.\n- `\"\"`: The direction is inherited from parent elements (equivalent to not setting the attribute).\n\nLearn more about the [dir attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir).", + "description": "Indicates the directionality of the element’s text.\n\n- `ltr`: languages written from left to right (such as English)\n- `rtl`: languages written from right to left (such as Arabic)\n- `auto`: the user agent determines the direction based on the content\n- `''`: direction is inherited from parent elements (equivalent to not setting the attribute)", "isOptional": true, "defaultValue": "''" }, @@ -169457,7 +169361,7 @@ "syntaxKind": "PropertySignature", "name": "display", "value": "MaybeResponsive<\"auto\" | \"none\">", - "description": "Sets the outer 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).\n\n- `auto`: The component’s initial value. The actual value depends on the component and context.\n- `none`: Hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.\n\nLearn more about the [display property](https://developer.mozilla.org/en-US/docs/Web/CSS/display).", + "description": "Sets the outer 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).\n\n- `auto`: the component’s initial value. The actual value depends on the component and context.\n- `none`: hides the component from display and removes it from the accessibility tree, making it invisible to screen readers.", "isOptional": true, "defaultValue": "'auto'" }, @@ -169474,7 +169378,7 @@ "syntaxKind": "PropertySignature", "name": "lang", "value": "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.\n\nThe value should be a valid language subtag from the [IANA language subtag registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry).\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", + "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)\n\nIt is recommended to combine it with the `dir` attribute to ensure the text is rendered correctly if the surrounding content’s direction is different.", "isOptional": true, "defaultValue": "''" }, @@ -169483,7 +169387,7 @@ "syntaxKind": "PropertySignature", "name": "tone", "value": "'info' | 'auto' | 'neutral' | 'success' | 'warning' | 'critical' | 'custom'", - "description": "The semantic meaning and color treatment of the component.\n\n- `auto`: Automatically determined based on context.\n- `neutral`: General information without specific intent.\n- `info`: Informational content or helpful tips.\n- `success`: Positive outcomes or successful states.\n- `caution`: Advisory notices that need attention.\n- `warning`: Important warnings about potential issues.\n- `critical`: Urgent problems or destructive actions.\n- `accent`: Highlighted or promotional content.\n- `custom`: Custom styling controlled by your theme.", + "description": "Sets the tone of the component, based on the intention of the information being conveyed.", "isOptional": true, "defaultValue": "'auto'" }, @@ -169492,7 +169396,7 @@ "syntaxKind": "PropertySignature", "name": "type", "value": "'address' | 'mark' | 'small' | 'strong' | 'generic' | 'redundant' | 'emphasis' | 'offset'", - "description": "The semantic type and styling treatment for the text content.\n\nOther presentation properties on `s-text` override the default styling.\n\n- `address`: A semantic type that indicates the text is contact information. Typically used for addresses.\n- `redundant`: A semantic type that indicates the text is no longer accurate or no longer relevant. One such use-case is discounted prices.\n- `mark`: A semantic type that indicates the text is marked or highlighted and relevant to the user's current action.\n- `emphasis`: A semantic type that indicates emphatic stress. Typically for words that have a stressed emphasis compared to surrounding text.\n- `offset`: A semantic type that indicates an offset from the normal prose of the text.\n- `strong`: A semantic type that indicates strong importance, seriousness, or urgency.\n- `small`: A semantic type that indicates the text is considered less important than the main content, but is still necessary for the reader to understand.\n- `generic`: No additional semantics or styling is applied.", + "description": "Provide semantic meaning and default styling to the text.\n\nOther presentation properties on Text override the default styling.", "isOptional": true, "defaultValue": "'generic'" } @@ -169504,7 +169408,7 @@ "src/surfaces/checkout/components/TextArea.ts": { "filePath": "src/surfaces/checkout/components/TextArea.ts", "name": "TextAreaElementProps", - "description": "", + "description": "Configure the following properties on the text area component.", "isPublicDocs": true, "members": [ { @@ -169687,7 +169591,7 @@ "src/surfaces/checkout/components/TextArea.ts": { "filePath": "src/surfaces/checkout/components/TextArea.ts", "name": "TextAreaElementEvents", - "description": "", + "description": "The text area component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -172310,7 +172214,7 @@ "src/surfaces/checkout/components/TextField.ts": { "filePath": "src/surfaces/checkout/components/TextField.ts", "name": "TextFieldElementProps", - "description": "", + "description": "Configure the following properties on the text field component.", "isPublicDocs": true, "members": [ { @@ -172351,7 +172255,7 @@ "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true, "defaultValue": "''" @@ -172511,7 +172415,7 @@ "src/surfaces/checkout/components/TextField.ts": { "filePath": "src/surfaces/checkout/components/TextField.ts", "name": "TextFieldElementEvents", - "description": "", + "description": "The text field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -172554,7 +172458,7 @@ "src/surfaces/checkout/components/TextField.ts": { "filePath": "src/surfaces/checkout/components/TextField.ts", "name": "TextFieldElementSlots", - "description": "", + "description": "The text field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { @@ -173524,7 +173428,7 @@ "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true }, @@ -175031,7 +174935,7 @@ "filePath": "src/surfaces/checkout/components/TextField.ts", "syntaxKind": "PropertySignature", "name": "icon", - "value": "'' | 'reset' | 'map' | 'menu' | 'search' | 'circle' | 'filter' | 'image' | 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check-circle-filled' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'menu-horizontal' | 'menu-vertical' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'return' | 'savings' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'", + "value": "IconProps['type']", "description": "The type of icon to be displayed in the field.", "isOptional": true }, @@ -175180,7 +175084,7 @@ "src/surfaces/checkout/components/Time.ts": { "filePath": "src/surfaces/checkout/components/Time.ts", "name": "TimeElementProps", - "description": "", + "description": "The element props interface for the Time component.", "isPublicDocs": true, "members": [ { @@ -175188,7 +175092,7 @@ "syntaxKind": "PropertySignature", "name": "dateTime", "value": "string", - "description": "The machine-readable date and/or time value for the element. Use this to provide a datetime string that browsers, search engines, and assistive technologies can parse for improved semantics and functionality.\n\nThe value must be a [valid datetime string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values), such as `2024-01-15`, `14:30`, or `2024-01-15T14:30:00`.", + "description": "Set the time and/or date of the element.\n\nIt must be a [valid date string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values).", "isOptional": true, "defaultValue": "''" }, @@ -175852,7 +175756,7 @@ "syntaxKind": "PropertySignature", "name": "dateTime", "value": "string", - "description": "The machine-readable date and/or time value for the element. Use this to provide a datetime string that browsers, search engines, and assistive technologies can parse for improved semantics and functionality.\n\nThe value must be a [valid datetime string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values), such as `2024-01-15`, `14:30`, or `2024-01-15T14:30:00`.", + "description": "Set the time and/or date of the element.\n\nIt must be a [valid date string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values).", "isOptional": true, "defaultValue": "''" }, @@ -177510,7 +177414,7 @@ "syntaxKind": "PropertySignature", "name": "dateTime", "value": "string", - "description": "The machine-readable date and/or time value for the element. Use this to provide a datetime string that browsers, search engines, and assistive technologies can parse for improved semantics and functionality.\n\nThe value must be a [valid datetime string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values), such as `2024-01-15`, `14:30`, or `2024-01-15T14:30:00`.", + "description": "Set the time and/or date of the element.\n\nIt must be a [valid date string](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/time#valid_datetime_values).", "isOptional": true, "defaultValue": "''" }, @@ -177585,7 +177489,7 @@ "src/surfaces/checkout/components/UnorderedList.ts": { "filePath": "src/surfaces/checkout/components/UnorderedList.ts", "name": "UnorderedListElementProps", - "description": "", + "description": "The element props interface for the UnorderedList component.", "isPublicDocs": true, "members": [ { @@ -179908,7 +179812,7 @@ "src/surfaces/checkout/components/UrlField.ts": { "filePath": "src/surfaces/checkout/components/UrlField.ts", "name": "URLFieldElementProps", - "description": "", + "description": "Configure the following properties on the URL field component.", "isPublicDocs": true, "members": [ { @@ -180072,7 +179976,7 @@ "src/surfaces/checkout/components/UrlField.ts": { "filePath": "src/surfaces/checkout/components/UrlField.ts", "name": "URLFieldElementEvents", - "description": "", + "description": "The URL field component provides event callbacks for handling user interactions. Learn more about [handling events](/docs/api/polaris/using-polaris-web-components#handling-events).", "isPublicDocs": true, "members": [ { @@ -180115,7 +180019,7 @@ "src/surfaces/checkout/components/UrlField.ts": { "filePath": "src/surfaces/checkout/components/UrlField.ts", "name": "URLFieldElementSlots", - "description": "", + "description": "The URL field component supports slots for additional content placement within the component. Learn more about [using slots](/docs/api/polaris/using-polaris-web-components#slots).", "isPublicDocs": true, "members": [ { diff --git a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_static_pages.json b/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_static_pages.json deleted file mode 100644 index 28f27e1744..0000000000 --- a/packages/ui-extensions/docs/surfaces/customer-account/generated/customer_account_ui_extensions/2026-04/generated_static_pages.json +++ /dev/null @@ -1,1435 +0,0 @@ -[ - { - "title": "Configuration", - "description": "\nWhen you create a [customer account UI extension](/api/customer-account-ui-extensions/), an [app extension configuration](/docs/apps/app-extensions/configuration) `shopify.extension.toml` file is automatically generated in your extension's directory.\n\nThis guide describes [extension targeting](#targets), [capabilities](#capabilities), [metafields](#metafields), and the [settings](#settings-definition) you can configure in the app extension configuration.\n", - "id": "configuration", - "sections": [ - { - "type": "Generic", - "anchorLink": "how-it-works", - "title": "How it works", - "sectionContent": "\nYou define properties for your customer account UI extension in the extension configuration file. The `shopify.extension.toml` file contains the extension's configuration, which includes the extension name, targets, capabilities, and settings.\n\nWhen an extension is published to Shopify, the contents of the settings file are pushed alongside the extension.\n", - "codeblock": { - "title": "shopify.extension.toml", - "tabs": [ - { - "title": "shopify.extension.toml", - "code": "api_version = \"unstable\"\n\n[[extensions]]\ntype = \"ui_extension\"\nname = \"My customer account extension\"\nhandle = \"customer-account-ui\"\n\n[[extensions.targeting]]\ntarget = \"customer-account.order-status.block.render\"\nmodule = \"./OrderStatusBlockExtension.jsx\"\n\n[extensions.capabilities]\nnetwork_access = true\napi_access = true\n\n[[extensions.metafields]]\nnamespace = \"my-namespace\"\nkey = \"my-key\"\n[[extensions.metafields]]\nnamespace = \"my-namespace\"\nkey = \"my-other-key\"\n\n[extensions.settings]\n[[extensions.settings.fields]]\nkey = \"field_key\"\ntype = \"boolean\"\nname = \"field-name\"\n[[extensions.settings.fields]]\nkey = \"field_key_2\"\ntype = \"number_integer\"\nname = \"field-name-2\"\n", - "language": "toml" - } - ] - }, - "sectionNotice": [ - { - "title": "Tip", - "sectionContent": "\nYou can configure more than one type of extension within a configuration file.\n", - "type": "info" - } - ], - "sectionCard": [ - { - "name": "App extension configuration", - "subtitle": "Learn more", - "url": "/docs/apps/app-extensions/configuration", - "type": "gear" - } - ] - }, - { - "type": "GenericAccordion", - "anchorLink": "targets", - "title": "Targets", - "sectionContent": "\n[Targets](/docs/api/customer-account-ui-extensions/extension-targets-overview) represent where your customer account UI extension will be injected. You may have one or many targets defined in your app extension configuration using the `targeting` field.\n\nAlong with the `target`, Shopify needs to know which code to execute for it. You specify the path to your code file by using the `module` property.\n\nFor block extension targets, you can [define the default placement](/docs/apps/build/customer-accounts/extension-placement#define-default-placement) for your extension.\n\n ", - "accordionContent": [ - { - "title": "Supporting a single extension target", - "description": "\n Your code should have a default export if it only supports a single extension target.\n ", - "codeblock": { - "title": "Single extension target", - "tabs": [ - { - "title": "shopify.extension.toml", - "code": "# ...\n\n[[extensions.targeting]]\ntarget = \"customer-account.order-status.block.render\"\nmodule = \"./Extension.jsx\"\n\n# ...\n", - "language": "toml" - }, - { - "title": "Extension.jsx", - "code": "// ...\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n // ...\n}\n", - "language": "jsx" - } - ] - } - }, - { - "title": "Supporting multiple extension targets", - "description": "\n You can support multiple extension targets within a single configuration file. However, you must provide a separate file per extension target using the `export default` declaration.\n ", - "codeblock": { - "title": "Multiple extension targets", - "tabs": [ - { - "title": "shopify.extension.toml", - "code": "# ...\n\n[[extensions.targeting]]\ntarget = \"customer-account.page.render\"\nmodule = \"./FullPageExtension.jsx\"\n\n[[extensions.targeting]]\ntarget = \"customer-account.order-status.block.render\"\nmodule = \"./BlockExtension.jsx\"\n\n# ...\n", - "language": "toml" - }, - { - "title": "FullPageExtension.jsx", - "code": "// ...\n\n// ./FullPageExtension.jsx\nexport default async () => {\n render(<FullPageExtension />, document.body);\n};\n\nfunction FullPageExtension() {\n // ...\n}\n", - "language": "jsx" - }, - { - "title": "BlockExtension.jsx", - "code": "// ...\n\n// ./BlockExtension.jsx\nexport default async () => {\n render(<BlockExtension />, document.body);\n};\n\nfunction BlockExtension() {\n // ...\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - { - "type": "Generic", - "anchorLink": "capabilities", - "title": "Capabilities", - "sectionContent": "\nDefines the [capabilities](/docs/api/customer-account-ui-extensions/apis/extension#standardapi-propertydetail-extension) associated with your extension.\n| Property | Description |\n|---|---|\n| [`api_access`](#api-access) | Allows your extension to query the Storefront API.\n| [`network_access`](#network-access) | Allows your extension make external network calls.\n| [`collect_buyer_consent`](#collect-buyer-consent) | Allows your extension to collect buyer consent for specific policies such as SMS marketing.\n ", - "codeblock": { - "title": "shopify.extension.toml", - "tabs": [ - { - "code": "# ...\n\n[extensions.capabilities]\napi_access = true\nnetwork_access = true\n\n[extensions.capabilities.collect_buyer_consent]\ncustomer_privacy = true\n\n# ...\n\n", - "language": "toml" - } - ] - } - }, - { - "type": "Generic", - "anchorLink": "api-access", - "title": "Storefront API access", - "sectionContent": "The following section describes the use cases of the `api_access` capability and the [Storefront API](/api/storefront) access scopes.", - "codeblock": { - "title": "shopify.extension.toml", - "tabs": [ - { - "code": "# ...\n\n[extensions.capabilities]\napi_access = true\n\n# ...\n", - "language": "toml" - } - ] - }, - "sectionCard": [ - { - "name": "API access examples", - "subtitle": "See", - "url": "/docs/api/customer-account-ui-extensions/apis/storefront-api#examples", - "type": "blocks" - } - ], - "sectionSubContent": [ - { - "title": "When to use Storefront API access", - "sectionContent": "API access is used when your extension needs to retrieve data from the [Storefront API](/api/storefront). For example, you may need to fetch product data, check the product tags on an item in the order summary.\n\n> Tip:\n> Shopify handles the authentication for all API calls from an extension.\n" - }, - { - "title": "Methods for accessing the Storefront API", - "sectionContent": "Enabling the `api_access` capability allows you to use the Order Status API [`query`](/docs/api/customer-account-ui-extensions/apis/storefront-api#orderstatusapi-propertydetail-query) method and the global `fetch` to retrieve data from the [Storefront API](/api/storefront) without manually managing token aquisition and refresh.\n\n`query` lets you request a single GraphQL response from the Storefront API.\n\nIf you prefer to construct GraphQL requests yourself or you would like to use a full-featured GraphQL client such as Apollo or urql, our custom `fetch` global automatically appends the required access tokens.\n\nThe GraphQL client of your choice shouldn’t use any DOM APIs, as they aren’t available in a customer account UI extension's Web Worker.\n\n> Note: Both `query` and `fetch` will work for calling the Storefront API with the `api_access` capability enabled. If you are using `fetch` to get data external to Shopify, refer to the [`network_access`](/api/customer-account-ui-extensions/configuration#network-access) capability." - }, - { - "title": "Storefront API access scopes", - "sectionContent": "\nYour extensions will have the following unauthenticated access scopes to the Storefront API:\n\n- unauthenticated_read_product_publications\n- unauthenticated_read_collection_publications\n- unauthenticated_read_product_listings\n- unauthenticated_read_product_tags\n- unauthenticated_read_selling_plans\n- unauthenticated_read_collection_listings\n- unauthenticated_read_metaobjects\n" - } - ] - }, - { - "type": "Generic", - "anchorLink": "network-access", - "title": "Network access", - "sectionContent": "\nThe following section describes use cases for requesting network access, alternatives to requesting network access, and steps for completing a request for network access.\n> Caution:\n> If your extension specifies the `network_access` capability, you must request access in order to publish your extension.\n", - "codeblock": { - "title": "shopify.extension.toml", - "tabs": [ - { - "code": "# ...\n\n[extensions.capabilities]\nnetwork_access = true\n\n# ...\n", - "language": "toml" - } - ] - }, - "sectionSubContent": [ - { - "title": "When to request network access", - "sectionContent": "If you need to get data that you can't currently get from Shopify, then you should request network access. For example, you might need to fetch additional data to render loyalty points." - }, - { - "title": "Alternatives to network access", - "sectionContent": "\nInstead of fetching data with an external network call, consider retrieving the data from a metafield. Your app can use the [Customer Account API](/docs/api/customer) to write to [metafields](/docs/api/customer/latest/objects/Metafield) on the customer, order, company, or company location.\n\nAn app with the ability to query the Admin API can also write to [metafields](/api/admin-graphql/latest/objects/metafield) on the shop or product.\n\nRetrieving data from metafields is faster because it doesn't require an external network call. Instead, you can rely on Shopify for the uptime, scaling, and durability of the data storage.\n" - }, - { - "title": "Complete a request for network access", - "sectionContent": "\n1. Go to your [Partner Dashboard](https://partners.shopify.com/current/apps).\n2. Click the name of the app that you want to change.\n3. Click **API access**.\n4. Under **Allow network access in checkout and account UI extensions**, click **Allow network access**\n\n Your request is automatically approved and your app is immediately granted the approval scope that's required for your customer account UI extension to make external network calls.\n\n5. Add network_access = true to the [extensions.capabilities] section of your extension's configuration file." - }, - { - "title": "Required CORS headers", - "sectionContent": "\nSince UI extensions run in a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API), they have a null origin. They do not share the storefront or customer account's origin. For network calls to succeed, your server must support [cross-origin resource sharing (CORS)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) for null origins by including this response header:\n\nAccess-Control-Allow-Origin: *\n" - }, - { - "title": "App Proxy", - "sectionContent": "\nUI extensions can make fetch requests to [App Proxy](/docs/apps/online-store/app-proxies) URLs, but there are some differences and limitations related to the security context within which UI extensions run.\n\nUI extension requests made to the App Proxy will execute as CORS requests. See _Required CORS headers_ above for information about requirements related to CORS.\n\nUI extension requests made to the App Proxy will not assign the logged_in_customer_id query parameter. Instead use a [session token](/docs/api/customer-account-ui-extensions/apis/standardapi#properties-propertydetail-sessiontoken) which provides the sub claim for the logged in customer.\n\nUI extension requests made to the App Proxy of password protected shops is not supported. Extension requests come from a web worker which does not share the same session as the parent window.\n\nThe App Proxy doesn't handle all [HTTP request methods](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods). Specifically, CONNECT and TRACE are unsupported.\n" - }, - { - "title": "Security considerations", - "sectionContent": "\nWhen processing HTTP requests on your API server, you cannot guarantee that your own extension will have made every request. When responding with sensitive data, keep in mind that requests could originate from anywhere on the Internet.\n\nYour extension can pass a [session token](/docs/api/customer-account-ui-extensions/apis/session-token) to your API server but this only guarantees the integrity of its claims. It does not guarantee the request itself originated from Shopify. For example, your API server could trust the session token's `sub` claim (the customer ID) but it could not trust a `?customer_id=` query parameter.\n" - } - ] - }, - { - "type": "Generic", - "anchorLink": "collect-buyer-consent", - "title": "Collect buyer consent", - "sectionContent": "If your extension utilizes the [Customer Privacy API](/docs/api/customer-account-ui-extensions/apis/customer-privacy) to collecting buyer consent, you must first declare that capability in your configuration file.", - "sectionSubContent": [ - { - "title": "Customer Privacy", - "sectionContent": "In order to collect customer privacy consent, you'll need to add `customer_privacy = true` in your toml configuration. This will let you use our [Customer Privacy API](/docs/api/customer-account-ui-extensions/apis/customer-privacy)." - } - ], - "codeblock": { - "title": "shopify.extension.toml", - "tabs": [ - { - "code": "# ...\n\n[extensions.capabilities.collect_buyer_consent]\ncustomer_privacy = true\n\n# ...\n\n", - "language": "toml" - } - ] - } - }, - { - "type": "Generic", - "anchorLink": "metafields", - "title": "Metafields", - "sectionContent": "\nAll customer account UI extension [targets](/docs/api/customer-account-ui-extensions/targets) can read and write to metafields using the [Customer Account API](/docs/api/customer-account-ui-extensions/apis/customer-account-api). Learn more about [writing to metafields](/docs/apps/build/customer-accounts/metafields).\n\nAccess to metafields on a read-only basis through the [Order Status API](/docs/api/customer-account-ui-extensions/apis/order-status-api/metafields) is available to order status [targets](/api/customer-account-ui-extensions/targets) and is defined in your configuration. Customer account UI extensions are configured for metafields similarly to checkout UI extensions. [Learn more](/docs/api/checkout-ui-extensions/configuration#metafields).\n" - }, - { - "type": "Markdown", - "anchorLink": "settings-definition", - "title": "Settings definition", - "sectionContent": "The settings for a customer account UI extension define a set of fields that the merchant will be able to set a value for from the [checkout editor](/apps/checkout/test-ui-extensions#test-the-extension-in-the-checkout-editor). You can use validation options to apply additional constraints to the data that the setting can store, such as a minimum or maximum value. \n\n Each settings definition can include up to 20 settings. \n\n > Note: \n > All setting inputs are optional. You should code the extension so that it still works if the merchant hasn't set a value for the setting. The settings are only available to order status [targets](/api/customer-account-ui-extensions/targets).", - "sectionSubContent": [ - { - "title": "Properties", - "sectionContent": "The following table describes the properties that you can use to define a setting:\n\n | Property | Required? | Description | Example |\n|---|---|---|---|\n| `key` | Yes | The key of the setting. When a merchant configures a value for this setting, the value will be exposed under this `key` when running your extension |
\"banner_title\"
|\n| `type` | Yes | The [type](#supported-setting-types) of setting. |
\"single_line_text_field\"
|\n| `name` | Yes | The name of the setting. `name` is displayed to the merchant in the checkout editor. |
\"Banner title\"
|\n| `description` | No | The description of the setting. `description` is displayed to the merchant in the checkout editor. |
\"Enter a title for the banner.\"
|\n| `validations` | No | Constraints on the setting input that Shopify validates. |
validations: 
name = \"max\",
value = \"25\"
|" - }, - { - "title": "Supported setting types", - "sectionContent": "The setting type determines the type of information that the setting can store. The setting types have built-in validation on the setting input. \n\n Settings can have the following types: \n\n| Type | Description | Example value |\n|---|---|---|\n| `boolean` | A true or false value. |
true
|\n| `date` | A date in ISO 8601 format without a presumed time zone. |
2022-02-02
|\n| `date_time` | A date and time in ISO 8601 format without a presumed time zone. |
2022-01-01T12:30:00
|\n| `single_line_text_field` | A single line string. |
Canada
|\n| `multi_line_text_field` | A multi-line string. |
Canada
United States
Brazil
Australia
|\n| `number_integer` | A whole number in the range of +/-9,007,199,254,740,991. |
10
|\n| `number_decimal` | A number with decimal places in the range of +/-9,999,999,999,999.999999999. |
10.4
|\n| `variant_reference` | A globally-unique identifier (GID) for a product variant. |
gid://shopify/ProductVariant/1
 |"
-          },
-          {
-            "title": "Validation options",
-            "sectionContent": "Each setting can include validation options. Validation options enable you to apply additional constraints to the data that a setting can store, such as a minimum or maximum value, or a regular expression. The setting's `type` determines the available validation options. \n\n You can include a validation option for a setting using the validation `name` and a corresponding `value`. The appropriate value depends on the setting type to which the validation applies.\n\n The following table outlines the available validation options with supported types for applying constraints to a setting:\n\n | Validation option | Description | Supported types | Example |\n|---|---|---|---|\n| Minimum length | The minimum length of a text value. | 
  • single_line_text_field
  • multi_line_text_field
|
[[extensions.settings.fields.validations]]
name = \"min\"
value = \"8\"
|\n| Maximum length | The maximum length of a text value. |
  • single_line_text_field
  • multi_line_text_field
|
[[extensions.settings.fields.validations]]
name = \"max\"
value = \"25\"
|\n| Regular expression | A regular expression. Shopify supports [RE2](https://github.com/google/re2/wiki/Syntax). |
  • single_line_text_field
  • multi_line_text_field
|
[[extensions.settings.fields.validations]]
name = \"regex\"
value = \"(@)(.+)$\"
|\n| Choices | A list of up to 128 predefined options that limits the values allowed for the metafield. | `single_line_text_field` |
[[extensions.settings.fields.validations]]
name = \"choices\"
value = \"[\\"red\\", \\"green\\", \\"blue\\"]\"
|\n| Minimum date | The minimum date in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format. | `date` |
[[extensions.settings.fields.validations]]
name = \"min\"
value = \"2022-01-01\"
|\n| Maximum date | The maximum date in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format. | `date` |
[[extensions.settings.fields.validations]]
name = \"max\"
value = \"2022-03-03\"
|\n| Minimum datetime | The minimum date and time in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format. | `date_time` |
[[extensions.settings.fields.validations]]
name = \"min\"
value = \"2022-03-03T16:30:00\"
|\n| Maximum datetime | The maximum date and time in [ISO 8601](https://www.iso.org/iso-8601-date-and-time-format.html) format. | `date_time` |
[[extensions.settings.fields.validations]]
name = \"max\"
value = \"2022-03-03T17:30:00\"
|\n| Minimum integer | The minimum integer number. | `number_integer` |
[[extensions.settings.fields.validations]]
name = \"min\"
value = \"9\"
|\n| Maximum integer | The maximum integer number. | `number_integer` |
[[extensions.settings.fields.validations]]
name = \"max\"
value = \"15\"
|\n| Minimum decimal | The minimum decimal number. | `number_decimal` |
[[extensions.settings.fields.validations]]
name = \"min\"
value = \"0.5\"
|\n| Maximum decimal | The maximum decimal number. | `number_decimal` |
[[extensions.settings.fields.validations]]
name = \"max\"
value = \"1.99\"
|\n| Maximum precision | The maximum number of decimal places to store for a decimal number. | `number_decimal` |
[[extensions.settings.fields.validations]]
name = \"max_precision\"
value = \"2\"
|" - } - ] - }, - { - "type": "Generic", - "anchorLink": "example-settings-definition", - "title": "Example settings definition", - "sectionContent": "The following example shows a settings definition that defines a setting named `banner_title` of type `single_line_text_field`. When the merchant sets a value for this setting from the checkout editor, Shopify validates that the provided value is between 5 and 20 characters in length \n\n", - "sectionCard": [ - { - "name": "Settings example code", - "subtitle": "See", - "url": "/docs/api/customer-account-ui-extensions/apis/order-status-api/settings#examples", - "type": "blocks" - } - ], - "codeblock": { - "title": "shopify.extension.toml", - "tabs": [ - { - "code": "api_version = \"unstable\"\n\n[[extensions]]\nname = \"My customer account ui extension\"\nhandle = \"customer-account-ui\"\ntype = \"ui_extension\"\n\n[extensions.settings]\n\n[[extensions.settings.fields]]\nkey = \"banner_title\"\ntype = \"single_line_text_field\"\nname = \"Banner title\"\ndescription = \"Enter a title for the banner.\"\n\n[[extensions.settings.fields.validations]]\nname = \"min\"\nvalue = \"5\"\n[[extensions.settings.fields.validations]]\nname = \"max\"\nvalue = \"20\"\n", - "language": "toml" - } - ] - } - } - ] - }, - { - "title": "Error handling", - "description": "You can use standard web techniques to handle errors in [customer account UI extensions](/api/customer-account-ui-extensions/) but you may need to account for how they run inside of a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API).", - "id": "error-handling", - "sections": [ - { - "type": "Generic", - "anchorLink": "handling-any-error", - "title": "Handling any error", - "sectionContent": "Add an `unhandledrejection` listener for promise rejections or an `error` listener for other exceptions like Javascript runtime errors or failures to load a resource.", - "codeblock": { - "title": "Example", - "tabs": [ - { - "code": "// For unhandled promise rejections\nself.addEventListener(\n 'unhandledrejection',\n (error) => {\n console.warn(\n 'event unhandledrejection',\n error,\n );\n },\n);\n\n// For other exceptions\nself.addEventListener('error', (error) => {\n console.warn('event error', error);\n});\n", - "language": "jsx" - } - ] - } - }, - { - "type": "Generic", - "anchorLink": "third-party-libraries", - "title": "Third party libraries", - "sectionContent": "\nYou can use error reporting libraries like [Sentry](https://sentry.io/). However, they might require extra configuration because UI extensions run inside of a [Web Worker](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API).\n\n> Tip:\n> You must request [network access](/api/customer-account-ui-extensions/configuration#network-access) to transmit errors to a third party service.\n" - }, - { - "type": "Generic", - "anchorLink": "sentry", - "title": "Sentry", - "sectionContent": "\n Install and initialize Sentry following their [Browser JavaScript guide](https://docs.sentry.io/platforms/javascript/). We recommend disabling the default integrations to be sure it will run within a Web Worker. You'll need to add event listeners manually.", - "codeblock": { - "title": "Extension.jsx", - "tabs": [ - { - "code": "import '@shopify/ui-extensions/preact';\nimport {render} from 'preact';\nimport * as Sentry from '@sentry/browser';\n\nSentry.init({\n dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',\n defaultIntegrations: false,\n});\n\nself.addEventListener(\n 'unhandledrejection',\n (error) => {\n Sentry.captureException(error);\n },\n);\n\nself.addEventListener('error', (error) => {\n Sentry.captureException(error);\n});\n\n// Your normal extension code.\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n return <s-banner>Your extension</s-banner>;\n}\n", - "language": "jsx" - } - ] - } - } - ] - }, - { - "title": "Targets Overview", - "description": "\nA [target](/docs/apps/app-extensions/configuration#targets) represents where your customer account UI extension will appear.\n\nYou register for targets in your [configuration file](/docs/api/checkout-ui-extensions/configuration), and you include a JavaScript function that will run at that location in customer accounts.\n ", - "id": "extension-targets-overview", - "sections": [ - { - "type": "Generic", - "anchorLink": "static-extension-targets", - "title": "Static extension targets", - "image": "target-overview-static-extension-targets", - "altText": "The background of the entire diagram is a light red, which is the color that represents static extension targets. In the center is a solid-line box that says Core Feature. Above and below it, connected to the Core Feature by a lock icon, there are two red dotted-line boxes that contain example names of static extension targets, indicating that they are always tied to the Core Feature.", - "sectionContent": "Static extension targets render immediately before or after most core customer account features.\n \n\nWhen a core customer account feature isn't rendered, neither are the static extension targets tied to it.\n \n\nChoose static extension targets when your content and functionality is closely related to a core customer account feature.\n ", - "sectionCard": [ - { - "name": "Extension targets", - "subtitle": "API reference", - "url": "/docs/api/customer-account-ui-extensions/targets", - "type": "blocks" - } - ] - }, - { - "type": "Generic", - "anchorLink": "block-extension-targets", - "title": "Block extension targets", - "sectionContent": "Block extension targets render between core customer account features. Block extensions are always rendered, regardless of what other elements of the customer account are present.\n\nBlock extension targets always support multiple placements. Each placement has an associated placement reference that represents its location on the page. For example, the block extension target `customer-account.order-status.block.render` supports seven placements. The placement references include `PAGE_TITLE`, `ORDER_SUMMARY1`, and more.\n\nYou can use placement references as URL parameters to [test block extensions](/docs/apps/build/customer-accounts/test#block-targets) in all supported placements on a page. You can also use placement references to [define the default placement](/docs/apps/build/app-extensions/configure-app-extensions#customer-account-ui-extensions) of an extension for merchants.", - "altText": "The background of the entire diagram is a light purple, which is the color that represents block extension targets. In the center is a solid-line box that says Core Feature. Above and below it, not connected to the Core Feature, there are two purple dotted-line boxes that contain example names of block extension targets, indicating that they render between core features, regardless of whether that core feature is rendered or not.", - "sectionCard": [ - { - "name": "Extension targets", - "subtitle": "API reference", - "url": "/docs/api/customer-account-ui-extensions/targets", - "type": "blocks" - }, - { - "name": "Placement references", - "subtitle": "Learn more", - "url": "/docs/apps/build/customer-accounts/extension-placement#placement-references", - "type": "resource" - } - ] - }, - { - "type": "GenericAccordion", - "anchorLink": "order-index", - "title": "Order index", - "sectionContent": "The **Order index** page is where customers can view and manage all their past and current orders.", - "accordionContent": [ - { - "title": "Orders", - "description": "The page contains one block extension that merchants can place above the page title or below the order list.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-order-index-orders.png", - "altText": "The desktop and mobile view of the Order index page, with the customer-account.order-index.block.render extension target shown in purple dotted-line boxes above the page title, and below the list of orders, indicating that it's a block extension target with multiple placements available." - }, - { - "title": "Order action menu", - "description": "Actions available on specific order\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-order-action-menu-extension.png", - "altText": "The desktop and mobile view of the order action menu on the Order index page. The menu label is \"Manage\", and contains one menu item that says \"Request return\". The menu also contains a red dotted-line box that says customer-account.order.action.menu-item.render, representing the static extension target that's available in this menu." - } - ] - }, - { - "type": "GenericAccordion", - "anchorLink": "order-status", - "title": "Order status", - "sectionContent": "The **Order status** page is where customers can view, track, and manage a specific order.", - "accordionContent": [ - { - "title": "Order status", - "description": "For tracking order statuses, and any updates regarding the delivery, pickup, or return of items.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-order-status-extension.png", - "altText": "The desktop and mobile view of the Order status page. Above and below the page title, there is a purple dotted-line box that indicates the available placements for the block extension target on this page." - }, - { - "title": "Order details", - "description": "Customer, shipping, and billing information associated with the order.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-order-details-extension.png", - "altText": "The desktop and mobile view of the Order details card on the Order status page, which includes contact information, payment, shipping address, billing address, and more. Above and below the Order details card there is a purple dotted-line box that indicates the available placements for the block extension target on this page. Inside the Order details card is a red dotted-line box that indicates the static extension target available in this location." - }, - { - "title": "Payment status", - "description": "Depending on the payment status of the order, relevant payment information and action items may be displayed here. For example, for orders with payment terms, the amount due, the due data, and a **Pay now** button is displayed.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-payment-status.png", - "altText": "The desktop and mobile view of the payment status card. Inside the card, below the payment status information, there is a red dotted-line box that says customer-account.order-status.payment-details.render-after, indicating the static extension target available in this location." - }, - { - "title": "Order summary", - "description": "Summary of the items, discounts, and order total.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-order-summary.png", - "altText": "The desktop and mobile view of the order summary card on the Order status page, which includes the images and names of the items in the order, their cost, and the calculations of subtotal, shipping, taxes, and total for the order. Under every item, there is a red dotted-line box that says customer-account.order-status.cart-line-item.render-after, indicating the static extension target available in this location. Under the entire list of items, there is one red dotted-line box that says customer-account.order-status.cart-line-list.render-after, indicating another static extension target available in this location. A purple dotted-line box that says customer-account.order-status.block-render is shown above the list of items, below the list of items, and below the, indicating the multiple placements available for this block extension target." - }, - { - "title": "Order action menu", - "description": "Actions available on a specific order.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-order-status-order-action-menu-extension.png", - "altText": "The desktop and mobile video of the order action menu on the Order status page. The menu label is \"Manage\", and contains one menu item that says \"Request return\". The menu also contains a red dotted-line box that says customer-account.order.action.menu-item.render, representing the static extension target that's available in this menu." - } - ] - }, - { - "type": "GenericAccordion", - "anchorLink": "profile-default", - "title": "Profile (Default)", - "sectionContent": "The **Profile** page is where customers view and edit their personal information.", - "accordionContent": [ - { - "title": "Customer details", - "description": "The customer's name and contact information.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-customer-details-extension.png", - "altText": "The desktop and mobile view of the Profile page. Above the page title, and below the section of the page that contains the customer's name, email, and phone number, there are purple dotted-line boxes that indicate the available placements for the block extension target on this page." - }, - { - "title": "Addresses", - "description": "The customer's personal addresses.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-addresses-extension.png", - "altText": "The desktop and mobile view of the addresses section of the Profile page. Inside the addresses card, under the customer's saved addresses, there's a red dotted-line box that says customer-account.profile.addresses.render-after, indicating the static extension target available in this location." - } - ] - }, - { - "type": "GenericAccordion", - "anchorLink": "profile-b2b", - "title": "Profile (B2B)", - "sectionContent": "For B2B customers, the **Profile** page includes information about the customer, company, and the company location(s) the customer has access to. Learn more about the differences between the [default and B2B experiences](/docs/apps/customer-accounts#default-and-b2b-experiences).", - "accordionContent": [ - { - "title": "Customer details", - "description": "The customer's name and contact information.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-customer-details-extension-b2b.png", - "altText": "The desktop and mobile view of the Profile page. Above the page title, and below the section of the page that contains the customer's name, email, and phone number, there are purple dotted-line boxes that indicate the available placements for the block extension target on this page." - }, - { - "title": "Company details", - "description": "The company name. This extension target can be used to add more information about the company.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-company-details-extension.png", - "altText": "The desktop and mobile view of the company section of the Profile page. The header of the section says \"Celadon\" which is an example company name. Under the header, there is a red dotted-line box that says customer-account.profile.company-details.render-after, indicating the static extension target available in this location." - }, - { - "title": "Company location details", - "description": "The shipping address, billing address, and payment details associated with each specific company location.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-company-location-details-extension.png", - "altText": "The desktop and mobile view of the section of the B2B Profile page that contains details about the company location. Under the addresses section, there's a red dotted-line box that says customer-account.profile.company-location-addresses.render-after, indicating the static extension target available in this location. Under the payment methods section, there's another red dotted-line box that says customer-account.profile.company-location-payment.render-after, indicating a static extension target available in this location." - } - ] - }, - { - "type": "GenericAccordion", - "anchorLink": "order-action-menu-extension-target", - "title": "Order action menu", - "sectionContent": "Order-related actions that customers can access from both the **Order index** and **Order status** page.", - "accordionContent": [ - { - "title": "Order index page", - "description": "Where customers can view and manage all their past and current orders.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-order-action-menu-extension.png", - "altText": "The desktop and mobile view of the Order index page that contains a list of all orders. In the Manage menu, there's a red dotted-line box that says customer-account.order-action-menu-item.render, indicating the static extension target available in this location." - }, - { - "title": "Order status page", - "description": "Where customers can view, track, and manage a specific order.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-order-status-order-action-menu-extension.png", - "altText": "The desktop and mobile view of the Order status page that contains details about a specific order. In the Manage menu, there's a red dotted-line box that says customer-account.order-action-menu-item.render, indicating the static extension target available in this location." - }, - { - "title": "Order action modal", - "description": "A modal that can rendered to complete an order action flow.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).\n ", - "image": "target-overview-order-action-render-extension.png", - "altText": "The desktop and mobile views of the customer-account.order.action.render extension target." - } - ] - }, - { - "type": "GenericAccordion", - "anchorLink": "full-page-extension-target", - "title": "Full-page extension", - "sectionContent": "Build new pages for customer accounts. Full-page extensions render in the main content area—below the header, and above the footer.", - "accordionContent": [ - { - "title": "Full-page extension", - "description": "This full-page extension target is for building pages that are **not** tied to a specific order. For example, a Wishlist page.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).", - "image": "target-overview-full-page-extension.png", - "altText": "A desktop view of the customer-account.page.render full-page extension target that renders between the header and footer." - }, - { - "title": "Full-page extension (order-specific)", - "description": "This full-page extension target is for building pages that are tied to a specific order. For example, a Request Return page. \n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).", - "image": "target-overview-full-page-order-specific-extension.png", - "altText": "A desktop view of the customer-account.order.page.render full-page extension target that renders between the header and footer." - } - ] - }, - { - "type": "GenericAccordion", - "anchorLink": "footer", - "title": "Footer", - "sectionContent": "The section at the bottom of all customer account pages, where customers can find links to store policies.", - "accordionContent": [ - { - "title": "Footer", - "description": "A static extension target that renders in the footer, below the links to store policies. Since the footer appears across all customer account pages, this is an ideal location for elements like cookie consent banners that need to be visible across the entire customer accounts experience.\n \nSee all [extension targets](/docs/api/customer-account-ui-extensions/targets).", - "image": "target-overview-footer-extension.png", - "altText": "A desktop view of the customer-account.footer.render-after extension target that renders in the footer." - } - ] - } - ] - }, - { - "title": "Customer account UI extensions", - "description": "\n Customer account UI extensions let app developers build custom functionality that merchants can install at defined points on the **Order index**, **Order status**, and **Profile** pages in customer accounts.\n\n \n\n > Shopify Plus: \n>Some static extensions on the Profile page only render for B2B customers. B2B on Shopify is only available on the [Shopify Plus](https://www.shopify.com/plus) plan. [See B2B Profile targets](/api/customer-account-ui-extensions/unstable/extension-targets-overview#profile-b2b)\n ", - "id": "customer-account-ui-extensions", - "image": "/assets/landing-pages/templated-apis/customer-account-ui-extensions/customer-account-ui.png", - "darkImage": "/assets/landing-pages/templated-apis/customer-account-ui-extensions/customer-account-ui-dark.png", - "mobileImage": "/assets/landing-pages/templated-apis/customer-account-ui-extensions/customer-account-ui-mobile.png", - "mobileDarkImage": "/assets/landing-pages/templated-apis/customer-account-ui-extensions/customer-account-ui-mobile-dark.png", - "sections": [ - { - "type": "Generic", - "anchorLink": "scaffolding-extension", - "title": "Scaffolding an extension", - "sectionContent": "Use the Shopify CLI to [generate a new extension](/docs/api/shopify-cli/app/app-generate-extension) in the directory of your app.\n\nMake sure you’re using Shopify CLI `v3.85.3` or higher. You can check your version by running `shopify version`.\n ", - "codeblock": { - "title": "Shopify CLI", - "tabs": [ - { - "code": "# create an app if you don't already have one:\nshopify app init --name my-app\n\n# navigate to your app's root directory:\ncd my-app\n\n# generate a new extension:\nshopify app generate extension\n\n# follow the steps to create a new\n# extension in ./extensions.\n", - "language": "bash" - } - ] - }, - "initialLanguage": "bash" - }, - { - "type": "Generic", - "anchorLink": "eslint-configuration", - "title": "Optional ESLint configuration", - "sectionContent": "\nIf your app is using ESLint, update your configuration to include the new global `shopify` object.\n ", - "codeblock": { - "title": ".eslintrc.cjs", - "tabs": [ - { - "code": "module.exports = {\n globals: {\n shopify: 'readonly',\n },\n};\n", - "language": "js" - } - ] - }, - "initialLanguage": "js" - }, - { - "type": "Generic", - "anchorLink": "configuration-file", - "title": "Configuration file", - "sectionContent": "When you create a customer account UI extension, the `shopify.extension.toml` file is automatically generated in your extension directory. Use this file to configure your extension name, extension targets, metafields, capabilities, and settings definition.\n\nExtension targets provide locations where merchants can insert custom content. Static extension targets render immediately before or after most core customer account features. Block extension targets render between core customer account features. Block extensions are always rendered, regardless of what other elements of the customer account are present.", - "sectionCard": [ - { - "name": "Configuration guide", - "subtitle": "Navigate to", - "url": "/api/customer-account-ui-extensions/configuration", - "type": "gear" - }, - { - "name": "Extension targets", - "subtitle": "Overview", - "url": "/api/customer-account-ui-extensions/extension-targets-overview", - "type": "blocks" - } - ], - "image": "extension-targets.png", - "codeblock": { - "title": "shopify.extension.toml", - "tabs": [ - { - "code": "api_version = \"2025-10\"\n\n[[extensions]]\nname = \"Your customer account ui extension\"\nhandle = \"customer-account-ui\"\ntype = \"ui_extension\"\nuid = \"4be0643f-1d98-e73b-17cd-ca98a65347dda7632660\"\n\n[[extensions.targeting]]\ntarget = \"customer-account.order-status.block.render\"\nmodule = \"./Extension.jsx\"\n", - "language": "toml" - } - ] - }, - "initialLanguage": "yaml" - }, - { - "type": "Generic", - "anchorLink": "extension-functions", - "title": "Extension functions", - "sectionContent": "Customer account will execute the module’s default export so it can render a user interface.\n\nExtension UIs are powered by [Remote DOM](https://github.com/Shopify/remote-dom/), a fast and secure environment for custom [(non-DOM)](#security) UIs.", - "sectionCard": [], - "altText": "The Profile page with a purple dotted-line box above the page title that says \"Extension targets\".", - "codeblock": { - "title": "Extension.jsx", - "tabs": [ - { - "code": "import '@shopify/ui-extensions/preact';\nimport {render} from 'preact';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n return <s-banner>Your extension</s-banner>;\n}\n", - "language": "jsx" - } - ] - }, - "initialLanguage": "jsx" - }, - { - "type": "Generic", - "title": "Preact by default", - "sectionContent": "UI Extensions are scaffolded with [Preact](https://preactjs.com/) by default. This means you can use Preact patterns and principles within your extension.\n\nSince Preact is included as a standard dependency, you have access to all of its features including [hooks](https://preactjs.com/guide/v10/hooks/) like `useState` and `useEffect` for managing component state and side effects.\n\nYou can also use [Preact Signals](https://preactjs.com/guide/v10/signals/) for reactive state management, and take advantage of standard web APIs just like you would in a regular Preact application.\n ", - "anchorLink": "preact-by-default", - "codeblock": { - "title": "Extension.jsx", - "tabs": [ - { - "code": "import '@shopify/ui-extensions/preact';\nimport {render} from 'preact';\nimport {useState} from 'preact/hooks';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n const [count, setCount] = useState(0);\n\n return (\n <>\n <s-text>Count: {count}</s-text>\n <s-button\n onClick={() => setCount(count + 1)}\n >\n Increment\n </s-button>\n </>\n );\n}", - "language": "jsx" - } - ] - } - }, - { - "type": "Generic", - "anchorLink": "extension-apis", - "title": "Extension APIs", - "sectionContent": "The platform defines a global `shopify` object that contains all properties and methods available to UI extensions.\n\nThese APIs enable UI extensions to get information about the customer account or related objects and to perform actions. For example, you can retrieve what’s in an order and offer related products.\n\nAPIs with a `value` property are [Preact Signals](https://preactjs.com/guide/v10/signals/). Preact will automatically re-render your extension as values change.\n", - "sectionCard": [ - { - "name": "Customer account UI extensions APIs", - "subtitle": "Navigate to", - "url": "/api/customer-account-ui-extensions/apis", - "type": "blocks" - } - ], - "codeblock": { - "title": "Extension.jsx", - "tabs": [ - { - "code": "import '@shopify/ui-extensions/preact';\nimport {render} from 'preact';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n return (\n <s-banner>\n {shopify.i18n.translate('welcomeMessage')}\n </s-banner>\n );\n}\n", - "language": "jsx" - } - ] - }, - "initialLanguage": "jsx" - }, - { - "type": "Generic", - "anchorLink": "ui-components", - "title": "UI components", - "image": "ui-components.gif", - "altText": "An animation of a card that contains an image, heading, description, and button, shifting and transforming into highly customized versions of the same UI to reflect each merchant's unique branding.", - "sectionContent": "Customer account UI extensions declare their interface using [web components](/docs/api/customer-account-ui-extensions/using-web-components). Shopify renders the UI natively, so it’s performant, accessible, and works in all of customer account’s supported browsers.\n\nCustomer account components are designed to be flexible, enabling you to layer and mix them to create highly-customized app extensions that feel seamless within the customer account experience. All components inherit a merchant’s brand settings and the CSS cannot be altered or overridden.", - "sectionCard": [ - { - "name": "Component library", - "subtitle": "API Reference", - "url": "/api/customer-account-ui-extensions/web-components", - "type": "blocks" - }, - { - "name": "Figma UI kit", - "subtitle": "UI Reference", - "url": "https://www.figma.com/community/file/1554582792754361051", - "type": "library" - } - ], - "codeblock": { - "title": "Extension.jsx", - "tabs": [ - { - "code": "import '@shopify/ui-extensions/preact';\nimport {render} from 'preact';\n\nexport default async () => {\n render(<Extension />, document.body);\n};\n\nfunction Extension() {\n return (\n <s-stack direction=\"block\">\n <s-image src=\"https://cdn.shopify.com/YOUR_IMAGE_HERE\" />\n <s-stack>\n <s-heading>Heading</s-heading>\n <s-text type=\"small\">Description</s-text>\n </s-stack>\n <s-button\n onClick={() => {\n console.log('button was pressed');\n }}\n >\n Button\n </s-button>\n </s-stack>\n );\n}\n", - "language": "jsx" - } - ] - }, - "initialLanguage": "jsx" - }, - { - "type": "GenericAccordion", - "anchorLink": "custom-protocols", - "title": "Custom protocols", - "sectionContent": "Custom protocols make it easier to navigate to common locations, and construct URLs.", - "accordionContent": [ - { - "title": "Shopify protocol", - "description": "Use the `shopify:customer-account` protocol when you want to construct a URL with a root of customer accounts.", - "codeblock": { - "title": "shopify:customer-account", - "tabs": [ - { - "title": "Link to Order Index page", - "code": "<s-link \n href=\"shopify:customer-account/orders\"\n></s-link>\n", - "language": "jsx" - } - ] - }, - "initialLanguage": "jsx" - }, - { - "title": "Relative URLs", - "description": "Relative URLs are relative to your extension and are useful when you want to link to a route in your extension.", - "codeblock": { - "title": "/relative/urls", - "tabs": [ - { - "title": "Link to route in your extension", - "code": "<s-link\n href={`/subscriptions/${subscription.id}`}\n></s-link>\n", - "language": "jsx" - } - ] - } - }, - { - "title": "Extension Protocol", - "description": "Triggers a navigation to an extension using the `extension:` protocol. The handle is the handle of the extension that will be navigated to in the same application. Build a [full-page extension](/docs/api/customer-account-ui-extensions/extension-targets-overview#full-page-extension-target) to create a new page in customer accounts and handle the navigation.", - "codeblock": { - "title": "extension:handle", - "tabs": [ - { - "title": "Link to a route of an extension", - "code": "<>\n <s-link\n href={`extension:${extension.handle}/${path}`}\n >\n To full-page extension\n </s-link>\n\n <s-link\n href={`extension:${extension.handle}/customer-account.order.page.render/${orderId}/${path}`}\n >\n To full-page extension (order-specific)\n </s-link>\n</>\n", - "language": "jsx" - } - ] - } - } - ] - }, - { - "type": "Generic", - "anchorLink": "security", - "title": "Security", - "sectionContent": "\nCustomer account UI extensions are a safe and secure way to customize the appearance and functionality of the customer account pages without compromising the security of customer data.\n- They run in an isolated sandbox, separate from the customer account page and other UI extensions.\n- They don't have access to sensitive payment information or the customer account page itself (HTML or other assets).\n- They are limited to specific UI components and APIs that are exposed by the platform.\n- They have limited access to [global web APIs](https://github.com/Shopify/ui-extensions/blob/unstable/documentation/runtime-environment.md).\n- Apps that wish to access [protected customer data](/docs/apps/store/data-protection/protected-customer-data), must submit an application and are subject to strict security guidelines and review proccesses by Shopify.\n", - "sectionNotice": [ - { - "title": "Constraints", - "sectionContent": "\nYou can’t override the CSS for UI components. The customer account UI will always render the merchant’s own branding.\n\nCustomer account UI extensions don’t have access to the real customer account DOM and can’t render arbitrary HTML such as `
` elements or ` - - - - - - {{BODY_CONTENT}} - - - diff --git a/packages/ui-extensions/docs/surfaces/admin/templates/jsx-render.html b/packages/ui-extensions/docs/surfaces/admin/templates/jsx-render.html deleted file mode 100644 index 1bd5ecad2e..0000000000 --- a/packages/ui-extensions/docs/surfaces/admin/templates/jsx-render.html +++ /dev/null @@ -1,42 +0,0 @@ - - - - - - - - - {{BODY_CONTENT}} - - - diff --git a/packages/ui-extensions/docs/surfaces/admin/tsconfig.ab.docs.json b/packages/ui-extensions/docs/surfaces/admin/tsconfig.ab.docs.json deleted file mode 100644 index b5b6791d50..0000000000 --- a/packages/ui-extensions/docs/surfaces/admin/tsconfig.ab.docs.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "compilerOptions": { - "rootDir": "/" - }, - "include": [ - "./**/*.doc.ts", - "../../../src/surfaces/admin/components/**/*.doc.ts" - ], - "exclude": [ - "./**/*.ext.doc.ts", - "../../../src/surfaces/admin/components/**/*.ext.doc.ts" - ] -} diff --git a/packages/ui-extensions/docs/surfaces/admin/tsconfig.ext.docs.json b/packages/ui-extensions/docs/surfaces/admin/tsconfig.ext.docs.json deleted file mode 100644 index cddc9dfa9d..0000000000 --- a/packages/ui-extensions/docs/surfaces/admin/tsconfig.ext.docs.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "compilerOptions": { - "rootDir": "/" - }, - "include": ["./**/*.doc.ts", "../../../src/surfaces/admin/**/*.doc.ts"], - "exclude": ["./**/*.ab.doc.ts", "../../../src/surfaces/admin/**/*.ab.doc.ts"] -} diff --git a/packages/ui-extensions/docs/surfaces/customer-account/tsconfig.docs.json b/packages/ui-extensions/docs/surfaces/customer-account/tsconfig.docs.json deleted file mode 100644 index 8d1be61d6c..0000000000 --- a/packages/ui-extensions/docs/surfaces/customer-account/tsconfig.docs.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "compilerOptions": { - "rootDir": "/" - }, - "include": [ - "./**/*.doc.ts", - "../../../src/surfaces/customer-account/**/*.doc.ts" - ], - "exclude": [] -} diff --git a/packages/ui-extensions/src/surfaces/admin/components/Icon/icon-data.json b/packages/ui-extensions/src/surfaces/admin/components/Icon/icon-data.json deleted file mode 100644 index 3cd3c20686..0000000000 --- a/packages/ui-extensions/src/surfaces/admin/components/Icon/icon-data.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "iconPreviewData": { - "jsxFile": "./templates/icon-renderer/icon-preview.jsx", - "icons": "__AUTO_GENERATED_ICONS__", - "bodyContent": "
", - "customStyles": "padding: 0px; margin: 0px; margin-top: 8px; max-width: 584px; overflow: hidden; background: #FFF, border: 1px solid #ccc; border-radius: 8px;", - "hashes": "__AUTO_GENERATED_HASHES__" - } -}